I created jQuery UI Dialog and after the dialog is displayed, wherever a user clicks, the dialog is closed. I achieved this by adding click event to the body tag.
$("body").click(function() {
$("#myDialog").dialog("close").dialog("destroy");
});
It works fine except inside of 3rd party Grid API I'm using and found out this Grid API source code, it defined onclick event like below:
this.obj.onclick = function(e){
console.log("grid API clicked");
this.grid._doClick(e||window.event);
if (this.grid._sclE) {
this.grid.editCell(e||window.event);
}
(e||event).cancelBubble=true;
};
When I clicked inside the Grid, the log msg "grid API clicked" is shown in my firebug but my body click event is not triggered so I think the event is not bubbling up to the body click event as specified in the line (e||event).cancelBubble=true;
If I set this to false, the click on the Grid does not work and not wanting to change code in the 3rd party API.
So, it there any workaround to make body click work?
Maybe simplistic and not the best way to do it, but if you're happy to edit the Grid API source then add this to it...
$("body").click();
It will trigger the click event defined on the body element. If that doesn't work then there's something else going on.
Related
I have a small snippet of code that is opening another window that is populated with dynamic content
$('#table-body').on('click', 'td#showTitle', function(e) {
e.preventDefault();
console.log('inside');
$('.quickview').addClass('is-active');
});
the above code will execute the log but not add the class however if I change the click to 'contextmenu' it works with a right click just as expected but this is not the functionality I want I would like to use a normal left click, is there something wrong with the code?
I'm trying to add a long click to a sortable group of responsive bootstrap buttons. The only way the longclick function seems to trigger is if I put it on the #list_content container. However, then $this doesn't refer to the actual button div (.sm-col-4) that triggered the event.
$('#list_content').mayTriggerLongClicks().on('longClick', function() {
alert("long_click=" + JSON.stringify($(this)));
});
Hoping that someone has some ideas on how I can get the colid that triggered the event, and as well to prevent the long-press from triggering when the user is moving the button.
https://jsfiddle.net/7yhkp9eo/3/
Edit for answer #1.
Thanks for the response. Interesting, that works in the fiddle but not in my app. When I set the selector to:
$('#list_content')
I see the longClick event listener on the button as div#list_content.ui-sortable for both click and mousedown. When I set the selector to
$('a.btn')
there is no event listener for click or mousedown according to chrome developer tools. I also have this code in the main $(document).ready() section in my app.
$(document).on('mousedown', function (e) {
if($(e.target).hasClass('popover-content')) {
fp_popover_close = false;
} else
fp_popover_close = true;
});
Which I need to get a slider control in a popover to work properly. I see that event on the button with $('a.btn') but not the long click.
About the colid and the trigger of the event, in your fiddle this is working for me...
$('a.btn').mayTriggerLongClicks().on('longClick', function() {
var colId = $(this).parent('div').attr('colid');
alert(colId);
});
While I didn't solve this through the right selector at the sortable stage, I was able to add the long click event when the button was originally created by the application and then it only fires if sortable is active.
i am facing a unknown problem and it is as below:
I have one link to open some popup
Link Here
Now this is working fine, when i click on a link then popup is fired.
JS - I can not make changes to this event (Security reasons)
$(".pop-link").off("click").on("click", function (e) {
<!-- Code to open popup -->
});
Now, i want to do one more event on click of .pop-link. and I added as below:
$(".pop-link").on("click", function (e) {
console.log("Sdf");
});
With this my console.log works but then popup is not displayed.
Not sure why it is overwriting previous event. What can i do to have 2 events on same link?
I figured it out.
I tried using bind and it is working now
$(".pop-link").bind("click", function (e) {
console.log("Sdf");
});
You have created 2 click events using same class name. so jquery will execute last event.
To solve this you can add you second event code inside popup event code like this :
$(".pop-link").off("click").on("click", function (e) {
<!-- Code to open popup -->
console.log("Sdf");
});
I'm using a jQuery plugin (leaflet.js) that has popups. I want to do some stuff when the close button is clicked, but since I'm not the one creating the close button, I have to attach a handler with jQuery.on() like so:
$(document).on('click', '.leaflet-popup-close-button', function () {
// do stuff
}
This works for other events (such as mouseover), but because it's a close button I'm clicking, the element disappears the instant it's clicked, and my handler isn't run.
How can I make my handler ALSO run (I don't want to remove the handler that's already there)?
edit
I can't use the built-in popupclose event because that event also fires if the popup is closed some other way.
I'm not very familiar with leaflet, but I think you need to set the closeButton option to false, edit the DOM of the popup with your own close button, and have the callback for the click event call togglePopup or closePopup after whatever other code you want.
I'd suggest listening for a close event from the leaflet.js and use that to trigger your action:
http://leafletjs.com/reference.html#popup
I have a SharePoint web part page with a list view that is grouped and defaulted to "collapsed" (much like a basic toggle). SharePoint generates its own JavaScript to handle the initial click action, which then expands the page area and dynamically writes new content to that area. The problem is that jQuery cannot access the new content immediately following the click (it needs to finish loading). My thoughts are to add a 2nd jQuery click function to the toggle link and somehow wait for the new content to be added before anything else happens, but I'm not sure how to determine when the dynamic content finishes loading...
//bind a 2nd additional onclick handler via jquery to these items
$('td.ms-gb').children('a').click(function()
{
//give the clicked item a border for visual identification
$(this).css("border","1px solid cyan");
//delay this function until the sharepoint onclick handler finishes loading new content
$('TD.ms-vb-icon').children('a').each(function(index)
{
//give each item a border for visual identification
$(this).css("border","1px solid red");
//perform more jquery on each item
}
);
}
);
A common technique to address this kind of issues is to use
setTimeout(function, timeoutInMs)
and try to find new content in function, if fail restart a timeout until you find the content
Here's a jsFiddle to illustrate:
http://jsfiddle.net/Dhww2/
The only thing I can think of is to set another click handler that registers with $.ajaxSuccess() http://api.jquery.com/ajaxSuccess/ and responds after the first AJAX request (after the click) finishes
It's hackish, but if the code that is fetching the dynamic content doesn't have a callback, there aren't many options.
What are you going to do with loaded contnent? Just style and catch another clicks?
In such case use stylesheets for custom styling and jQuery's live function to catch (click) events of further loaded elements.
Update for comment
$('TD.ms-vb-icon a').live('click', function(ev) {
$(this).attr('name','value');
}
May not work if your click tracking code registers earlier. If so try with mouseover event.