Replace javascript onmouseover with jQuery only

Question

I have a page that displays a dynamic amount of "orders" and I have a button to "view" and another button to "print". To display the specific OrderNumber I'm using a javascript function triggered by onmouseover and a jQuery ajax function to change the button text, make a database entry, and then view or print another page. The problem is the order is viewed or printed MULTIPLE times from onmouseover. How can use only jQuery and call the specfic OrderNumber? Here is the code I'm using now:

This code is repeated for each order:

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

Here is the function to view the order:

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

                         }
                    });
                })
            });
        }

I'm assuming I need to eliminate the "vieworder" function and use a pure jQuery function. However, I don't know how to send over the order "id", which is why I used javascript.

Answer 1

You can target all elements with an ID that starts with vieworder , and then store the row ID as a data attribute :

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

Answer 2

First, don't have a dynamic id that you have to parse, and don't have an event handler in your html:

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

Next, create an event handler for just what you want to do. .one() will set an event handler to fire only once:

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

If you want this to work onclick, then just change the mouseover to click. Also, fadeIn doesn't work on values. Here is a fiddle that has the basics: http://jsfiddle.net/iGanja/EnK2M/1/

Answer 3

Your onmouseover event is probably being fired many times, resulting in your problem. This might help to stop unwanted extra calls, by ignoring them unless the previous one has completed.

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