right now I have a huge Solution in which we use javascript alerts via RegisterStartupScript for all messages and errors.. We were willing to modify all this to making something similar to the modalPopupExtender, or the extender itself in a way that doesn't require too much effort... I mean, to show a modalpopup on a single page I need to create it on the aspx file, setting the attributes etc... So i'm just asking for Ideas, want to know how you guys deal with this..
I'd probably use jQuery dialog and put the markup and initialization code in a MasterPage, set with autoOpen false and hidden by default. I'd inject code that interacts with the dialog into each page as needed.
<div id="modalDialog" title="Error">
<p id='modalDialogMsg'>An error has occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#modalDialog').dialog({
autoOpen: false;
modal: true,
buttons: {
"OK" : function() {
$(this).dialog('close');
}
}
});
});
// You could "objectify" this, but I'll show as a global function
function showError( title, msg )
{
if (!title) {
title = 'Error';
}
if (!msg) {
msg = 'An error occurred.';
}
$('#modalDialogMessage').html(msg);
$('#modalDialog').attr('title',title)
.dialog('open');
}
</script>
Then, in your page you'd inject code that calls showError. Note this would need to be after the script above in order to make sure that the function has been defined. What would spit out would render like:
<script type="text/javascript">
$(function() {
showError('Database connection error', 'There was an error connecting to the database.' )'
});
</script>
Could you not place the modal popup/ modal popup extender into a user a control and embed the user control into each page?
Related
I can't find any documented way to reload the new "Sign in With Google" button in JavaScript.
I have to remove the script tag and the "button" div then re-add them both.
Does anyone know of a better way to do this?
Have you looked at the JS renderButton method ?
Assuming you have something like this to initialize the library and display the button in JS, you might be able to update locale in the second parameter to renderButton and call the method again to switch languages.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large", locale: "the new locale" }
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</div>
</body>
</html>
Obviously, you'd call renderButton a second time from outside of the window.onload example above, I didn't go as far as showing that in the code sample though.
In wordpress, when using a theme, how can I prevent a click event from happening on a custom link. I am thinking of adding the following:
onClick="return false"
I am trying to prevent the page from scrolling down unexpectedly, when clicked.
do you have access to the theme edition? If so, you can try to use something like the code below, it's
add in footer.php
if you do not have access, but the theme has some custom field.
<script>
//JQUERY
(function ($) {
$('a[href=#]').click(function (e) {
e.preventDefault();
})
})(jQuery)
//JS PURE
document.querySelectorAll('a[href="#"]').forEach(function(ele, i){
ele.addEventListener('click', function (e) {
e.preventDefault();
})
})
</script>
I need someone to put me through how I can use jquery dialog to ask "Confirm" or "Cancel" validations before submit. I get Microsoft JScript runtime error: Object doesn't support property or method 'dialog' for this on IE9:
<script type="text/javascript">
$(document).ready(function () {
$("#savechanges").click(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
buttons: {
"Confirm": function () {
$("#myformid").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
return false;
});
});
</script>
<div id="dialog"></div>
<p>
<input type="submit" id="savechanges" value="Save changes" />
</p>
If you set autoOpen as false, dialogbox doesn't open when you define it. So you should set it true.
From jQuery-UI docs,
autoOpen
When autoOpen is true the dialog will open automatically when dialog is called.
If false it will stay hidden until .dialog("open") is called on it.
DEMO
There can be multiple reason behind this issue, make use of any debug tool like firebug to check
Use a tool like Firebug for Firefox to verify each JS file is being included.
Make sure there is no other JS on the page that could cause an error.
Verify you have the correct versions of the files downloaded.
I am updating one of my sites from asp.net with jQuery UI to use master pages.
Here is a snippet of my original code, which works w/out master pages, but not with:
$('#myCancelEventDialog').dialog({
autoOpen: false,
width: 500,
buttons: {
"Cancel This Event": function () { __doPostBack('btnCancel', ''); },
"Do Nothing": function () { $(this).dialog("close"); }
}
});
However, I see what is going on, with the master page chaging the names of the functions, and this code below fixes it for this instance.
$('#myCancelEventDialog').dialog({
autoOpen: false,
width: 500,
buttons: {
"Cancel This Event": function () { __doPostBack('ctl00$ContentPlaceHolder$btnCancel', ''); },
"Do Nothing": function () { $(this).dialog("close"); }
}
});
Notice I have put the 'ctl00$ContentPlaceHolder$' prefix on the btnCancel so that the appropriate callback function is fixed.
From other threads I have read on stackoverflow, there is a better solution than patching up the code one place at a time as I have done above, but haven't quite got it right yet.
What is the general-purpose way to get jQuery UI postback functions to find the right callback function when you are using master pages like in my example above?
A quick fix could be to do the following
$('#myCancelEventDialog').dialog({
autoOpen: false,
width: 500,
buttons: {
"Cancel This Event": function () { __doPostBack("'" + $('[id$=btnvalue]')[0].id + "'", ''); },
"Do Nothing": function () { $(this).dialog("close"); }
}
});
This uses the jQuery endswith selector since the master page now means your control id have prefixes but the ending is the same. This works as long as you dont have duplicate id's dotted around which is what the asp.net team aimed to stop by prefixing nested control id's.
The downside of this is that jQuery has to do more work to find the element as it cannot use the native getElementById.
Another fix would be to upgrade to asp.net 4.0 where you can turn of the prefixing of controls using the clientidmode
You will want to use the ClientID of the control you are after:
__doPostBack('<%= btnCancel.ClientID %>', '');
However, if you use this technique, you will have to enclose your script block inside a div that is exposed to the ASP.Net runtime via the runat attribute.
<div runat="server">
<script type="text/javascript" language="javascript">
//Your Script Here
</script>
</div>
It might be helpful for developers;
http://deepasp.wordpress.com/2013/05/31/jquery-dialog-in-asp-net-master-page/
I have written some code using jQuery to use Ajax to get data from another WebForm, and it works fine. I'm copying the code to another project, but it won't work properly. When a class member is clicked, it will give me the ProductID that I have concatenated onto the input ID, but it never alerts the data from the $.get. The test page (/Products/Ajax/Default.aspx) that I have set up simply returns the text "TESTING...". I installed Web Development Helper in IE, and it shows that the request is getting to the test page and that the status is 200 with my correct return text. However, jQuery refreshes my calling page before it will ever show me the data that I'm asking for. Below are the code snippets from my page. Please let me know if there are other code blocks that you need to see. Thank you!
<script type="text/javascript">
$(document).ready(function() {
$(".addtocart_a").click(function() {
var sProdIDFileID = $(this).attr("id");
var aProdIDFileID = sProdIDFileID.split("_");
var sProdID = aProdIDFileID[5];
// *** This alert shows fine -- ProdID: 7
alert("ProdID: " + sProdID);
$.get("/Products/Ajax/Default.aspx", { test: "yes" }, function(data) {
// *** This alert never gets displayed
alert("Data Loaded: " + data);
}, "text");
});
});
</script>
<input src="/images/add_to_cart.png" name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$aAddToCart_7" type="image" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_aAddToCart_7" class="addtocart_a" />
The easiest way is to tell jQuery not to return anything.
$(".addtocart_a").click(function(e){
// REST OF FUNCTION
return false;
});
Good luck! If you need anything else let me know.