Here I use a pop-up jQuery box for pop up window but when I use it on same page for multiple pop-up boxes then it only one not for all because my id is same on all button I use for pop-up.
<script src="js/jquery-1.9.1.js"></script>
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#full-pop').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#full-detail-box').bPopup();
});
});
})(jQuery);
and here is pop-up
<div id="full-detail-box">this is pop up</div>
Try This
JS
for(var i=0;i<3;i++){
$('body').append("<div id='full-detail-box"+i+"' class='full-detail-box'>"+(i+1)+" User this is my pop-up window that is opem multi timewith different value </div><br/><a class='btn-pro' data-id='full-detail-box"+i+"' href='#'>Full Detail</a>")
}
$('.btn-pro').bind('click', function(e) {
e.preventDefault();
var id=$(this).data('id');
// Triggering bPopup when click event is fired
$('#'+id).bPopup();
});
Instead Of this
$('#full-pop').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#full-detail-box').bPopup();
});
UPDATED DEMO HERE
If I understand correctly you are passing the same id repeatedly, which just opens the same popup over and over again. If you want multiple popups you need multiple DOM nodes to trigger a popup on.
If you are using user detail, why not just append a unique ID!? You can easily add, in PHP, or w/e the ID of the user at the end of the class name id="full-detail-box-xx" where XX is the ID of the user.
Then you simply use the button with the SAME id in the function to call the user, like $('#full-detail-' + id).click(function(){ bPopup('#full-detail-box' + id); });
If you are using PHP you can write the ID to a JS array, or something. I'm not sure how you system is set up.
Related
So I have a partial view that loads the table header. Inside the header there is the title and one of 3 dynamically shown buttons that when clicked open up a small div containing additional buttons. this jquery code works perfectly fine on pages without custom javascript/jquery inside of them. They also work 4 out of 5 times correctly on the pages with the custom code inisde of them.
*** updated with latest jquery**
$(document).ready(function() {
// Use event delegation to handle clicks on the additional buttons
$(document).on("click", "##additionalButtonID, ##additionalButtonID2, ##additionalButtonID3", function(e) {
e.stopPropagation(); // prevent the event from propagating up to the document element
const div = $("div#div-#Model.UniqueTableIdentifier");
div.css("left", e.clientX -150);
div.css("top", e.clientY);
div.fadeIn(200);
});
// Use event delegation to handle clicks on the buttons inside the div
$(document).on("click", "div#div-#Model.UniqueTableIdentifier button", function(e) {
e.stopPropagation(); // prevent the event from propagating up to the document element
const div = $("div#div-#Model.UniqueTableIdentifier");
div.fadeOut(200);
});
// Use event delegation to handle clicks on the li element
$(document).on("click", ".list-tbl-items", function(e) {
if ((e.target).querySelector('button') != null) {
(e.target).querySelector('button').click();
e.stopPropagation();
}
});
// Use event delegation to handle clicks on the document, outside of the div
$(document).on("click", function(e) {
if (!$(e.target).closest("div#div-#Model.UniqueTableIdentifier").length) {
const div = $("div#div-#Model.UniqueTableIdentifier");
div.fadeOut(200);
}
});
});
You see i even have the eventdelegation to go do onthe document click which i thought would just make it the header of the table at worst but still doing these issues. and worst is i can refresh the page multiple times before it happens again.
Probably jQuery script is still not loaded when you starts use it.
You should attach all events after page is loaded.
Using JQuery:
$( document ).ready( function(){
// here your code...
})
or using pure JavaScript
window.addEventListener ('load',()=>{
// here your code...
} );
I have written a trigger for a custom button click open chat window; I want this trigger to be executed when clicked on a custom button in a Case object.
I am using Apexchat. My code is,
Live Chat
jQuery(window).load(function() {
jQuery('.live-chat').on('click', function() {
jQuery('#apexchat_prechat_chat_icon').trigger("click");
});
});
Can anyone help me out with this?
As per my understanding, you're using apexchat js plugin, which gets loaded once the UI rendered properly. Hence you'll have to first get the iframe button instance then bind the that within your click scope. Hope the following code may help:
jQuery(window).load(function() {
jQuery('.live-chat').on('click', function() {
//find iframe
let iframe = jQuery('iframe#apexchat_chat_frame');
//find button inside iframe
let button = iframe.contents().find('#apexchat_chat_icon');
//trigger button click
button.trigger("click", function() {
console.log("chat button/link clicked");
});
});
});
Note: I'm considering here the id of iframe is "apexchat_chat_frame" and "apexchat_chat_icon" is the id of the button or link upon click on which, the chat window gets loaded.
I want to create a filter with a multiple select, that when is closed it refresh the page with the new parameters.
So basically I want to capture the onClose event of the select.
I can detect when an option is selected/deselected with
$("#test").on('change', function() {
console.log($(this).val())
});
but I don't want this, since it would reload the page everytime a user change the value. I want to reload the page when the user is done and click "outside" of the select.
Complete code: https://codepen.io/anon/pen/qXQvNB
Catch the close event on the class select-dropdown:
$('.select-dropdown').on('close', function() {
// ...
});
Updated codepen
You can write resize event on ul like this
$('#select-options-d19b3203-929c-cb39-29c4-6170613be5d7').resize( function() {
alert("Closed.");
});
I have a simple textarea where users can input text which is then passed through via AJAX to a URL once they hit the return key. My issue is that on the first press of the return key the text data is sent once, on the second it's sent twice, and so on incrementing my one each time.
After some reading up I realise that if I was using a form submit I'd have to unbind it to prevent this happening. I've tried adding a value flag to prevent the multiple events, but have only got so far as to get it to trigger once only.
My code is as follows. Any guidance on how to prevent the incrementing events would be appreciated - as you can probably tell my confidence/knowledge in Javascript isn't the best. Thank you!
$(function() {
$("#myTextarea").keypress(function(e) {
// If the user hits the return key
if(e.which == 13) {
e.preventDefault();
$.ajax({
success: function(){
var modal = $('#myModal'), modalBody = $('#myModal .modal-body');
modal
// Load the webpage result within the modal Body
.on('show.bs.modal', function () {
modalBody.load('http://www.things.co.uk/things' + document.getElementById('myTextArea').value)
})
.modal();
// Hide the modal after five seconds
myModalTimeout = setTimeout(function() {
$('#myModal').modal('hide');
}, 5000);
}
});
}
});
});
Edit: I solved this by using one() for my modal event via http://www.andismith.com/blog/2011/11/on-and-off/. Thank you everyone.
You must attach the event handler only once. I suppose you're getting the JS in your AJAX response, and executing it again and again on each AJAX load. Removing and re-attaching the handlers is a hacky solution.
To avoid to attach the event handlers more than once, simply put your script in a part of the page which is not reloaded by AJAX, so the event is attached only once.
You can even attach an event handler to an element that is reloaded by ajax using delegated events: Understanding Event Delegation
With this technique, you attach the event handler to a container parent element which is not reloaded by ajax, and handle the events of the reloaded children specified by a filter.
$( "#container" ).on("<event>", "<children filter>", function( event ) {
// code to handle the event
});
Note that in this sample #container is the element which isn't reloaded by ajax. And <children filter> is a jquery selector that chooses the children whose event mus be handled. (<event> is obviously the event name, like click or keyPress).
Explanation: when the event is trigger in the child element, it pops up to the container. The container catches it, and checks that the children passes the filter. If so, the vent is handled.
If there are no more event handlers on myTextarea div code below should suffice.
If there are multiple event handlers attached to keypress event you will have to use named function and remove it using $.unbind() more on how to do this.
$(function() {
$("#myTextarea").off();
$("#myTextarea").keypress(function(e) {
// If the user hits the return key
if(e.which == 13) {
e.preventDefault();
$.ajax({
success: function(){
var modal = $('#myModal'), modalBody = $('#myModal .modal-body');
modal
// Load the webpage result within the modal Body
.on('show.bs.modal', function () {
modalBody.load('http://www.things.co.uk/things' + document.getElementById('myTextArea').value)
})
.modal();
// Hide the modal after five seconds
myModalTimeout = setTimeout(function() {
$('#myModal').modal('hide');
}, 5000);
}
});
}
});
});
i have an menu with some values and i got someting hidden and while click on more button it shows like google more menu... if it is clicked out it is not hiding till the more menu is clicked once again
More<small>▼</small><div class="more list" id="one" style="display:none">test <span style="color:#329">|</span> test1 <span style="color:#169">|</span> test4</div></div>
Script:
function toggle(one)
{
var o=document.getElementById(one);
o.style.display=(o.style.display=='none')?'block':'none';
}
how to make it close while the mosuse clicks on any other place other than the menus
Try using the onblur event.
I see you've tagged this with jQuery, if that is an option, you can clear up the link a bit, like this:
More<small>▼</small>
And use unobtrusive script combined with event bubbling to your advantage, like this:
$(function() {
$(".more_link").click(function(e) {
$(this).next(".more").toggle();
e.stopPropagation();
});
$(".more").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$(".more").hide();
});
});
You can test it out here, this only closes the menu if you clicked neither the menu of the toggle, e.g. clicking one of the test links will not close it. If you want it to, just remove the $(".more").click(function(e) { e.stopPropagation(); }); portion.
It uses event.stopPropagation() to stop the click from bubbling up to document, which if happens (and would if you clicked anything else) triggers its click handler, closing all the .more elements.
I wouldn't use onBlur because it's not a good accessibility approach (for example if the user is using tab to navigate the page).
Look at this solution instead:
jQuery click event for document but ignore a div
Typically, I let the event bubble up to the 'body' or 'html' doc and check if the target is what i want (and/or isn't contained within what i want). If the event target is not contained within your menu, then perform your desired operation (in this case, hide the div).
i.e.
jQuery(document).ready(function(){
jQuery("html").bind("click", function(evt){
var $target = jQuery(evt.target);
var shouldShowMenu = $target.hasClass("menu_toggle");
shouldShowMenu |= $target.parents(".menu_toggle, .more_list").length;
if(!shouldShowMenu)jQuery(".more_list").hide();
});
});
NOTE: your markup would needs to be extended such that the "more" href becomes has a class attribute, class="menu_toggle"