Recently I encountered an issue when trying to set the selected value of a dropdown list. I was using the jQuery .ajax method to populate the select list and this was working, but when I tried to set the selected value using jQuery, I was not able to. I should have realized that .ajax makes a async call by defualt and there is no garuntee the list will be populated when you try to set the selected value.
There are a couple of solutions. You can set the selected value in the success event handler or you can set async to falst in the .ajax method:
async: false,
If you have jQuery code that reads the .attr("checked") and you upgrade from 1.5 to 1.6.4, you should read this:
http://ejohn.org/blog/jquery-16-and-attr/
In summary, if you were relying on .attr("checked") returning true or false, the behavior has changed with 1.6 as it now returns "checked" or "". The problem being that JavaScript will equate both "checked" and "" as true in an if statement.
If you are using the .load or .ajax jquery functions and you notice that instead of using a POST, OPTIONS is used, it may be due to the same origin policy. This also applies to same domain traffic going from HTTP to HTTPS.
More info here http://stackoverflow.com/questions/1099787/jquery-ajax-post-sending-options-as-request-method-in-firefox
Uploadify is an excellent upload plugin script. One issue that I recently encountered was how to notify uploadify that an error occured with your server side scipt while processing a file. I found that by returning a status code of 405, uploadify will mark the file as errored (highlight in red in the queue).
To accomplish this, you should set the status code to 405 with your response from your server side code. The below example show how to do this in C#, the the same applies for any server side language (php, ruby, etc).
I have placed this in a finally block and check a local variable response and set the status code if the value is not success.
finally
{
if (response != returnValueSuccess)
{
context.Response.StatusCode = 405;
}
context.Response.Write(response);
}
}
I noticed while using the jQuery UI modal dialog that if you have a link (or form element) within your HTML in the modal, the focus will be given to the first one. If the element is further down on the modal, then it will scroll down, which is not the desired behavior.
To correct this, I simply added a link at the top of the modal and gave it focus:
Place at top of modal HTML:
<a id="top" href="#" ></a>
In document ready, add focus to #top:
jQuery(document).ready(function() {
// Tell jQuery that our div is to be a dialog
jQuery("#dialogTOS").dialog({ autoOpen: false, height: 400, width: 900 });
jQuery('#linkTOS').click(function() {
jQuery('#dialogTOS').dialog('open');
// Focus on top element
jQuery('#top').focus();
});
});
Recently I had the need to handle the selected index changed event in an ASP.NET page. I did not want to post back to the server as I just wanted to hide/show an HTML element, so jQuery was the perfect fit.
Below is the code. Basically, within the jQuery document ready funciton, I wire a function to each dropdown list ('select') change event. You will probably want to refine this to a single id or class. Each time the dropdown selected index changes, I want to check the text value, and if it contains some text, either show or hide an HTML element. I also set a checkbox control to checked using the client id within a script tag.
<script type="text/javascript">
$(function() {
$('select').change(function(e) {
if (this[this.selectedIndex].text.indexOf("SomeText") > 0) { $('#emailActivity').fadeIn("slow");
// Ensure checkbox initially checked
$('#<%=cbSendEmail.ClientID %>').attr('checked', true);
}
else {$('#emailActivity').fadeOut();
}
});
});
</script>