自動刷新Div內容使用jQuery和AJAX傳遞變量

我想設置一個頁面，用戶可以從選擇菜單中選擇1個條件，然後從另一個選擇第二條。自動刷新Div內容使用jQuery和AJAX傳遞變量

然後，我會喜歡這些變量通過我的自動更新div使用Ajax，以便它們在刷新的.php中使用。

選擇菜單工作正常，但我將如何通過ajax傳遞值，然後確保它記住它們的刷新。

FORM

<select id="employee_user"> 
<option value="">--</option> 
<option value="333">Test User</option> 
<option value="111">Testing Testing</option>  
</select> 

<select id="they" onchange="showUser(this.value, employee_user.value)"> 
<option value="">--</option> 
<option value="20120801" class="333" title="Test User">20120801</option> 
<option value="20110801" class="333" title="Test User">20110801</option> 
<option value="20100801" class="333" title="Test User">20100801</option> 
<option value="20120801" class="111" title="Testing Testing">20120801</option> 
<option value="20110801" class="111" title="Testing Testing">20110801</option> 
</select> 

</form>

AUTO REFRESHING DIV

<script> 
(function($) 
{ 
    $(document).ready(function() 
    { 
     $.ajaxSetup(
     { 
      cache: false, 
      beforeSend: function() { 
       $('#updatingdiv').hide(); 
       $('#loading').show(); 
      }, 
      complete: function() { 
       $('#loading').hide(); 
       $('#updatingdiv').show(); 
      }, 
      success: function() { 
       $('#loading').hide(); 
       $('#updatingdiv').show(); 
      } 
     }); 
     var $container = $("#updatingdiv"); 
     $container.load("getholidaylog.php"); 
     var refreshId = setInterval(function() 
     { 
      $container.load('getholidaylog.php'); 
     }, 9000); 
    }); 
})(jQuery); 
</script> 

    <div id="updatingdiv"></div> 
    <img src="loading.gif" id="loading" alt="loading" style="display:none;" />

然後getholidaylog.php會：

$year = $_GET["year"]; 
$username = $_GET["username"];

並用於數據庫查詢。

EDIT

$j(document).ready(function() {  
    $j("#year_select").change(function(){ 
     $.ajaxSetup(
     { 
      cache: false, 
      beforeSend: function() { 
       $('#updatingdiv').hide(); 
       $('#loading').show(); 
      }, 
      complete: function() { 
       $('#loading').hide(); 
       $('#updatingdiv').show(); 
      }, 
      success: function() { 
       $('#loading').hide(); 
       $('#updatingdiv').show(); 
      } 
     }); 
     var $container = $("#updatingdiv"); 

     var user_select= $j('#user_select').val(); 
     var year_select= $j('#year_select').val(); 
     $container.load('getholidaylog.php',{username:user_select,year:year_select}); 
     var refreshId = setInterval(function() 
     { 
      $container.load('getholidaylog.php'); 
     }, 9000); 
    }); 

})(jQuery);

來源

2012-08-24 Codded

繼值傳遞給PHP頁面成功

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#they").change(function() { 
     var firstVal = $("#employee_user").val(); 
     var secVal = $("#they").val(); 

     $.ajax({ 
       type: "POST", 
       data: "year="+ firstVal +"&username="+ secVal, 
       url: "getholidaylog.php", 
       success: function(msg){ 
       $("#updatingdiv").html(msg); 

       } 
      }); 
     }); 
    }); 
</script>

代替，但代碼加載到getholidaylog.php DIV負荷相應頁面的內容進入格

來源

2012-09-01 09:54:42

低電平$.ajax()方法包含一個稱爲data變量，通過它可以將數據傳遞到服務器。所以，如果你想在這種情況下，發送數據時，你可以這樣做：

$.ajax({ 
    data: {year:1999,username:'Codded'} 
});

也是一樣load，有一個傳遞數據，所以你可以做

$("#divId").load('foo.php',{username:'Codded',year:1999});

來源

2012-08-24 11:54:53 SexyBeast

我已經編輯我的問題是這樣的工作？ – Codded

您忘記了在'setInterval'方法內的Ajax調用中發送數據。 – SexyBeast

哎呀，確定補充說，但仍然無法正常工作。當我更改第二個選擇時沒有任何反應 – Codded

第二參U可以使用AJAX功能的數據屬性，通過像本例中，選擇的值：

$.ajax({ 
data: {'name': 'Dan'} // name is the name of the variable and Dan is the value in your case if the selected value 
});

來源

2012-08-24 11:59:06 Sora

我編輯了我的問題，如何將您的方法納入 – Codded

退房下面給出的，因爲它不與你相匹配的選擇ID是相同的選擇框已經編寫

var user_select= $j('#user_select').val(); 
var year_select= $j('#year_select').val();

來源

2012-08-31 05:23:40

DO就像這樣..

在您的html這樣添加兩個隱藏字段這樣：

------- 
<input type="hidden" id="userselect" /> 
<input type="hidden" id="yearselect" /> 
</form>

現在改變你的jQuery代碼這樣的..

修改這樣year_select的電平變化的功能，單獨把它。不要在此包含ajax設置。

  $j("#year_select").change(function(){     
       $('#userselect').val($('#employee_user').val()); 
       $('#yearselect').val($('#they').val()); 
      });

現在從隱藏field.change中獲取值更改這些行。

 var user_select= $j('#userselect').val(); 
     var year_select= $j('#yearselect').val();

因此，最終的HMTL標記應該是這樣的：

<select id="employee_user"> 
<option value="">--</option> 
<option value="333">Test User</option> 
<option value="111">Testing Testing</option>  
</select> 

<select id="they" onchange="showUser(this.value, employee_user.value)"> 
<option value="">--</option> 
<option value="20120801" class="333" title="Test User">20120801</option> 
<option value="20110801" class="333" title="Test User">20110801</option> 
<option value="20100801" class="333" title="Test User">20100801</option> 
<option value="20120801" class="111" title="Testing Testing">20120801</option> 
<option value="20110801" class="111" title="Testing Testing">20110801</option> 
</select> 
<select id="employee_user"> 
<option value="">--</option> 
<option value="333">Test User</option> 
<option value="111">Testing Testing</option>  
</select> 

<select id="they" onchange="showUser(this.value, employee_user.value)"> 
<option value="">--</option> 
<option value="20120801" class="333" title="Test User">20120801</option> 
<option value="20110801" class="333" title="Test User">20110801</option> 
<option value="20100801" class="333" title="Test User">20100801</option> 
<option value="20120801" class="111" title="Testing Testing">20120801</option> 
<option value="20110801" class="111" title="Testing Testing">20110801</option> 
</select> 
<input type="hidden" id="userselect" /> 
<input type="hidden" id="yearselect" /> 
</form>

，你的代碼看起來就像這樣：

$(function(){ 
     $("#year_select").change(function(){     
        $('#userselect').val($('#employee_user').val()); 
        $('#yearselect').val($('#they').val()); 
       }); 

    $.ajaxSetup(
    { 
     cache: false, 
     beforeSend: function() { 
      $('#updatingdiv').hide(); 
      $('#loading').show(); 
     var user_select= $j('#userselect').val(); 
     var year_select= $j('#yearselect').val(); 
     }, 
     complete: function() { 
      $('#loading').hide(); 
      $('#updatingdiv').show(); 
     }, 
     success: function() { 
      $('#loading').hide(); 
      $('#updatingdiv').show(); 
     } 
    }); 

    $container.load('getholidaylog.php',{username:user_select,year:year_select}); 
    var refreshId = setInterval(function() 
    { 
     $container.load('getholidaylog.php'); 
    }, 9000); 
})

來源

2012-09-01 12:53:32 Ashirvad

自動刷新Div內容使用jQuery和AJAX傳遞變量

回答

相關問題