CODEWITHSUNDEEP
javascriptjqueryeventstriggersclick
Matteo Bononi 'peorthyr'
Matteo Bononi 'peorthyr'

Reputation: 2220

Intercept clicks, make some calls then resume what the click should have done before

Good day all, I have this task to do:

there are many, many many webpages, with any kind of element inside, should be inputs, buttons, links, checkboxes and so on, some time there should be a javascript that could handle the element behaviour, sometimes it is a simple <a href="...">...</a> link.

i have made a little javascript that intercepts all the clicks on clickable elements:

$( document ).ready(function() {
    $('input[type=button], input[type=submit], input[type=checkbox], button, a').bind('click', function(evt, check) {

        if (typeof check == 'undefined'){
            evt.preventDefault();
                console.log("id:"+ evt.target.id+", class:"+evt.target.class+", name:"+evt.target.name);
                console.log (check);            
            $(evt.target).trigger('click', 'check');
        }
    });
});

the logic is: when something is cllicked, I intercept it, preventDefault it, make my track calls and then resme the click by trigger an event with an additional parameter that will not trigger the track call again.

but this is not working so good. submit clicks seams to work, but for example clicking on a checkbox will check it, but then it cannot be unchecked, links are simply ignored, I track them (in console.log() ) but then the page stay there, nothing happens.

maybe I have guessed it in the wrong way... maybe i should make my track calls and then bind a return true with something like (//...track call...//).done(return true); or something...

anyone has some suggestions?

Upvotes: 2

Views: 1115

Answers (1)

Kiran
Kiran

Reputation: 1798

If you really wanted to wait with the click event until you finished with your tracking call, you could probably do something like this. Here's an example for a link, but should be the same for other elements. The click event in this example fires after 2seconds, but in your case link.click() would be in the done() method of the ajax object.

<a href="http://www.google.com" id="myl">google</a>

var handled = {};
$("#myl").on('click', function(e) {
   var link = $(this)[0];
   if(!handled[link['id']]) {
      handled[link['id']] = true;
      e.preventDefault();
      e.stopPropagation();
      //simulate async ajax call
      window.setTimeout(function() {link.click();}, 2000);
   } else {
      //reset
      handled[link['id']] = false;
   }
});

EDIT

So, for your example, this would look something like this

var handled = {};
  $( document ).ready(function() {
    $('input[type=button], input[type=submit], input[type=checkbox], button, a').bind('click', function(evt) {
    if(!handled[evt.target.id]) {
      handled[evt.target.id] = true;
      evt.preventDefault();
      evt.stopPropagation();
      $.ajax({
         url: 'your URL',
         data: {"id" : evt.target.id, "class": evt.target.class, "name": evt.target.name},
         done: function() {
            evt.target.click();
         }
      });
    } else {
      handled[evt.target.id] = false;          
    }
});

Upvotes: 2

Related Questions