How do I send a variable in jquery to a callback function? function(r){ }

Question

How do I send a variable in jquery to a callback function? function(r){ }

Look at the demo

Whilst on the demo, notice that the form above the menu can be serialised. Also notice that when clicking a folder icon whilst on an item (click a category from the left), and submit the form that way, it cannot be serialised.

I have a variable which I need to be passed to the callback function, if that's what it's called; to the function(r) { } section of the code.

Below is the code that works that's above the header.

<?php $moveablecats = mysql_query("SELECT * FROM categories WHERE id != '1'  "); ?><form id="changecategoryForm2"><select id="newflex" name="thecatidichose"> <option value=""></option> <?php while($catrow =mysql_fetch_array($moveablecats)){ ?> <option value="<?php echo "$catrow[id]"; ?>"><?php echo "$catrow[title]"; ?> </option><?php } ?></select>  </form>   <p><tt id="results"></tt></p>


<script>
    function showValues() {
      var str = $("form#changecategoryForm2").serialize();
      $("#results").text(str);
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();
</script>

Below is the code that does not work. I am using the [jquery alerts dialogs plugin][2]. Ignore the lines that are commented out. When the script alerts the serialised form, it is blank, so it does not work. It does however manage to show the itemid and categoryid variable.

$(".changecategory").click( function() {
   <?php $moveablecats = mysql_query("SELECT * FROM categories WHERE id != '1'  "); ?>
 var categoryid = $(this).attr("categoryid");
 var itemid = $(this).attr("itemid");
 var itemid2 = $(this).attr("itemid");
 var itemtitle = $(this).attr("itemtitle");
 var parenttag = $(this).parent().get(0).tagName;
 var removediv = "itemid_" +itemid;

   jAlert(
      'Which category do you want to move <b>'+itemtitle+ '</b> to?<br><?php $moveablecats = mysql_query("SELECT * FROM categories WHERE id != '1'  "); ?><form id="changecategoryForm"><select id="newflex" name="thecatidichose"> <option value=""></option> <?php while($catrow =mysql_fetch_array($moveablecats)){ ?> <option value="<?php echo "$catrow[id]"; ?>"><?php echo "$catrow[title]"; ?> </option><?php } ?></select>  </form>   <p><tt id="results"></tt></p>','Change category', function(r) {
         // $(parenttag).fadeOut('slow');  
         $("#"+removediv).fadeOut('slow');  

         //var newflex = $("#newflex").val();
   //alert(newflex);

   alert($("#changecategoryForm").serialize());
   //alert('categoryid ' + categoryid + ' itemid ' + itemid + '.');

   //var dataString = $("#changecategoryForm").serialize();
   /*
   //remember to add validation for blank fields

   $("#loading4").show();
   $("#loading4").fadeIn(400).html('<img src="loading.gif">');

   var newrow = "134";
   $.ajax({
    type: "POST",
    url: "formcontrols.php",
    data: dataString,
    cache: false,
    success: function(html){
     $("#creation4").after(html);
     $("#loading4").hide();
     //$("#newrow").before($('itembeforehere'));
    }
   });
   */
   //
   return false;


         jAlert(''+ itemtitle +' has been successfully moved.', 'Success');
      }
   ); 


});

Answer 1

I think you're probably looking for a closure, but it's really hard to tell from your question. Here's a simple example of a closure:

function showLater(msg, delay) {
    setTimeout(function() {
        alert(msg);
    }, delay);
}

Think of the function we're passing to setTimeout as the callback. When you call showLater:

showLater("Hi there", 2000);

...it returns right away, but the anonymous closure still has access to the arguments you gave to showLater, so that when it gets run a couple of seconds later, it can do the "Hi there" alert.

One uses closures a lot when dealing with ajax calls and the like, since by default (and by preference) they're asynchronous. (I simulated that asynchronicity above using setTimeout, to keep things simple.)

More on closures here.