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.
Related
So, i have this code snippet that opens a modal:
<button id="trigger-overlay" class="order">Open Overlay</button>
Now, i wanted to include it in Wordpress menu, but i cant add button tag there, so i added:
Open Overlay
And i am using jquery to add a ID to that link, like this:
$('.order').attr('id','trigger-overlay');
ID is added, but link doesnt open anything, aka, it links to "#" instead of opening a modal...
How could i fix this to make it work?
Thanks!
This thing may causing due to events binging order. So, your code $('.order').attr('id','trigger-overlay'); is executing right after click's binding event (I think that event looks like this one: $('#trigger-overlay').click(function() { ... });.
If you have ability to change that binding, please use jquery.on method: http://api.jquery.com/on/
So that code will looks like: $(document).on('click', '#trigger-overlay', function() { ... });.
Also you can just move $('.order').attr('id','trigger-overlay'); above the script with that event binding.
Based on your
<button id="trigger-overlay" class="order>Open Overlay</button>
I'm not sure how you got a modal to trigger, since it is not connected to an event handler like:
<button onclick="turnOverlayOn()">Demo Button</button>
In this case, there would be a function that targets the overlay/modal and turns its CSS display property from none to block or inline-block (however you would like to display it):
var turnOverlayOn = function () {
$('targetOverlayId').css('display','block')
}
I suggest focusing on attaching an onClick event that triggers a function that does what you want to make the overlay appear.
The function used to turn the overlay off could be:
var turnOverlayOff = function () {
$('targetOverlayId').css('display','none')
}
You could attach this to a different anchor tag or button to turn the overlay off.
Note: the event should work the same for an anchor tag as it does for a button.
In my understanding you want to trigger the button click event. Using the a tag with class order.
try
jQuery(document).on('click','.order',function(){
jQuery('#trigger-overlay').click();
});
You can trigger the click event using jquery. Since I have no knowledge of your DOM structure jQuery(document).on('click','.order',function().. will work even if your elements are dynamic (added to the DOM after the script execution) because the click event is bind to the document.
NOTE:
When using wordpress always use jQuery instead of $ to avoid conflicts.
I have a modal dialog panel with html input controls, which I want to open like a popup sliding on click of a button.
jQuery slidePanel v0.2.2
The code for opening dialog works which is
$('#slidepanel').slidepanel("show")
The issue is in closing the dialog by the following code
$('#slidepanel').slidepanel("hide")
The same hide code was working with jquery but is problematic through Angular.js. Any help appreciated!
Since you are using jQuery to manipulate the "show" and "hide" after the DOM has loaded, jQuery doesn't know those elements exist.
my suggestion is to use jQuery's on() in order to delegate events and select dynamically generated classes:
$(document).on('click','.slider-arrow.show',function(){
....
});
$(document).on('click','.slider-arrow.hide',function(){
....
});
How do I disable a Bootstrap button after it is clicked using Javascript.
I am using the onclick event but it doesn't get disabled.
Code:
<div class="panel-heading">
<div class="btn-group pull-right">
Assign
Upload
</div>
</div>
$("#buttonid").on("click", function() {
$(this).prop("disabled", true);
});
add
$(this).prop("disabled",true);
to you click event function
The following solution can be used when an element (e.g. button, or link) is rendered as an A (anchor) tag (e.g. command link-buttons in ASPX pages). (Anchors do not have an (HTML) disable attribute, so cannot simply be disabled by setting that attribute. Slightly confusingly, Bootstrap will make the button appear to be disabled, but in practice another click (or worse still, double-clicks) will cause an on-click or href (where this is actually "javascript:...") to be re-invoked.)
NB: Needs jquery.
Add the script from the jsfiddle reference below, to your master page or individual pages.
Apply the disableafteroneclick class to any button rendered as an anchor (A) where you want to restrict second/double clicks
Optionally, add to the a/button data-disabledtext attribute (this will replace the text on the button after the first click.
NB: The disabled nature of the button will only be removed when the page is re-rendered - so this is mostly used where (for example) a submit button which must be click only once, will move the user to another page.
You'll see I've used the lines:
if ($(this).attr("href")) window.location = $(this).attr("href");
return false;
for the first click (where the invocation is needed) - which might have been replaced with simply:
return true;
...but discovered that this doesn't work for IE <= 8 - and our clients need to provide support for IE8! If you know you won't need that, then you certainly could use the simplified code created by that replacement.
Code is at:
https://jsfiddle.net/robertgalesorguk/qbq1n369/4/
Hi i am using a function called LoadCoordinates. My first thougt was i need to read this onload.. but after trying a lot of different codes, i cant..
This is how its triggered normally
$("#address1").blur(function()
{
loadCoordinates("");
});
The problem is to "run" this i have to click the input and then clic the body (so address1 lost focus and blur is triggered)
I have tried to load this on page load using seveeral different codes like
$(loadCoordinates(""));
or this
$(function(){
loadCoordinates();
$("#address1").blur( loadCoordinates );
});
This is not working, i think it has to do something because my select lists are using "SELECT BOX IT" http://gregfranko.com/jquery.selectBoxIt.js/
Anyway..
How can i make or trigger the same as is triggering "blur()" on the address1 input.. but when the page is ready. and after selectbox it has loaded & builded the lists with options..
Thanks
This will trigger blur. You need to make sure you do this before applying any plugin to the element, or have to use the API of the plugin to affect and changes
$("#address1").blur( loadCoordinates ).blur();
DEMO
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.