Develop Reference

Wordpress search doesn't work on button click

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.

Assign event to button from external library

Every time I press a button, there is a random chance that a alertify alert window popups. The alertify alert popup is something I use instead of javascript Alert, just to get a nicer design.
Alertify library
And here is a screenshot of the current situation:
I want to assign a event to the OK button. When I use the "inspect element" function in google chrome, I see that this green OK button has an id called "alertify-ok", so I want to assign an event when this button is pressed.
I've tried to add this part to my HTML document in the script part:
$( "#alertify-ok" ).on( "click",function() {alert("finally");});
But nothing happens. The reason why I need this to work, is that the youtube popupmodal should come up right after I've pressed the OK button. I belive the error comes because the alertify window with HTML is from an external library, so how can i do this?

Alerts and the others take callback functions on creation, https://github.com/alertifyjs/alertify.js/blob/0.3.12/src/js/alertify.js#L608. You don't need to attach another event listener, just give it the function you want it to execute. example below:
alertify.alert("alerttext", function(e) {
functionIWantToCall();
});

You can put the event on an element you know is already existent (like "body") and specify it to trigger only when the wanted element is clicked:
$(" body").on({
click: function () {...
}
}, "#trigger");

Strange function with datepicker behaviour in firefox and Chrome

I want to use severall datepickers one one page, so i putt the datepicker in a function. The function is triggered on a onfocus event. This works perfect in IE, also in firefox/chrome, but in Firefox i have to click on the input field, lose focus and click again before i get a datepicker....
See the example: http://www.huurhulp.nl/prijzen.php
First click on the second bullet "wij zijn bepaalde periodes gesloten" To unhide the input fields.
Any idea how to get it working in one click in firefox?

Instead of creating your datepickers in onfocus events create them in your $(document).ready block.
The datepicker plugin internally uses the focus event to show the datepicker widget so using it to create the widget is a bad idea.
Looking at your code doing something like this should work:
$(function() {
$('.datums').datepicker({
//List your options here.
});
});

Hover twice for ajax to load

This works, but when I hover the first time, nothing loads. When I mouse off then back on, ajax has loaded. I want ajax to load on the first hover.
index.html
<span title="" id="test" class="tooltip"></span>
tooltip.html
<span id="test">this is ajax</span>
jquery
$('.tooltip').hover(function () {
var id = $(this).attr('id');
$.get('tooltip.html #'+id, function(data) {
$('#'+id).attr('title', data);
});
});

Looks like you are relying on the browser's inbuilt tooltips (showing the title on hover.) That tooltip is likely triggered by the mouseover event, meaning that after you've dynamically added the title, you need another mouseover event to actually trigger the tooltip. Seems it's working as designed.

This is because the first time you hover (which is actually the mouseenter event) the ajax function loads the data and changes the title, but the mouseenter event has already fired and your tooltip is already open so it's too late.
Your best bet is to directly alter the tooltip rather than change the title of the original element.
What you should actually do is change both and alter your hover function to check for a title so that next time the hover occurs you don't need to load the information again, rather refer to the title you've already populated.
Hope that helps :)

As pointed out earier, the problem is that the browser displays the inbuilt title as soon as you hover the element, and ajax use some time to load the content and append it.
I would advice you to use one of the MANY tooltip-plugins out there: https://www.google.com/search?q=tooltip+jquery+plugin
I've had some great experience with qTip. Easy to set up and easy to restyle.

Locating an element in a 'Facebox' box

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.