I've been trying to call a javascript function from a button click, and I can't figure out what I'm doing wrong.
I've searched for similar questions and followed the answers, but the button click is still not calling the function.
The following code is in my .cshtml page. First, I create the button
<input type="button" id="myButton" onclick="Save()"/>
And I have a function on the same page
<script> function Save() { ..do stuff here } </script>
This function never gets called. What am I doing wrong?
Here you can do like this way:
$(document).ready(function() {
$("#myButton").click(function() {
alert("button clicked.");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="myButton" value="test"/>
Related
I'm new to ASP.NET Core and trying to figure out how to display a Bootrstap modal based on a string property of the underlying page Model (Model.Message). I've tried several different things and nothing is working. Below is a sample Bootrstap modal I found on the Bootstrap website. I can get the modal to display with a button, but that's not the functionality I am looking for.
<!-- Modal -->
<div class="modal fade" id="UserDialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
EDIT: Added code to my scripts section at the bottom of the page and a new JavaScript function in an external .js file.
Here's my scripts section on the Razor page
#section scripts
{
<script>
$(document).ready(function () {
ShowModalDlg();
var message = '#Model.Message';
if (message != "") {
ShowModalDlg();
}
});
</script>
}
Here's the new JavaScript function in my external file
function ShowModalDlg()
{
$("#UserDialog").modal("show");
}
The ShowModalDlg() function does get called when it is supposed to, but the bootstrap modal is not showing. The button I added to test "showing" the modal still works. I also added (although not shown here) a temporary call to alert("I'm here!") inside of the ShowModalDlg() function and the alert shows perfectly. I did just check the Chrome debug console and I am getting an error that seems to indicate I am loading jquery twice. That error message is:
"$(...).modal is not a function"
So it looks like I need to figure out where that's happening.
I have the following in my _Layout.cshtml page:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
If I understand you, this kind of approach might solve your problem. We define a ShowModal variable sent from the controller as a javascript variable, then we trigger the modal by checking the value of this variable.
EDIT: We expect 'show' string as showModal variable from controller.
<script>
var showModal = '#Model.showModal';
if(showModal == 'show'){
$("#exampleModal").modal("show");
}
</script>
If you use it this way it will work. You can check it here.
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- You may not really need this. -->
<!-- Bootstrap 5 (https://getbootstrap.com/docs/5.0/getting-started/download/) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I fixed the problem by combining the answer above with the following:
$(window).load(function ()
{
var message = '#Model.Message';
if (message != "") {
ShowModalDlg();
}
});
I should not have had that code inside of document ready, which is why it wasn't working and also causing the error message.
<label class="label-set">
<input type="checkbox" class="" name="sameadr" />
I agree to all statements of
Terms of Use
</label>
How to open popup, onclick of link. simple popup should open as soon as user click on link
In html
give a id to your a tag.
<label class="label-set" id="mainId">
<input type="checkbox" class="" name="sameadr" />
I agree to all statements of
Terms of Use
</label>
In javascript
document.getElementById("newId").addEventListener("click", function(){
confirm("confirm this") // or your popop code
})
Try this for vue.js
Terms of Use
And write this inside your method
new Vue({
el: '#mainId',
methods: {
openPopup: function () {
alert('ok')
}
}
})
Try this
Make a modal component. Add a click to your a tag. When clicked show your modal component. After another action (confirm etc.) close and continue.
How to make a reusable modal component in Vue.js: How to make a Modal Component
I am new to Razor pages and am having trouble figuring this out without controllers. I understand typically if this was a regular razor page, I could just add an OnPost method to the PageModel, but with _Layout, my understanding is there shouldn't be a PageModel, as it will conflict with the PageModel being called with #RenderBody()
I want to do something like this:
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title> #ViewData["Title"] </title>
</head>
<body>
<partial name="_TopNavigation" />
<div>
<button type="button" asp-page-handler="Dismissed"></button>
</div>
<div class="content">
<div>
#RenderBody()
</div>
</div>
</body>
</html>
When button is pressed, I want to add a server side cookie. Something like this:
addCookie.cs :
public IActionResult onPostDismissed()
{
Response.Cookies.Append("MyCookie", "value1", cookieOptions);
}
I want the button to be on every page, which is why I have added it to _Layout, however I haven't been able to figure out where I can add code to handle that. Also, I know this would be fairly simple with javascript, but I specifically want to set the cookie server side.
If you want to call the handler method in the layout page. I suggest you could try to create a new razor page with its handler to add the response cookie.
Then you could set the form's asp-page attribute in the page to let the button call that handler method.
More details, you could refer to below codes:
Add below codes into layout page:
<form method="post" asp-page="/Dismissed">
<button type="submit" value="Click">Click Me To Add Cookie</button>
</form>
Create a new razor page called Dismissed and add below codes into its page model
public void OnPost() {
int i = 0;
Response.Cookies.Append("MyCookie", "value1");
}
Result:
I've a custom dojo widget (reminder )which I want to reload on an event(on click of add button on widget a dialog will open where I'll fill reminder data and will click submit . on click of submit button widget should reload with data which I filled in dialog).
<body class="claro teller">
<form name="tellerForm">
<input type="hidden" name="expldQryStr" id="expldQryStr">
<input type="hidden" name="actionCode" id="actionCode">
</form>
<div class="row">
<div data-dojo-type="MyCashBalanceWidget.MyCashBalance" data-dojo-props="title:'Our Cash Balance Widget',data:CashBalData,data1:invtData"></div>
<div data-dojo-type="MyFrequentTasksWidget.MyFrequentTasks" data-dojo-props="pageName:'TellerLandingPage',title:'Our Some Widget',data:freqTskData"></div>
<div data-dojo-type="PendingTransactionWidget.PendingTransaction" data-dojo-props="title:'Pending Transaction Widget',data:pndTrnData,data1:pndVrfData"></div>
<div id="remWdgt" data-dojo-type="MyRemindersWidget.MyReminders" data-dojo-props="pageName:'TellerLandingPage',title:'My Reminders Widget',data:rmndrData"></div>
<div data-dojo-type="MyAppsWidget.MyApps" data-dojo-props="pageName:'TellerLandingPage',title:'My Apps Widget'"></div>
<div data-dojo-type="MyActivityWidget.MyActivity" data-dojo-props="pageName:'TellerLandingPage',title:'My Activity Widget',data:analData"></div>
</div>
<div data-dojo-type="TellerLandingPageGridWidget.TellerLandingPageGrid" data-dojo-props="title:'Teller Landing grid',data:lastTrans">
</div>
<script>
//including all the custom widgets
require(
[
"dojo/parser",
"CommonWidgets/MyFrequentTasksWidget",
"Widgets/MyCashBalanceWidget",
"Widgets/PendingTransactionWidget",
"CommonWidgets/MyRemindersWidget",
"CommonWidgets/MyAppsWidget",
"CommonWidgets/MyActivityWidget",
"Widgets/TellerLandingPageGridWidget"
],
function( parser) {
parser.parse();
});
</script>
</body>
</html>
please suggest how can I reload dojo widget .
I am not sure about your complete scenario. But in such situation, you have two ways:-
1) Add event listener to your custom widget, that will listen and modify itself
2) Recreate the widget, passing it's constructor with the new values.
Your question is quite unclear, but from the sound of it, you just want to set the innerHTML of a specific DOM node if a form within a dialog is submit. There's no reason to reload the widget for that, you could just add an event handler to the submit event of the dialog form, and use that to set the innerHTML of a specific element inside your widget.
First of all you need to add an onLoad event listener to your dialog so you know exactly when to add the event handlers to the form:
postCreate: function() {
this.myDialog = new Dialog();
this.myDialog.on("load", lang.hitch(this, this.loadDialog));
this.myDialog.set("content", "<div><form><input type='text' /><button type='submit'>Submit</button></div>");
},
This will call a function loadDialog on your widget, which could look like this:
loadDialog: function() {
var vm = this;
query("form", this.myDialog.domNode).on("submit", function(evt) {
evt.preventDefault();
vm.myLabel.innerHTML = query("input", this).val();
vm.myDialog.hide();
});
},
This function utilizes dojo/query and dojo/NodeList-manipulate to obtain the form field value when the form inside the dialog is submit. That value is then used to alter myLabel an element on the widget that I gave the attribute data-dojo-attach-point="myLabel" so that it's easily accessible from within the widget code:
templateString: "<div><label data-dojo-attach-point='myLabel'></label><button data-dojo-attach-event='onClick: openDialog'>Add</button></div>",
I have a form that fits neatly into my colorbox. When the following validation function fires it creats dynamic labels that cause the form's height to pop a scroll bar.
I am trying to call $.colorbox.resize() every time the validation function runs but so far its not working?
My code so far
<script type="text/javascript">
$(document).ready(function(){
$("#logForm").validate();
$("#logForm").colorbox.resize();
});
</script>
form code
<div id="colorboxwrapper">
<form action="login.php" method="post" name="logForm" id="logForm">
<input name="doLogin" type="submit" id="doLogin3" class="button" value="Login">
</form>
</div>
This:
$("#logForm").colorbox.resize();
Should be this:
$.colorbox.resize();