how to update a div with jquery based on drop down selection.

Question

I have a drop down menu with 3 values. each has an option id. I want to make an ajax request and update a div based on the response from that request.

I have sample code on jsbin in which I am trying to make ajax request to imdb. I don't want to parse the response back from imdb but want someone to show me how to update a div based on the response back from imdb. This is just a sample as I am trying to implement something like this in my application...only difference is that instead of making callback to imdb I'll be making callback to my applicaiton.

Please see the example

Answer 1

Something like:

$('select').change(function() {
    $('#yourdiv').load('to/your/page', {value: $(this).val()});
});

This will send a GET request (to/your/page?value=theSelectValue) whenever the value of the select element changes and load the response in the div with ID yourdiv.

Of course you have to adjust the selectors and the parameter name.

If you want to make a POST request, you can use the $.post() function with a callback:

$('select').change(function() {
    $.post('to/your/page', {value: $(this).val()}, function(data) {
        $('#yourdiv').html(data);
    });
});

Reference: .change(), .val(), .load(), $.post()

Answer 2

First off, you will want to look into http://code.google.com/p/imdb-api/ or another api implementation to access IMDB information. This is a better approach compared to actually looking up a page on IMDB and parsing the html result.

This is how you could take your select and make a request to your server to use an IMDB API to lookup movie information:

 <script>
$(document).ready(function(){
  $("#drop-down").change(function(){
    $.ajax({
      type: "POST",
      url: "serverCodeToGetIMDBLookup.php",
      data: "movie="+$("#drop-down").val(),
      success: function(msg){
         //process return msg here with movie information 
      }
    });
  });  
 });
</script>

To merely get an IMDB page:

$("#drop-down").change(function(){    
  $('#result').load('someIMDBPage.html', function() {
     alert('Load was performed.');
  });
});

Answer 3

Why don't u use the .ajax method from jQuery? Here's example:

$.ajax({
        type: "POST",
        url: "YOUR_URL",
        data: { query: $('input#query').val() }, //this is example only
        ontentType: "application/json; charset=utf-8",
        dataType: "json", //you can change to html
        success: function(result) { $('#div_id').html(result)},
        error: function(xhr, ajaxOptions, throwError) {
            alert(throwError);
        }
    });

Answer 4

User jquery's load

eg.

$("#drop-down").change(function(){
  $('#result').load('http://www.imdb.com/title/' + this.id + '/');
});