double action in one click jquery

Question

I have problem using onClick, in the first click run one action for the second click the problem showing my click run two action and for the third click the action run three action and for the next click. whats the problem white my jquery?

My Button Click

<a id="detailproduct" href="'.URL.'#PopProductDetail" onclick="showdetailproduct('.$val->bid.')" data-toggle="modal">'.$val->product name.'</a>

this the code

<script type="text/javascript">
    function showdetailproduct(id){
    $('#PopProductDetail').on('shown.bs.modal',function(e) {
        utils.ViewPopProduct(id);
    });
    }

var utils = {};
    (function ($) {

          $.ajaxSetup({"error":function(XMLHttpRequest,textStatus, errorThrown) {
              alert(textStatus);
              alert(errorThrown);
              alert(XMLHttpRequest.responseText);

          }});

        utils.ViewPopProduct =  function ViewPopProduct(id) {
            var data={id:id};
            $.ajax({
                type:"GET",
                datatype:"json",
                url:"",
                data:data,
                datatype:"html",
                cache:false,
                success: function(data) {
                        data = JSON.parse( data ); 
                        $('#code').val(data.code);
                        $('#name').val(data.name);
                        $('#groupname').val(data.groupname);
                        $('#brand').val(data.brand);

                        $('#PopProductDetail').trigger("reset");
                        $("#detailproduct").unbind("click", ViewPopProduct);
                }
            });
        return false;
    };

    })(jQuery, window, document);

</script>

The Action url

http://example.com/product?id=34&_=1450341040382

Thanks

This isn't about double-clicking. This is about clicking something multiple times with each click = different action. Right? — Andy, Dec 17 '15 at 08:51
You keep binding a new event everytime you click the link, try this: `$('#PopProductDetail').off('shown.bs.modal').on('shown.bs.modal'`... — Pete, Dec 17 '15 at 09:14

score 1 · Accepted Answer · answered Dec 17 '15 at 08:56

1

In your showdetailproduct method, you are subscribing one more time to the event:

$('#PopProductDetail').on('shown.bs.modal',function(e) {

This subscription should occur only one. Put the binder on document.ready. Onclick event is not necessary, the href is doing the trick.

answered Dec 17 '15 at 08:56

Lucas Rodriguez

1,203
6
15

if not use onclick how the proses GET the id? – riski maker Dec 17 '15 at 09:17
the `'shown.bs.modal'` will be triggered when you click on the link, because of the `data-toggle` and the `href`. Is not related to the `onClick` event. You should set the listener of `shown.bs.modal` on `document.ready`. You can get the ID through the `e` parameter coming in the function. Check this: http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal – Lucas Rodriguez Dec 17 '15 at 09:25
Ok you can mark my post as answer for future people then :) – Lucas Rodriguez Dec 17 '15 at 09:45

score 0 · Answer 2 · edited Dec 17 '15 at 09:22

This is my Code if it is help full to you.

I can handle 2 function at one click

Html Code

 <input type="button" id="btnSave2" value="INSERT-UPDATE" title="Save" 
                onclick="return btnSave2_onclick()" />

 function btnSave2_onclick() 
 {

      var txtcategorycodeid = $("#txtcategorycodeid").val();
      var txtcategoryname = $("#txtcategoryname").val();
      var fuimg = $("#fuimg").val();
      var ddstatus = $("#ddstatus").val();
      var fuimgst;
      if (fuimg != '' ) {
          fuimgst = 'active';
      }
      if (fuimg == '') {
          fuimgst = 'inactive';
      }


      if (txtcategorycodeid == '' && txtcategoryname == ''
            && ddstatus == '---Select---') {

          alert("Enter All Fields");
          return false;

      }
      else {

          if (txtcategorycodeid == '') {
              alert("Enter categorycodeid");

              return false;
          }
          if (txtcategoryname == '') {

              alert("Req  categoryname");

              return false;
          }
          if (!txtcategoryname.match(/^[a-zA-Z]+$/)) {
              alert('categoryname Only alphabets are allowed');
              return false;
          }


          if (ddstatus == '---Select---') {
              alert("Enter status");

              return false;
          }
      }


      var fileUpload = $("#fuimg").get(0);
      var files = fileUpload.files;
      var test = new FormData();
      for (var i = 0; i < files.length; i++) {
          test.append(files[i].name, files[i]);
      }
      $.ajax({
          url: "imguploadhandler.ashx",
          type: "POST",
          contentType: false,
          processData: false,
          data: test,
          // dataType: "json",
          success: function (result) {




      $.ajax({
          type: "POST",
          url: "JKS_Service.asmx/productcategor1",
          data: "{categoryCodeId: '" + txtcategorycodeid + "'       ,categoryName:'" + txtcategoryname + "',status:'" + ddstatus + "',fupic:'"+fuimgst+"'}",
          contentType: "application/json; charset=utf-8",
          datatype: "jsondata",
          async: "true",
          success: function (response) {
              $(".errMsg ul").remove();
              var myObject = eval('(' + response.d + ')');
              if (myObject > 0) {

                  alert("Data saved successfully...");

              }
              else {

                  alert("Not saved..");
              }

              clear();

          },
          error: function (response) {
              alert(response.status + ' ' + response.statusText);
          }
      });
  },


  });
  }

double action in one click jquery

2 Answers2