I've got a live search on a webpage (CodeIgniter, jQuery and Bootstrap are being used).
Basically it works as this:
On input it triggers an AJAX-request
It makes a request to a file which returns a JSON-object
On successful request it parses the object
All content is parsed into table rows
One of the table cells contains a button.
The button should open a Modal window, by javascript.
Why by JS? Because it should first do another AJAX-request to fill the Modal content.
However, it doesn't work. It works on a button that is already on the page in the beginning. But I can't get the JS to be triggered on AJAX-content.
Ideally, I would like to see it trigger a .click() event, when the button is clicked.
Any suggestions?
The click event binds the event to dom elements which are already available.
If you dynamically add an element to your page, those will not have the events you had bind.
Instead you need to attach event handler to your button. You can do it via .on() function of jQuery.
$(document).on('click', '#newButtonID', function() {
// Your second ajax call goes here
});
Related
I'm trying to insert html elements dynamically to a list that is already created, but the new elements that I'm attach them event listener
$(".").click(function(e){} they don't get the event.
the process :
get more ads(posts) when the user scrolls down (Infinite Scroll Pagination)
getting data with ajax request from the controller
the controller renders the new elements and returns html to the ajax
the html with the new posts appends to the web
in the end - every ad(post) that inserts dynamically needs to trigger popup function
I tried to use $(".").on(click,function(e){}, but I also need to use e.stopPropagation(); but this event doesn't support that method.
Solution would be really appreciated.
images:
1) get more ads(posts) when the user scroll down(Infinite Scroll Pagination) gettin data with ajax request from the controller and then appends him
2) the controller render the new elements and return html to the ajax
3)the html that render in the controller
4) the open and close popup event listener that i cant attech to the new dinamic elements
[]
I succeeded!
i used onclick="get_images(); event.stopPropagation();"
inside my html
another option is onclick="get_images(event);"
and inside the function
function get_images(e){
e.stopPropagation();
}
and then all the dynamic elments gets the function with e.stopPropagation()
I am trying to make search work on button click on opening of popup using below jQuery code
jQuery(function($) {
$('#secondaryButton').click(function() {
alert("The paragraph was clicked.");
$("button.elementor-search-form__submit").click();
});
});
I have tried adding script code in header.php it doesn't work
I also tried adding script code in custom js on page level using elementor pro plugin, it doesn't work
I am not sure why scripting doesn't work. The link which i am working is
https://adelaidebuildingconsulting.com.au/
Once you click search icon, a popup will open and i am looking to implement search on 'search' button click. Any help would be highly appreciated.
There's two issues in your code. Firstly the right-side panel which contains the #secondaryButton element doesn't exist in the DOM when the page loads, so you need to use a delegated event handler.
Secondly, you need to invoke the click() method on the button element directly, not through jQuery. To do that use [0] to retrieve the Element from the jQuery object:
$("button.elementor-search-form__submit")[0].click();
However, in this case better practice to submit the form element would be to invoke the submit event on that element, not the click of its button:
jQuery(function($) {
$(document).on('click', '#secondaryButton', e => {
$("form.elementor-search-form")[0].submit();
});
});
That being said, the best practice would be to completely remove the need for any JS hacks to form a relationship between your form and an external submit button. If you rearrange your HTML so that the clickable 'Search' element is a <button /> element within the form then you get the behaviour you require by default, without the need for any JS.
on jquery mobile web app I'm calling js function on close button. That js function close it's callers div parent.
That works fine, but problem is that I have multiple close buttons and this function works perfectly first time,
after that onclick doesnt work. It doesnt enter into js function.
I tried to put js function at very bottom of my _Layout.cshtml page but it doesnt change anything.
update
<script type="text/javascript">
$('#closeTable').click(function () {
$(this).parent().hide();
});
</script>
<div id="closeTable"></div>
Your problem is originating from the fact that you're using an ID to add event listeners to. In your JS, you have this line:
$('#closeTable').click(function () { ...
This line attaches a click event handler to the div with ID closeTable. Since there can only be one element with this ID, once it's hidden the user can't click it again and so the function won't be executed again.
If you have multiple close buttons as you say, you should instead use a class selector to attach handlers:
$(".closeTable").click(function() { ...
This will instead attach a listener to every element with class closeTable. This means that when any of them are clicked the function will execute, so it will work multiple times.
Hope this helps.
I have a very simple click handler that makes an AJAX GET request on click like so:
$('span.switch-option').click(function() {
$(this).parents('div.log-in-option').hide();
$(this).parents('div.log-in-option').siblings('div.log-in-option').fadeIn();
});
This works perfectly anywhere else on the website. However, when I try to click a <span> element with the class switch-option inside a modal window, the event does not fire. Entering the contents of the click-handler function in the console and running them does perform the desired behavior, however.
Why will the click handler not fire in this modal window? I am using the popular SimpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ and jQuery 1.9.1.
A live example is here: http://ec2-107-22-8-70.compute-1.amazonaws.com/thread/19. If you click the 50,000 reps or any user's reputation then try to click the big blue link in the dialog, the click handler does not fire. This behavior happens with other click handlers in different modal windows as well.
When your script(main.js) is running the elements 'li.log-in, a.log-in' does not exists in the dom, they are loaded dynamically when the popup is created thus jQuery is not able to bind the event handlers
Try event propagation
$(document).on('click', 'li.log-in, a.log-in', function() {
$.get('/login/', function(data) {
//make a modal window with the html
$.modal(data);
});
return false;
});
Heres my link:
http://tinyurl.com/6j727e
If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.
I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.
$('#facebox .hero-link').click(alert('click!'));
However, it doesn't detect a click and oddly enough the click event runs when the page loads.
The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.
Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)
First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.
The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.
Option 1) Bind the click event only after the facebox is revealed. Something like:
$(document).bind('reveal.facebox', function() {
$('#facebox .hero-link').click(function() { alert('click!'); });
});
Option 2) Look into using the jQuery Live Query Plugin
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:
$('#facebox .hero-link').click(function() { alert('click!'); });
Alternatively use event delegation
This basically hooks events to containers rather than every element and queries the event.target in the container event.
It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)
Quick example here
jQuery plugin for easy event delegation
P.S event delegation is pencilled to be in the next release (1.3) coming very soon.