JQuery tools, overflow images from input box

Question

Hi

I'm creating an interface with JQuery tools, using the overlay functions.

So, I have a list of a tags that shows images in overlay

<a id="11" href="data/images/011.jpg">
<a id="12" href="data/images/012.jpg">
<a id="13" href="data/images/013.jpg">
<a id="14" href="data/images/014.jpg">

then I have an input box (without form tag) and I just want to write in there "11" and, clicking on a "show image" link, it goes in overlay Something like this:

<input type="text" id="searchBox" />
<a id="searchButton" href="#">Cerca</a>

An alert works doing:

$("#searchButton").click(function(){
  alert($("#searchBox").val());
});

So, how can I "search" the image (trough the ID) and simulate a real click?

thanks!!! Teo

Answer 1

This should invoke the click event on the appropriate link

$('#'+$("#searchBox").val()).click();

Answer 2

$("#searchButton").click(function(){
  var anchorId = $("#searchBox").val();
  alert( $("#" + anchorId).attr("href") );
});

This should grab the href you need.

Answer 3

You are trying to simulate the click on the image? In that case, it would be like

$('#'+$("#searchBox").val()).click()

Answer 4

See the web standard for element ID syntax

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

So, to be standards compliant, change markup to something like:

<a id="p11" href="data/images/011.jpg"></a>
<a id="p12" href="data/images/012.jpg"></a>
<a id="p13" href="data/images/013.jpg"></a>
<a id="p14" href="data/images/014.jpg"></a>

Javascript:

$("#searchButton").click(function(){ //set click event of search button
  var piclink_num = $("#searchBox").val(); //get user input which is expected to be numeric part of link ID
  $("#p" + piclink_num).trigger('click'); //trigger click event of intended link
});