I've a web application on asp.net using vb.net. On one of the UI Screens, there's a drop down having a post back on onSelectedIndexChange.
The problem is I want to block the entire UI as soon as there's a onSelectedIndexChange and wish to unblock it after the event is completed.
I tried experimenting putting an alert() in Page.Init but it's not firing as soon as I change the Value in DropDown. I even tried putting the alert() in the start on the onSelectedIndexChange method but it didn't work too.
Where should I write the script which fires as soon as I change the DropDown?
Try blockUI with jQuery
$( ".target" ).change(function() {
$.blockUI({ message: '<h1>Just a moment...</h1>' });
});
Related
I have two radio button in my views. on Page load i want to trigger a click event, i used the following Jquery Code to click radio button on page load.
$(window).on("load", function () {
jQuery(function () {
jQuery('#addressID_radioButton').click();
jQuery('#personID_radioButton').click();
});
});
But in Chrome jQuery('#addressID_radioButton').click(); works or triggers click event on addressID_radioButton radio button but on jQuery('#personID_radioButton').click(); sometime it works sometimes it doesn't, i have to refresh the page to make it work.
Set checked instead if that is all you are wanting to accomplish
jQuery('#addressID_radioButton, #personID_radioButton').prop('checked', true);
Since updating to Wordpress 5.6 I've noticed $(window).on("load"... is very fickle. I installed jQuery migrate too.
Try document.ready to test and I think you'll find it will work.
I'm not sure if the $(window).on("load" bug is related to jQuery or browser.
I am trying to fill out a form and click submit and then I need to wait until the next page loads and continue working with elements. It seems like the code after the button click happens before the next page appears and the DOM has loaded. I've tried to use a while loop to check the readyState but that doesn't seem to work either. Any suggestions? Here is an example of what I'm trying to do assuming I have the submit button element in variable submitButton.
I've tried to use a while loop to check the readyState but that doesn't seem to work either. Any suggestions? Here is an example of what I'm trying to do assuming I have the submit button element in variable submitButton.
submitButton.click();
var errors = document.getElementsByClassName('error'); // Should be done after new page load
if (errors.length > 0)
{
console.log("There are some errors");
}
Assuming there will be some errors on the next page, there should be a message printed out, but this doesn't happen.
You can use window.onload()
Just pass a function thaz does what your script is currently meant to be doing
The function will be called when the page is loaded so you can use it to implement the functionality you want
encapsulate the whole code inside function i write but for this you would need the jquery
$( document ).ready(function() {
//Your code here
});
For refrence
Document Ready function jquery
In my asp.NET application I have implemented a control to validate forms input data using server side logic.
The idea is to drag the control to wherever it's needed, set it up in the code behind and the form will be validated.
This validation occurs on the onchange event of each field and on form submission - synchronous ajax call to the server side.
This was working fine until I published it to IIS.
The problem is the following: the user is writing something in a textbox. Then, with the focus on that textbox, clicks on a button or linkbutton, not related to the form being validated.
The validation ajax call occurs (jQuery onchange fires) and the button postback is not reached. Through debugging I found the problem to be the ajax call is somehow preventing the postback to fire (almost feels like a synchronism problem).
I reduced the problem to the point that an alert seems to be causing the same thing as the ajax call. Please have a look at the following project: EDIT: Link removed because I can't post more than 2 links on the same post - sorry!
Consider the first 2 textboxes and the button:
1) If you write something on the first, then click the button: the onchange fires, an alert is shown and the postback does not occurr.
2) If you write something on the second, then click the button: the onchange fires and the postback occurrs.
Can someone please explain why this behavior happens and if there's any solution to this, ie, make the postback fire after the javascript finishes running?
I can think of 2 ways to solve my problem but I need to know (inside the textbox change event) the ID of the control clicked by the user. Any way of getting it?
That way I could: trigger the control explicitly OR verifiy if it doesn't belong to the form controls and don't event validate the input in that moment (that would make sense).
Thanks in advance.
EDITED 22-10-2014:
The plot thickens. This seems to be a synchronism problem. Check this other test application where I removed the alerts (this concentrated too much attention and is not actually related to the issue as I'm not using alert boxes in my project - I'm using little balloons) and just left the AJAX call.
Now, on the server side (WebMethod) I put a Thread.Sleep(). If the thread sleeps for too long, it seems to miss the postback. In my case, on my development environment, the threshold seems to be 80ms. If the ajax call takes less than ~80ms, then the postback is done, if it takes more than that, it misses the postback. Any ideas or similar (resolved) issues you have seen? Note that my ajax call has async: false.
EDITED 24-10-2014:
Finally had another look into this. I think I may have come to a possible solution, although I don't like the idea of relying on a setTimeout to handle the submit button 'click' before the 'focusin' (same control).
I changed the logic (still achieving the same goal) and now use different events.
Now I need to distinguish when the submit control fires the 'focusin' event because it just gained focus (1) or it was clicked (2):
The user could just be tabbing (validates the last field that had focus - if it belongs to the form being validated)
The user could have clicked (does not validate the last field that had the focus, but the whole form and then submits or not)
Have a look at this new test app which is closer to what I have in my project.
Can you help me finding a better way to handle/process the click event before the focusin event on the same control without something unpredictable like a setTimeout? If I do need to rely on the setTimeout, how much do you think the wait should be set to? On my machine 150ms works, but on another persons, it may require more time? Something like some sort of callback would be ideal.
Thanks again
Use __doPostBack('',''); at end of your javascript function
It does appear that an alert box stops postback in this situation. The sensible solution I found was to use a jQuery dialog which doesn't seem to suppress a postback. Problem is of course the dialog doesn't persist itself through the postback but this is solved by a hidden field containing a 'flag' to display the dialog after postback or not.
You will need to add jquery-ui.js and some style for the dialog, if this is a serious application I suggest you download both files and put them in scripts folder as you already have with the jquery min.
<head runat="server">
<title>Postback with dialog</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#TextBox1").on('change', function(e) {
$("#doDisplayDialog").val("yes"); // Add a flag so it shows after postback.
$('#jqAlert').dialog({
closeOnEscape: true,
open: function(event, ui) {
$(this).parent().appendTo("form");
}
});
});
if ($("#doDisplayDialog").val() == "yes") {
$('#jqAlert').dialog({
closeOnEscape: true,
open: function(event, ui) {
$(this).parent().appendTo("form");
}
});
$("#doDisplayDialog").val("no"); // Clear the flag so it doesn't display after postback.
}
});
</script>
</head>
Add a hidden field:
<asp:HiddenField ID="doDisplayDialog" runat="server" />
And a Div to be the dialog box:
<div id="jqAlert" title="Alert" style="display: none;">
<p>Postback will happen!</p>
</div>
Code is based on your downloadable test website application.
-- not a working solution below --
Try this - copy/paste replace these lines in your test web application:
$(document).ready(function() {
$("#TextBox1").on('change', function() {
alert('T1 Postback does not fire');
return true;
//return AjaxCall();
});
$("#TextBox2").on('change', function() {
alert('T2 Postback does not fire');
return true;
//return AjaxCall();
});
});
The only change I did was replace single quotes with double quotes in jquery selector here
$('#TextBox2')
with
$("#TextBox2")
Edit: actually it doesn't work, I had a bug in my test code. Will look more into this.
jQuery(document).click(function () {
jQuery('.close-news').css('display', function(){return jQuery('#colorbox').css('display');});
});
I have this script, which make my link appear\dissappear depends on state of #colorbox block. But somewhy link appear\dissappear not immediatelly, but after 2 click.
Basically i have to click one more time in random area to make my script work
I guess its because my html code isnt update fast enought to make . So how do i add some timeout for this script?
It seems you are using Colorbox in Drupal.
There can be a callback function that gets executed once the Colorbox is shown up.
After Debugging your site, seems that there is a cbox_complete custom event firing up.
If thats the case, you can attach a function to this event.
In the function, you can toggle the display of your .close-news li element, similar to what you are doing on document click in the question
Using jQuery I want to submit a button that was previously disabled. When I remove the attr of disable then do a .click() it doesn't trigger and send me to the next page. But if I do an alert("XYZ"); then .click() it sends me to the next page. I assume this has to with the time taken to disable then click(It's not disabling before the click event is fired).
Working Example Of "Broken" Behavior: http://jsfiddle.net/LmFjd/71/ - This is how I have my code setup and exactly what is not working for me. Notice that it triggers the onsubmit event, but it doesn't actually submit.
Working Example Of Expected Behavior: If you put a .show() in there it works: http://jsfiddle.net/LmFjd/70/
When there is an alert between the removeAttr and the click() it works, otherwise the click doesn't trigger.
For clarification, I'm using jquery-1.5.1.min.js. It's a JSP page, using Apache Tomcat 6.0.29. It's a spring MVC WebApp, and I'm using the section inside a jQuery UI Dialog dismiss button
Hackish Solution: Putting a .show() before the .click() makes it work.
There can be two things can be done through JQuery to do your things is Just remove the attributed disabled=disabled and on document ready use the hide and on doing some even again show you required input box, the code to do that is as under:
$(document).ready(function() {
$('#edit').hide();
"Discard changes": function() {
$( this ).dialog( "close" );
alert(actionButton);
$('#edit').show();
}
});