Send variables to javascript(jquery) function.

Question

Hi, I wont to be able to send a variable to a JavaScript function when I click on a link but for some reason I cant find anywhere on how to do it on the internet.

Here is the function at the top of my page:

<script>
$(document).ready(function(){
$('[name=updateInterface]').click(function() {
$("#interfaceScreen").load("modules/interface/interfaceScreen.php?h= &v= ");
});
});
</script>

As you can see I need the variable to be placed after the "h=" and "v=" parts.

Here is the link to activate the function in my page:

<a href="#" name="updateInterface"><img src="images/map/invisible.png" border="0" /></a>

Answer 1

Variables from where? It's easy enough:

var h = 20;
var v = 40;
$(function() {
  $('[name=updateInterface]').click(function() {
    $("#interfaceScreen").load("modules/interface/interfaceScreen.php?h=" +
      encodeURIComponent(h) + "&v=" + enocdeURICompoennt(v));
  });
});

Just make sure you escape them with encodeURIComponent().

You can of course get them from anywhere like:

<input type="text" id="txth">
<input type="text" id="txth">

and then:

var h = $("#txth").val();
var v = $("#txtv").val();

Edit: Ok, from your comments I gather you want to send the information from the server back to the client so the client can send it back. The first is to do your click handler in a non-jquery kind of way:

<a href="javascript:handle_click(17,43);">Click me</a>

with:

function handle_click(h, v) {
  $("#interfaceScreen").load("modules/interface/interfaceScreen.php?h=" +
    encodeURIComponent(h) + "&v=" + enocdeURICompoennt(v));
}

That's probably the easiest solution. If you want to stick with jquery click handlers you can always embed this information in an attribute or a hidden element. For example:

<a href="#" class="special"><div class="special-h">12</div><div class="special-v">34</div>Click me</a>

with CSS:

a.special div { display: none; }

and:

$(function() {
  $("a.special").click(function() {
    var h = $(this).children("special-h").text();
    var v = $(this).children("special-v").text();
    $("#interfaceScreen").load("modules/interface/interfaceScreen.php?h=" +
      encodeURIComponent(h) + "&v=" + enocdeURICompoennt(v));
  });
});

There are many variations on this theme.

Lastly, I'll point out that I would advise you not to do attribute lookup selectors where you can possibly avoid it. Give the anchor a class and/or ID and use one of those to assign the event handler. Also use a selector like "a.special" over ".special" too (for performance reasons).

Answer 2

Do you mean appending them into the URL string?

<script>
$(document).ready(function(){
$('[name=updateInterface]').click(function() {
$("#interfaceScreen").load("modules/interface/interfaceScreen.php?h=" + h + "&v=" + v);
});
});
</script>

This assumes you have the variables h and v defined elsewhere in your script.