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");
});
Related
I have an xpage (viewed via web browser) which has many <xe:dialog...> controls on it, resulting in bootstrap modal dialogue boxes.
I want to run some client-side script when any dialogue is closed.
So I tried ..
$('.modal').on('hide.bs.modal', function() { ...}
However this didn't work, I suspect because when the xpage is loaded there aren't actually any elements with class 'modal', until one is opened. Then a partial refresh injects the relevant HTML.
So I tried running that line above in the event when the modal opens (in the xpages onShow event), but that didn't fire either. I guess the event might be 'when the modal opens but before it's displayed' meaning the elements aren't ont he screen then either.
So I also tried (hack, hack) a setTimeout of 2 seconds to allow the modal to show first, but still no luck.
So .. question is ..
Using xpages bootstrap modals, via the standard xe:dialog control, how can I attach a client-side javascript event whcih will run when the modal is closed / hidden ?
You can use Event Delegation to bind the listener to a parent element of the (non-existing) modals and trigger a function when a click happens on elements matching the .modal selector in that parent element:
$(document).on("hide.bs.modal", ".modal", function () {...});
I do something similar to this, where a button selection on one modal, closes said modal, and then depending on the button that was clicked, opens the next modal. Instead of doing that, could you not run your script in the same way?
var
currentModal = $(this);
//click next
currentModal.find('.btn-close').click(function(){
currentModal.modal('hide');
OTHER STUFF?
EDIT - My full code:
<script type="text/javascript">
$("div[id^='myModal1']").each(function(){
var
currentModal = $(this);
//click next
currentModal.find('.btn-next').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal3']").first().modal('show');
});
//click prev
currentModal.find('.btn-prev').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal2']").first().modal('show');
});
});
$(window).on('load',function(){
$('#myModal1').modal('show');
});
</script>
I have popupajax in my view that opens fancybox
Here is code of it
<div class="name"><%= popup_ajax hotel.name, hotel_info_path(hotel) %></div>
And on compilation it looks like this
<div class="name"><a class=" fancybox" data-type="ajax" data-src="/hotel_info/72721" data-options="{"touch":false,"baseClass":null}" href="javascript:;">Ibis London Thurrock M25</a></div>
I need to catch event, when this fancybox opened via JS to post map in div, that inside fancybox content
I was trying to do it like this for example
$(".name").click(function(){
$("a.fancybox").fancybox({
beforeShow: function(){
alert("Here");
}
});
})
But I didn't het an alert.
How I can do this?
Your code works perfectly fine (with small tweak), see this demo - https://codepen.io/anon/pen/MXmyZq?editors=1010
It is very important to understand what $(selector).fancybox() does - by executing .fancybox() method you are attaching click event (to selected elements) that starts fancybox (see docs - https://fancyapps.com/fancybox/3/docs/#usage )
Basically - you have created click event that attaches another click event handler to your element. Just remove that unnecessary click event and that's all.
But, if you really want to start fancybox from within your click handler, then you have to use $.fancybox.open() method for that (see https://fancyapps.com/fancybox/3/docs/#api for samples).
I have a JavaScript code to hide and show an upload input using a checkbox inside a bootstrap modal, it is working when modal is fired up the first time, but on the second i open the modal, and click on the checkbox to show the upload input, it shows but then it automatically hides it.
$('.modal').on('loaded.bs.modal', function (e) {
$(".upload_file").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".upload_file").slideToggle();
});
//jquery validation goes here...
});
What am i missing here, hope you guys can help. TIA.
You are creating multiple click events, every time you open the modal it creates a new one.
Change
$('.show_hide').click(function(){
$(".upload_file").slideToggle();
});
to
$('.show_hide').off('click').on('click', function(){
$(".upload_file").slideToggle();
});
This will kill the first click event, and then rebind it.
Alternatively you could move the binding for the click event out of the modal initialisation so it only gets called once.
$('body').on('click','.show_hide',function(){
$(".upload_file").slideToggle();
});
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 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.