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.

Using DIV as link triggers redirect on new tab shortcut

I have a section of a page (widget) which I would like to use as a link (clicking anywhere will go to a different page):
<!-- just an example. real application is quite a bit more complex -->
<div data-href="/page">
<h1>Title of sample content</h1>
<p>
some content here with an image
<img src="image.jpg">
</p>
<div>
and many more elements in here
<div>
with nested structure with semantic meaning
</div>
</div>
</div>
Since the section is <div>, I cant wrap it around <a> since that is against HTML spec. I also cant change the divs to span since they actually have semantic meaning.
Currently I attach a JS click event on which I change the browser location which effectively works as a link:
$('div').click(function() {
window.location=$(this).data("href");
});
This works ok except when you Ctrl+Click or Cmd+Click on the <a> to open the link in the new tab. Since for this you are not explicitly doing right click, the browser registers it as a click hence the function gets executed anyway.
I guess I could check if any modifier key is pressed at the click event however I feel that is a bit cumbersome. Is there a nice JS solution for this?

You can do something like this (jQuery for the click handler):
$(selector).click(function(e) {
if(e.shiftKey) {
//Shift-Click
}
if(e.ctrlKey) {
//Ctrl+Click
}
if(e.altKey) {
//Alt+Click
}
});
You can handle whichever you want inside an if inside the click handler like shown above

Prevent a standard a href/jquery click combo from appending # to the url?

I have a standard link setup that fires an event via jquery when clicked
Click Me
All that works great, except that when the pseudo URL is clicked, it appends a hashtag (#) to the url. This hashtag affects how my page reloads if the user decides to refresh the page later on, so i'd like to not have the hashtag appended to the url.
is this possible while still allowing my normal jquery to fire?
Thanks!

You should either return false; from the event handler of A tag
Or, use
Click Me
For those who thinks javascript: void(0) is bad practice
If you use href='#', you must take care of two things
// one
function fn() {
// code
return false;
}
// two
click
And if you forget and just write onclick="fn();" it won't work
Another thing why I used javascript: void(0); is, if the function encounters/throws an error, it wont return false
So if you're a lone developer then you can clearly make your own choice, but if you work as a team you have to either state:
Use href="#", make sure onclick always contains return false; at the end, that any called function does not throw an error and if you attach a function dynamically to the onclick property make sure that as well as not throwing an error it returns false.
OR
Use href="javascript:void(0)"
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

In end of the you click function, use:
return false;

smartass anwser: use a button.
alternative: you must make sure to trigger the preventDefault in youre jQuery event handler
$("dosomthing").click(function(e){
//make magic happen
e.preventDefault()
})
this works on html forms thats submitting and such.
note on the button thing
it is best pratice to only use a tags for link (somthing that changes the url) and buttons for other sorts of interactions.
search bots and other web crawlers expect a tags to link to a other html document (hyperlink) and up to and including html 4. or to a other point in the current document.

Does it need to be an href at all? you could do:
<span class="dosomething">Click me</span>
.
.dosomething{cursor:pointer}

Automatically focus on search box when switching tabs

I'm editing a start page made by someone else (found here: http://defined04.deviantart.com/art/KMay-Start-Page-184915031?q=gallery%3Adefined04%2F790342&qo=0). This lets you switch search engines by clicking on the different tabs. Is there a way to have the search box automatically selected when I select a tab? At the very least, how can I get the default engine to be selected on page load?

On the click handler of your tab, do this....
document.getElementById('tabs-container').getElementsByTagName('li').onclick = function () {
document.getElementById('search-input-' + this.id).focus();
}
Of course, change it to suit your HTML. Hopefully if you have a tie like that between them, you can write one event handler and not three.

You can use javascript focus() for that. Execute the script when the tab is changed.

Initiating key strokes in JavaScript

Let's say I have a web page with a header menu, when I click the header menu, it calls a servlet that creates the sidebar. Is it possible that without using the document.getElementById? And just simulate keystrokes tab and enter via JavaScript so I don't have to click the menu to view the sidebar?

Could you describe what you want to achieve a bit more?
What I understood is that you want to be able to show ( and may be also hide) the sidebar with the tab button.
You could use the .keypress() function in jQuery - http://api.jquery.com/keypress/
Also check out this tutorial on Nettuts, I think it may be useful for you -
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/

You can use the attribute tabindex on the elements that makes your menu.
eg: <ul tabindex="1">... and set the focus on the first one when opening the page.
They will act as form field when you press tab.
Then for the enter place a single onkeyup listener on a parent node common to all menus items:
menuParent.onkeyup = function(ev){
var selectedMenu = ev.target || ev.srcElement,
keycode = ev.keyCode;
if(keycode === 13){
//the user pressed enter
}
...
}

You can do what you want using JavaScript, but there's a much easier way to do it than by simulating keystrokes.
I am assuming that what happens when you click the link is that a JavaScript function is called, which causes the submenu to appear. All you need to do is to find out what that function call is (let's say it's called "callTheFunction"), and then call it onload, like this:
<script type="text/javascript">
window.onload=callTheFunction;
</script>
Hopefully that will give you the idea. If you need any more help, please provide a URL or code sample.