Open a new page with dblclick event in javascript

Question

In my pageSetUp() function I have the following snippet of code:

    $("#VIDEO_GRID > tbody > tr").dblclick(function (e) {
      $(e.currentTarget.find("td;first"));
      document.draw("videoInfo.html");
      console.log("double clicked");
    })

I want to open up a new page called videoInfo.html when a user clicks anywhere within a <tr> and ideally I want to grab the data in the first <td> of that row. This isn't working, however, and nothing is even being logged out to indicate a user clicked on a row.

I'm also using the datatables API.

Any suggestions?

Do you have an event handler for `click` or other events that happen before `dblclick`? If so, it could be doing a `stopPropagation` somewhere ([documentation](http://api.jquery.com/event.stoppropagation/)) and preventing dblclick from ever registering. jQuery does that sometimes due to how it handles these events. — mechalynx, Jul 23 '14 at 13:53
What is `VIDEO_GRID`? Is it supposed to be `#VIDEO_GRID`? Or is the `#` optional now? — Lee Kowalkowski, Jul 23 '14 at 13:53
What is `document.draw()`? I cannot find any documentation for that function. — Lee Kowalkowski, Jul 23 '14 at 13:58
Some good answers below. Is your `pageSetUp()` function definitely being called? — Lee Kowalkowski, Jul 23 '14 at 14:08
pageSetUp is definitely being called. The .draw() function is part of the datatables API (https://datatables.net/reference/api/draw()), and document is just a reference to my grid — Asmaa E., Jul 23 '14 at 14:22

score 1 · Answer 1 · answered Jul 23 '14 at 14:00

1

I hope you using a element with ID "VIDEO_GRID", That why you like to use like below,

$("VIDEO_GRID > tbody > tr").dblclick(function(){
//Code here
});

But the problem is you missed the hash before the ID, use like below,

$("#VIDEO_GRID > tbody > tr").dblclick(function(){
//Code here
});

answered Jul 23 '14 at 14:00

Anto King

1,172
1
11
22

Sorry, I had the pound sign in my original code, but that still didn't do it :/ – Asmaa E. Jul 23 '14 at 20:42

score 1 · Answer 2 · answered Jul 23 '14 at 14:02

1

hi try this code to open the Url in new tab

function OpenInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

and there were mistakes in your code try this code:

$("#VIDEO_GRID > tbody > tr").dblclick(function (e) {

      OpenInNewTab("videoInfo.html");//replaced this code and using above function to laod make sure about the url
      alert("double clicked");
    })

please lemme know if you have any issue with this. thanks

answered Jul 23 '14 at 14:02

Devendra Soni

1,844
8
14

I've never seen `window.open` open in a new tab, as far as I know, this is still not possible: http://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-using-javascript, upvoting anyway! – Lee Kowalkowski Jul 23 '14 at 14:05
i think this works try this window.open("http://google.com", '_blank'); in console it works for me :) – Devendra Soni Jul 23 '14 at 14:10
No, it says popup-blocked ;-P (because it wasn't triggered as the result of a DOM event). When I allow the popup, it opens in a new window. You have your browser configured to prefer new tabs to new windows. – Lee Kowalkowski Jul 23 '14 at 14:15
check this link http://jsfiddle.net/TnbYm/16/ and this is working fine.text was changed when pasted it into the comments. – Devendra Soni Jul 23 '14 at 14:19
Sigh, yes... Except if your browser isn't configured that way. It's a browser option, not a JavaScript trick. `window.open` existed a long time before tabbed browsers did. It's a browser vendor/user preference, not a website's preference. (Although opening a new window with specific dimensions is not expected to open a new tab in today's browsers, but I'm not discounting a browser may also decide even not to do this in future) – Lee Kowalkowski Jul 23 '14 at 14:35
This doesn't solve the issue : / For some reason, the function isn't even being called at all. – Asmaa E. Jul 23 '14 at 15:01
Can you share your code so I can see why it's not working thanks – Devendra Soni Jul 23 '14 at 15:28

score 0 · Answer 3 · edited May 23 '17 at 11:57

First

I guess the table is being built upon json source or JavaScript array, in other words it's being injected dynamically, so in such cases you should never use $(selector).event(handler); but instead $(document).on(event, selector, handler);

So your code will be:

$(document).on('dblclick', "#VIDEO_GRID > tbody > tr", function (e) {
      // event handler here
});

For more information see this precious post.

Second

I would highly recommend you avoid using document as a variable name, even your code is working (I doubt it) it will be so confusing to use such name as a reference.

Third

To load a remote page into a td you have nothing to do with draw function, but instead you can make ajax request to the appropriate page and then inject it into the td by .html function.

So by putting all points together you will end with something like this:

$(document).on('dblclick', "#VIDEO_GRID > tbody > tr", function (e) {
      var me = this;
      request = $.ajax({
          url: 'videoInfo.html'
      });
      // closure used to avoid conflict see the post below for more information
      request.done((function(){
        var _that = me;
        return function(response){ _that.find('td:first').html(response); console.log('page loaded !');}
})());
      request.fail(function(){
        console.log('page not loaded :(');
      });
      console.log("double clicked");
});

post mentioned in the comment.

Open a new page with dblclick event in javascript

3 Answers3