I have a server side method that can take long time. I decided to display a loading process modal and for that I used this tutorial. It works fine, but my problem is the following.
I'm using jQuery UI/Tab on the same page and it contains two tabs. On postback all UI loses styles. As I understood, the problem is in UpdatePanel, and the solutions suggested is to use the function pageLoad(). But it solved my problem partially, because the last selected tab is not persisted on postback.
It worked fine before implementing the loading model process and I used the following :
$(function() {
$("#tabs").tabs({
show: function() {
var sel = $('#tabs').tabs('option', 'selected');
$("#<%= hidLastTab.ClientID %>").val(sel);
$( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );
},
selected: <%= hidLastTab.Value %>
});
});
Is there any solution for this?
I have a similar problem and I sorted out using the following:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
load_lazyload();
}
function load_lazyload() {
//here you need to add the jquery functions related to the tabs, as well as other jquery code you may have
//i.e.
$(function () {
$(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
});
}
Hope this helps,
UPDATE: Probably, for your specific case, it would be something like this:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
load_lazyload();
}
function load_lazyload() {
$(function() {
$("#tabs").tabs({
show: function() {
var sel = $('#tabs').tabs('option', 'selected');
$("#<%= hidLastTab.ClientID %>").val(sel);
$( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );
},
selected: <%= hidLastTab.Value %>
});
});
}
You need to register a ClientSideScript that selects the current tab in whatever event/method that is being executed during the postback.
Related
Hello I would like to disable the woocommmerce register page button after one click to avoid multiple clicks.
I have searched the forums and found a bunch of solutions for custom forms and I've tried the following JS code but had no luck. I have a feeling I am setting the wrong selector because I cannot for the life of me figure out what the correct selector for the default register button is.
<script>
function disableButton() {
var btn = document.getElementById('woocommerce-register-nonce');
btn.disabled = true;
btn.innerText = 'Posting...'
}
</script>
I've also tried :
<script>
jQuery('woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').live('click', function (e) {
var self = this;
$(this).attr("disabled", "disabled");
do_something();
setTimeout(function () {
$(self).removeAttr('disabled');
}, 10000);
});
</script>
Some guidance would be very much appreciated.
Update!
Based on Onboardmass's suggestion I have corrected the selector and got it partially working using jquery.
<script>
jQuery('.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').click(function(){
jQuery(this).attr("disabled", "disabled");
});
</script>
The button now gets disabled on click however the issue I'm facing now is that the form does not get submitted.
The issue you're facing is because the selector is incorrect. It should be .woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit.
For anyone else who may need this I was able to figure this one out by reading through the suggestions and other threads I found. Thank you Onboardmass & Martin for the guidance!
The time out function is required for the click to register.
<script>
$(document).ready(function () {
$(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").prop('disabled', true);
}
});
</script>
Example of a problem:
The click event inside the form is not triggered
$(document).on('click', function(e) {
console.log('ok');
});
The most interesting thing is that the change event works correctly
What could be the problem at all ?
In General, I found a problem, maybe someone will be useful:
$(document.body).on('updated_checkout updated_shipping_method', function (event, xhr, data) {
$('input[name^="shipping_method"]').on('click', function(e) {
console.log('ok');
});
});
Instead of input[name^="shipping_method, you can add any class that is inside the form
We are working with bootstrap multiselect component in asp.net web forms application. It's works fine on first page load, but curiously, stop working after a page postback / update panel updates the content. The appearance is fine, but the behavior isn't.
Add the following code in your script section. This happens because the bootstrap control will have to be rebounded at every page load.
<script>
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});
function PageLoaded(sender, args) {
$(".DDLmultiple").multiselect({
includeSelectAllOption: true
});
}
</script>
Put this code in your script
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
'$('[id*=ddlProducts]').multiselect({ enableFiltering: true, filterBehavior: 'text', includeSelectAllOption: true, includeFilterClearBtn: true, selectAllText: 'Select All', nonSelectedText: 'Select Manufacturers', filterPlaceholder: 'Search Manufacturers', selectedClass: null });
}
When I use ajax, I noticed that Jquery effects don't work. The reason is "The new HTML you're adding to the DOM (page) didn't exist when your jquery ran the first time "
another similar question
Therefore, I changed my code to following but still I don't get the jquery effects.
Where I have done the mistake?
Previous code
$("#sendemp").click(function(e) {
e.preventDefault();
var submit_val = $("#searchbox").val();
//alert('submitval is ' + submit_val);
$.ajax( {
type : "POST",
//dataType :"jason",
url : "./wp-admin/admin-ajax.php",
data : {
action : 'employee_pimary_details',
user_name : submit_val
},
success : function(data) {
// alert('hhh');
$('#accordion21').html(data);
// $( "#searchbox" ).autocomplete({
// source: data
// });
}
});
});
New code
$("button").on( "click", "#accordion3",function(){
$.ajax( {
type : "POST",
dataType : "json",
url : "./wp-admin/admin-ajax.php",
data : {
action : 'employee_deatils_search',
user_name : submit_val
},
success : function(data) {
// alert('hhh');
$('#accordion3').html(data);
$("tr:odd").css("background-color", "#F8F8F8");
$("#accordion3").accordion({ heightStyle: "fill", active: 0 });
// $( "#searchbox" ).autocomplete({
// source: data
// });
}
});
} );
I have following submit button
<input type="submit" id="sendemp" value="Search" />
I don't think your click binding is correct, if you want to handle clicks on button inside #accordion3 change it to:
$("#accordion3").on( "click", "button",function(){...});
It is hard to tell without your html, but it looks like in your old code you are replacing the sendemp button. In your new code your event delegation is incorrectly specified. You are applying delegation to a button element (which doens't exist since your sendemp button is an input element).
Apply delegate to something that is the parent of #sendemp like so:
$('body').on('click', '#sendemp', function() {
// your ajax call
});
I could fix the issue, I tried the above solution that is using on method. However, it doesn't make sense to my problem.
As following artical explain I think, Accordion is already instantiated and effects are persistance. When it is called second time, it won't create again since there is already the effects.
Therefore, I needed to destroy it and recreate accordion.
support link
I changed the code on success as follows
success : function(data) {
// alert('hhh');
$('#accordion3').accordion('destroy');
$('#accordion3').html(data);
$("tr:odd").css("background-color", "#F8F8F8");
//$("#accordion3").accordion( "disable" );
$("#accordion3").accordion({ active: 0 });
}
And out of $(document).ready(function() {
I added
$(function() {
$("#accordion3").accordion({
// heightStyle: "fill",
active: 0 });
});
I'm using the following JQuery block in my DotNetNuke module:
jquery(document).ready(function (){
$( "#dialog:ui-dialog").dialog("destroy");
$( "#dialog-message").dialog({
modal: true,
buttons: {
Ok: function(){
$( this ).dialog("close");
}
}
});
});
</script>
<div id="dialog-message" title="Registration Confirmed">
I'm not sure how to redirect the user to the home page when they click the Ok button? Also, how do I wire up the dialog-message DIV to only fire when my ASP:Button is clicked?
Thanks much!!
You can put an OnClientClick on your Button and call a function that will show your modal. When the ok button is clicked you can change the window.location to the path of your homepage.
HTML
<asp:Button runat="server" ID="btn_ShowModal" OnClientClick="showModal(); return false;" />
Javascript
function showModal()
{
$( "#dialog-message").dialog({
modal: true,
buttons: {
Ok: function(){
$( this ).dialog("close");
window.location = "pathToHomepage";
}
}
});
}
Edit
There are two types of paths that can be used in javascript and in web development in general: relative paths and absolute paths.
Relative paths: start from the current directory and you access the desired location from there using '/' to go forward a directory and '../' to go backward
Absolute paths: the full url to the desired location
You can find a more thorough description here
'~/' is a sever side "shortcut" that unfortunately does not work on the client side without using something like this.ResolveClientUrl.
'<%= this.ResolveClientUrl("~/default.aspx") %>'
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "Alert",
buttons: {
Close: function () {
$(this).dialog('close');
window.location = "home.aspx";
}
},
modal: true
});
});
};
</script>
client side
string message = "Profile Updated!!.";
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);