CODEWITHSUNDEEP
javascriptjquery
boomboomboom
boomboomboom

Reputation: 151

JavaScript trigger does not work

I try to trigger a button so when user loads a page, the button is automatically clicked.

My code is following:

$(document).ready(function() {  
  console.log("it's here");

  $("#btnPeriod").trigger('click');
});

$("#btnPeriod").on('click', function(){
  var ahhhhh = "<security:authentication property="securityUser.fullName"/>";
  ahhhhh = ahhhhh.replace(/&#32;/g, " ");
  console.log(ahhhhh);

  $.extend($("#noticeList").jqGrid("getGridParam", "postData"),{
    filters : JSON.stringify({
      groupOp : "OR",
      rules : [{
        field : "notiWriter",
        op : "eq",
        data : ahhhhh
      }],
      groups : []
    })
  });
  $("#noticeList").jqGrid("setGridParam", {search : true}).trigger('reloadGrid', [{current : true, page : 1}]);
});

and when the page is loaded, I can see log of "it's here" and value of ahhhhh. However, even though I can see log, the action suppose to be happened does not get applied. Funny thing is when I click the button, then it works, with another log message of variable ahhhhh.

FYI, I am using jqGrid and when I click btnPeriod button, it filters rows that its cellvalue of notiWriter does not match with variable ahhhhh.

For now, when I load this page, it displays like following: enter image description here

And then, when I click a button, it only shows certain rows like following: enter image description here

And I hope it always look like second picture when a user loads the page.

I once used setTimeout, but it turned out it did not work well, so I hope you give me some help.

Thank you in advance.

Upvotes: 0

Views: 104

Answers (3)

Barudar
Barudar

Reputation: 570

Why not including the click event binding inside your ready function ?

$(document).ready(function() {  
console.log("it's here");

$("#btnPeriod").on('click', function() {
    var ahhhhh = "<security:authentication property="securityUser.fullName"/>";
    ahhhhh = ahhhhh.replace(/&#32;/g, " ");
    console.log(ahhhhh);

    $.extend($("#noticeList").jqGrid("getGridParam", "postData"), {
        filters : JSON.stringify({
            groupOp : "OR",
            rules : [{
                field : "notiWriter",
                op : "eq",
                data : ahhhhh
            }],
            groups : []
        })
    });
    $("#noticeList").jqGrid("setGridParam", {search : true}).trigger('reloadGrid', [{current : true, page : 1}]);
});

$("#btnPeriod").trigger('click');

});

Upvotes: 0

Luis Gonz&#225;lez
Luis Gonz&#225;lez

Reputation: 3559

Try including the event binding inside the jquery ready function and bind the event before trigger the click:

$(document).ready(function() {  
   console.log("it's here");


   $("#btnPeriod").on('click', function(){
        var ahhhhh = "<security:authentication property="securityUser.fullName"/>";
        ahhhhh = ahhhhh.replace(/&#32;/g, " ");
        console.log(ahhhhh);

        $.extend($("#noticeList").jqGrid("getGridParam", "postData"),{
            filters : JSON.stringify({
                groupOp : "OR",
                rules : [{
                   field : "notiWriter",
                   op : "eq",
                   data : ahhhhh
                 }],
                 groups : []
                })
             });
           $("#noticeList").jqGrid("setGridParam", {search : true}).trigger('reloadGrid', [{current : true, page : 1}]);
      });

    $("#btnPeriod").trigger('click');

 });

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337590

You need to bind the click handler to the button inside the document.ready handler, and before you call trigger(). Try this:

$(document).ready(function() {    
    $("#btnPeriod").on('click', function(){
        var ahhhhh = "<security:authentication property="securityUser.fullName"/>";
        ahhhhh = ahhhhh.replace(/&#32;/g, " ");
        console.log(ahhhhh);

        $.extend($("#noticeList").jqGrid("getGridParam", "postData"),{
            filters : JSON.stringify({
                groupOp : "OR",
                rules : [{
                    field : "notiWriter",
                    op : "eq",
                    data : ahhhhh
                }],
                groups : []
            })
        });

        $("#noticeList").jqGrid("setGridParam", {
            search: true
        }).trigger('reloadGrid', [{ 
            current: true, 
            page: 1
        }]);
    });

    $("#btnPeriod").trigger('click');
});

Upvotes: 3

Related Questions