I've got a four buttons that I want to trigger the same Ajax function to load XML. This works but the buttons are competing and the first one always gets triggered and once I run the AJAX function I can't call it again.
<fieldset><legend>Which Ink Do You Need</legend> <label class="buttonRow"> <input type="button" name="HP" id="HP" value="Hewlett Packard" onclick="test('HP')" /> <input type="button" name="Lexmark" id="Lexmark" value="Lexmark" onclick="test('Lexmark')" /> <input type="button" name="Dell" id="Dell" value="Dell" onclick="test('Dell')" /> <input type="button" name="Canon" id="Canon" value="Canon" onclick="test('Canon')" /> </label> <select name="ink2" id="ink2" tabindex="6" ></select>
</fieldset>
Anyway, the AJAX loads XML and sends it to ink2 with the values but it only works for the first load and every button after HP triggers HP as well. I'm not sure where my problem lies.
Change the label tag into a div. Or perhaps prevent the event from bubbling in the test function.
A label should be coupled with an input. When you click a label with a FOR attribute matching a NAME, the input gets toggled.
In this case I'm presuming the click event bubbles up to the label, and the label toggles the first child input.
ok changed the label to a div and then added subsequent labels around each input as well as around the select tag as well. That works for my first problem. Thanks wb.
So now the same problem still exists as part II. I can't get the ajax to retrigger with each button.
function test(val)
{
var xString = 'xml/'+val+'.xml';
$.ajax({
type: "GET",
url: xString,
dataType: "xml",
success: function (xml) {
var select = $('#ink2');
$(xml).find('value').each(function(){
var title = $(this).text();
select.append("<option class='optionSel'>"+title+"</option>");
});
}
});
}
Alternatively, I'll subcontract the real programming to someone. PM me for a live test link. I just can't publish the client's idea publically but I can send it to any of you no problem.