1

ユーザーが選択メニューから 1 つの基準を選択し、別の基準から 2 番目を選択できるページをセットアップしようとしています。

次に、これらの変数が ajax を使用して自動更新 div を通過し、更新される .php で使用されるようにします。

選択メニューは正常に機能していますが、どのように ajax を介して値を渡し、更新のためにそれらを記憶していることを確認しますか?

形

<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>

自動更新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"];

データベースクエリに使用します。

編集

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

**

4

5 に答える 5

3

次のコードは、値を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 にロードする代わりに、それぞれのページのコンテンツを div にロードします

于 2012-09-01T09:54:42.623 に答える
1

このようなことをしてください。

次のように、HTMLに2つの非表示フィールドを追加します。

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

次に、jQueryコードを次のように変更します。

year_selectのonchange関数をこのように変更し、個別に配置します。これにajaxセットアップを含めないでください。

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

次に、非表示フィールドから値を取得します。これらの行を変更します。

        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-01T12:53:32.100 に答える
0

uは、ajax関数のdata属性を使用して、次の例のように選択した値を渡すことができます。

$.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-24T11:59:06.747 に答える
0

コード化した選択ボックスと一致しないため、選択のIDが以下と同じであることを確認してください

var user_select= $j('#user_select').val();
var year_select= $j('#year_select').val();
于 2012-08-31T05:23:40.160 に答える
0

低レベルのメソッドには、サーバーにデータを渡すために$.ajax()呼び出される変数が含まれています。dataしたがって、この場合に送信データが必要な場合は、次のようにすることができます。

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

同じことがloadにも当てはまります。データを渡すための 2 番目のパラメーターなので、次のことができます。

$("#divId").load('foo.php',{username:'Codded',year:1999});
于 2012-08-24T11:54:53.773 に答える