0

動的な量の「注文」を表示するページがあり、「表示」ボタンと「印刷」ボタンがあります。特定の OrderNumber を表示するには、onmouseover によってトリガーされる JavaScript 関数と jQuery ajax 関数を使用して、ボタンのテキストを変更し、データベース エントリを作成してから、別のページを表示または印刷します。問題は、注文が onmouseover から複数回表示または印刷されることです。jQueryのみを使用して特定のOrderNumberを呼び出すにはどうすればよいですか? これが私が今使っているコードです：

このコードは、注文ごとに繰り返されます。

<div class="console_orders_details">
<input type="button" value="View" 
id="vieworder'.$row[orderid].'" onmouseover="vieworder('.$row[orderid].');">
</div>

注文を表示する関数は次のとおりです。

function vieworder(id){
            $(function(){
                $('#vieworder' + id).click(function(){
                    var orderid = id;
                    var dataString = 'orderid='+ orderid; //string passed to url
                    $.ajax
                    ({
                        url: "includes/ajax/console-view.php", //url of php script
                        dataType: 'html', //json is return type from php script
                        data: dataString, //dataString is the string passed to the url
                        success: function(result) 
                        {
                            window.open("print.php?view=1&orderid="+id+"");

                            $('#vieworder' + orderid + ':input[type="button"]').attr("value", "Viewed!").fadeIn(400);

                         }
                    });
                })
            });
        }

「vieworder」関数を削除し、純粋な jQuery 関数を使用する必要があると想定しています。ただし、注文「id」を送信する方法がわからないため、JavaScriptを使用しました。

4

3 に答える 3

1

で始まる ID を持つすべての要素をターゲットにしてvieworder、行 ID をデータ属性として保存できます。

<div class="console_orders_details">
    <input type="button" value="View" id="vieworder'.$row[orderid].'" data-id="'.$row[orderid].'">
</div>

JS

 $(function(){
    $('[id^="vieworder"]').on('click', function(){
        var orderid = $(this).data('id'),
            btn     = $('input[type="button"]', this);
        $.ajax({
            url: "includes/ajax/console-view.php",
            dataType: 'html',
            data: {orderid : orderid}
        }).done(function(result) {
            window.open("print.php?view=1&orderid="+orderid+"");
            btn.val("Viewed!").fadeIn(400);
        });
    });
});
于 2013-04-10T01:27:32.433 に答える
0

まず、解析する必要がある動的 ID を持たず、HTML にイベント ハンドラーを持たないでください。

<div class="console_orders_details">
   <input type="button" value="View" class="vieworder" data-id="$row[orderid]">
</div>

次に、目的のイベント ハンドラーを作成します。.one() は、イベント ハンドラーを 1 回だけ起動するように設定します。

$(document).ready(function (){
    $(".console_orders_details").one("mouseover", ".vieworder" function(){
        var dataString = "orderid=" + $(this).data("id"); 
        $.ajax({
            url: "includes/ajax/console-view.php", //url of php script
            dataType: 'html', //json is return type from php script
            data: dataString, //dataString is the string passed to the url
            success: function(result) {
                window.open("print.php?view=1&" + dataString);
                $(this).val("Viewed!"); 
             }
        });
    });
});

これをオンクリックで機能させたい場合は、マウスオーバーをクリックに変更してください。また、fadeIn は値に対して機能しません。基本的なフィドルは次のとおりです。http://jsfiddle.net/iGanja/EnK2M/1/

于 2013-04-10T01:27:39.417 に答える
0

あなたの onmouseover イベントはおそらく何度も発生しているため、問題が発生しています。これは、前の呼び出しが完了していない限り無視することで、不要な余分な呼び出しを停止するのに役立つ場合があります。

var activeRequests = {}; // global

function vieworder(id){
  if (activeRequests[id]) { return; }
  activeRequests[id] = true;
  $(function(){
    $('#vieworder' + id).click(function(){
      var orderid = id;
      var dataString = 'orderid='+ orderid; //string passed to url
      $.ajax
      ({
        url: "includes/ajax/console-view.php", //url of php script
        dataType: 'html', //json is return type from php script
        data: dataString, //dataString is the string passed to the url
        success: function(result) {
          delete activeRequests[id];
          window.open("print.php?view=1&orderid="+id+"");
          $('#vieworder' + orderid + ':input[type="button"]').attr("value", "Viewed!").fadeIn(400);
        }
      });
    })
  });
}
于 2013-04-10T01:31:27.317 に答える