CODEWITHSUNDEEP
phpajaxsearch
Mayank
Mayank

Reputation: 1

refresh div in ajax

I build search query with option value.i get the country,state,city by json code.i get country list on onload by json code.but when i change value of country then top content are also show before get result with pagination.The loading img work fine in pagination but not in option values.

this is first link of select option image:-https://www.dropbox.com/s/jvie2x82l2vx4kp/search1.png?dl=0

second link is search image:-https://www.dropbox.com/s/1pe5r5uy9wi19m8/search2.png?dl=0

session_start();
    if(isset($_GET['search']))
    {
        $q=$_GET['profession'];
        $_SESSION['name']=$_GET['profession']; 
    }
    else
    {
        session_unset();         
    }

    if(isset($_GET['country']))
    {
        $_SESSION['country']=$_GET['country']; 
    }

    if(isset($_GET['state']))
    {
        $_SESSION['state']=$_GET['state']; 
    }

    if(isset($_GET['region']))
    {
        $_SESSION['region']=$_GET['region']; 
    }
    enter code here

    <script>
        $(document).ready(function(){
            $("#country").bind("change", function() {
                $.ajax({
                    type: "GET", 
                    data: "country="+$("#country").val(),
                    cache: false,
                    beforeSend: function(){ $("#ajaxLoader").show(); },
                    complete: function(){ $("#ajaxLoader").hide(); },
                    success: function(html) {
                        $("#pagination").html(html).show();
                    }
                });
           });      
       });
   </script>

    <div id="mhead"><h2>Search Result</h2></div>
        <div class="content">
         <body onload="listOfCountries('country');">
        <form>
              <p>Country: 
              <select name="country" id="country" onchange="listOfStatesOrCities(this,'state');"  style="width:150px;"> */
                <option value=""></option>            
                 </select>

              State:
                <select name="state" id="state" onchange="listOfStatesOrCities(this,'region');" style="width:150px;">
                  <option value=""></option>
                </select>

               city: 
                <select name="region" id="region" style="width:150px;" >
                  <option value=""></option>
                </select>
              </p>
        </form> 
        <div id="ajaxLoader" style="display:none"><img src="images/loading.gif" alt="loading..."></div>
        <div id="loading" style="display:none"><img src="images/loading.gif" alt="loading..."></div>
        <div id="pagination" cellspacing="0">
        </div>
    </div>

Upvotes: 0

Views: 145

Answers (1)

mario.van.zadel
mario.van.zadel

Reputation: 2949

You can pass selector #pagination to fetch only the div with id pagination.

Try this:

$("#country").bind("change", function() {
    $("#ajaxLoader").show();
    $("#pagination").load(window.location.href + ' #pagination', { country: $("#country").val() }, function() {    
        $("#ajaxLoader").hide();
    });
});

Upvotes: 1

Related Questions