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.