Load dropdown with .ajax then set the selected value with jQuery

by Cliff 11. February 2012

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,

jQuery checked attr jQuery 1.5 to 1.6.4

by Cliff 1. January 2012

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.

jquery .load using OPTIONS in Firefox

by Cliff 5. January 2011

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 showing an error

by Cliff 26. August 2010

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);
        }
}

 

jQuery UI modal dialog focus issue

by Cliff 1. August 2009

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();
            });

        });

jQuery with ASP.NET selected index changed

by Cliff 18. July 2009

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>

Cliff Gray's Info

Cliff Gray
Developer/Founder GrayTechnology.com.

E-mail me Send mail

Authors

Calendar

<<  August 2017  >>
MoTuWeThFrSaSu
31123456
78910111213
14151617181920
21222324252627
28293031123
45678910

View posts in large calendar

Blogroll

Download BlogEngine.NET

Download at CodePlex

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2017

Subscribe