刷新DIV在阿贾克斯 [英] refresh div in ajax

问题描述

我建立与选择的搜索查询value.i获得国家，州，城市由JSON codeI获得国家名单上的onload通过JSON code.but当我改变国家的价值，那么上面的内容也显示前得到选项值结果与pagination.The加载IMG做工精细的分页，但并非如此。

这是选择选项形象的第一个环节： - https：//开头www.dropbox.com/s/jvie2x82l2vx4kp/search1.png?dl=0

第二个链接是搜索图片： - 的https：//www.dropbox .COM / S / 1pe5r5uy9wi19m8 / search2.png？DL = 0

 在session_start（）;
    如果（使用isset（$ _ GET ['搜索']））
    {
        $ Q = $ _ GET ['职业'];
        $ _SESSION ['名称'] = $ _ GET ['职业'];
    }
    其他
    {
        session_unset（）;
    }

    如果（使用isset（$ _ GET ['国家']））
    {
        $ _SESSION ['国家'] = $ _ GET ['国家'];
    }

    如果（使用isset（$ _ GET ['状态']））
    {
        $ _SESSION ['状态'] = $ _ GET ['状态'];
    }

    如果（使用isset（$ _ GET ['区域']））
    {
        $ _SESSION ['区域'] = $ _ GET ['区域'];
    }
    在这里输入code

    ＆LT;脚本＆GT;
        $（文件）。就绪（函数（）{
            $（＃国）。绑定（变，函数（）{
                $阿贾克斯（{
                    键入：GET，
                    数据：国家=+ $（＃国）VAL（）。
                    缓存：假的，
                    beforeSend：函数（）{$（＃ajaxLoader）显示（）; }，
                    完成：函数（）{$（＃ajaxLoader）隐藏（）; }，
                    成功：函数（HTML）{
                        $（＃分页）HTML（HTML）.show（）;
                    }
                }）;
           }）;
       }）;
   ＆LT; / SCRIPT＆GT;

    ＆LT; D​​IV ID =mhead＆GT;＆LT; H2＆GT;搜索结果＆LT; / H＆GT;＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =内容＆GT;
         ＆LT;身体的onload =listOfCountries（国家）;＆GT;
        ＆LT;形式GT;
              ＆LT; P＆GT;国家：
              ＆LT;选择名称=国ID =国家的onchange =listOfStatesOrCities（这一点，国家）;风格=宽度：150像素;＆GT; * /
                ＆LT;期权价值=＆GT;＆LT; /选项＆GT;
                 ＆LT; /选择＆GT;

              州：
                ＆LT;选择名称=状态ID =状态的onchange =listOfStatesOrCities（这一点，'区域'）;风格=宽度：150像素;＆GT;
                  ＆LT;期权价值=＆GT;＆LT; /选项＆GT;
                ＆LT; /选择＆GT;

               市：
                ＆LT;选择名称=区域ID =区域的风格=宽度：150像素; ＆GT;
                  ＆LT;期权价值=＆GT;＆LT; /选项＆GT;
                ＆LT; /选择＆GT;
              ＆所述; / P＆GT;
        ＆LT; /形式GT;
        ＆LT; D​​IV ID =ajaxLoader的风格=显示：无＆GT;＆LT; IMG SRC =图像/ loading.gifALT =载入中...＆GT;＆LT; / DIV＆GT;
        ＆LT; D​​IV ID =装的风格=显示：无＆GT;＆LT; IMG SRC =图像/ loading.gifALT =载入中...＆GT;＆LT; / DIV＆GT;
        ＆所述;股利的id =分页CELLSPACING =0＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

解决方案

您可以通过选择 #pagination 来只获取ID为DIV 分页。

试试这个：

  $（＃国）。绑定（变，函数（）{
    $（＃ajaxLoader）显示（）。
    $（＃分页）负载（window.location.href +'#pagination'，{国家：$（＃国）VAL（）}，函数（）{
        $（＃ajaxLoader）隐藏（）。
    }）;
}）;
 

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>

解决方案

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

这篇关于刷新DIV在阿贾克斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！