TwelvestoneFront End

Problem with Input and AJAX


Sign in

  • Waiting for Godot ( 730 k posts )
    Just conversation.
  • Thunder Dome ( 23 k posts )
    Photoshop Tennis and Collabs.
  • Photography ( 5.1 k posts )
    For all you shutterbugs, sh...
  • Flash ( 18 k posts )
    ActionScripting to tweens, ...
  • Front End ( 5.9 k posts )
    general front end design an...
  • Back End ( 9.7 k posts )
    serverside scripting, progr...
  • Projects and Theory ( 12 k posts )
    This forum is for discussio...
  • FAQ ( 269 posts )
    All those nagging questions...
  • Design ( 17 k posts )
    graphics & all aspects of g...
  • Purgatory ( 3.6 k posts )
    12stone Jail, feel free to ...
Storm
 
2011-10-29

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.

wowbagger[tip]
 
2011-10-29

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.

Storm
 
2011-10-29

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.

Sorry, you must be a member to post to a conversation. Either log in or sign up to get involved.
TwelvestoneFront End

Problem with Input and AJAX