jQuery function calling self?

Question

I have the following function defined:

function _getUserMatches(url, mDist, ui) {
  var dataString = 'dist=' + mDist;
  var optionsHTML  = 'Current Option: ' + mDist + '<br />';
      optionsHTML += 'Other Options:';
      optionsHTML += ' 2 <input type="radio" name="dist" id="dist" value="2" /> |';
      optionsHTML += ' 5 <input type="radio" name="dist" id="dist" value="5" />';
  $(ui.panel).append(optionsHTML);
  $.ajax({
    type: 'GET',
    url: url,
    data: dataString,
    dataType: 'xml',
    cache: false,
    success: function(xml) {

      $(xml).find('waypoint').each(function() {
        var uid  = $(this).attr('uid');
        var dist = $(this).attr('dist');
        var html = $('<div class="items" id="match_'+uid+'"></div>')
                   .html('<span class="search item" id="uid">'    + uid  + '</span>')
                   .append('<span class="search item" id="dist">' + dist + '</span>')
        $(ui.panel).append(html);
      });
    }
  });
}

Notice befre the .ajax() call, I'm adding some radio inputs to the (tab) panel. How can I make it so that when a user select one of those options, it calls this same function again, but with the value they picked (which then updates the same ui.panel again)

So if initially the function was called with _getUserMatches('test.php', 1, ui); and the user then select radio 4, it has to reload the same function but this time with 4 instead of 1, thus _getUserMatches('test.php', 4, ui);

The test.php script returns SQL records based on that number being set.

Make sense?

Answer 1

Something like this?

var firstTime = true;

function _getUserMatches(url, mDist, ui) {
  ...
  $(ui.panel).append(optionsHTML);
  if (firstTime) {
    firstTime = false;
    $('input[name="dist"]').click(function() { _getUserMatches(url, this.value, ui); });
  }
  ...
}

Also, unrelated to your question, but your radio buttons have the same ID. Make sure to give all elements a unique ID.

Answer 2

Since you generate those radiobuttons they wont respond to .click since the events was never attached, and as Casablanca said, you need to have different ids, hence use class if they need to be grouped.

    $('input[name="dist"]').live("click", function(){ 
        _getUserMatches(url, $(this).val(), ui); 
    });

would be more valid since then the click event would be added to all elements that would be generated after the dom was loaded.