Dynamically loaded form won't update correctly

Question

I have a form which is loaded into the page using .load(). I want to update the form with the HTML I compute in str, but my code isn't updating the form correctly. Why?

if($(this).is('.step3')){
    //Splits the comma seperated values into input fields
    var active_fields = ($('#templateFields').val()).split(',');
    $('#loadedcontent').load('template.html #step3',function(){
        $('#steps').text('Step Three');
        $('#start.btn').text('Save Template & Values').removeClass('step3').addClass('step4');
    });

    str = "";
    for(var i = 0; i<active_fields.length; i++){
        str += '<label>'+active_fields[i]+'</label><input name="'+active_fields[i]+'" type="text"     class="span3">';                
    }
    $('form#values.well').html(str);            
}

As I read it, the question is about modifying a form that is dynamically loaded with `.load()`. You guys with your downvotes and close votes seem to be overreacting to someone who speaks something other than English. — jfriend00, Jun 04 '12 at 03:35
There is not even a single question mark but whatever, I'll +1 your answer @jfriend00, GL on Reversal badge — Fabrício Matté, Jun 04 '12 at 03:37
I see. The lack of structure, expected current behavior and details yielded this question -8, but I'm +1ing your answer anyway. :P — Fabrício Matté, Jun 04 '12 at 03:39
I attempted to clarify the question, correct the English and voted to reopen. This seems like a perfectly legit question to me posted by someone who doesn't know English very well. The question is one of thousands of questions regarding the asynchronous nature of some jQuery functions and, for that reason, I don't consider it too local. — jfriend00, Jun 04 '12 at 03:45
@jfriend00 here you go +1 for reopen it just need another vote, :) have a nice one guys so no sweat! B-) — Tats_innit, Jun 04 '12 at 03:47
Errr, wudeva about the question structure / english part. all i need is a solution. @jfriend00 thnx evry1 — Michael Rhema, Jun 04 '12 at 04:04

score 1 · Answer 1 · answered Jun 04 '12 at 03:32

You have to put the form modification in the load completion function like this:

if($(this).is('.step3')){
    //Splits the comma seperated values into input fields
   var active_fields = ($('#templateFields').val()).split(',');
   $('#loadedcontent').load('template.html #step3',function(){
       $('#steps').text('Step Three');
       $('#start.btn').text('Save Template & Values').removeClass('step3').addClass('step4');
       str = "";
       for(var i = 0; i<active_fields.length; i++){
          str += '<label>'+active_fields[i]+'</label><input name="'+active_fields[i]+'" type="text"     class="span3">';                
       }
        $('form#values.well').html(str);            
  });
}

The way you were doing it, your code to modify the form was running before the form finished loading so it wouldn't find the content and thus couldn't modify it.

Alright, after re-reading his code I'd provide an answer as well, even though OP could've put a little more effort into the question. — Fabrício Matté, Jun 04 '12 at 03:41
Ok, id try that out now. I actually thot it ws bcos i ws tryn to nest a form within another form — Michael Rhema, Jun 04 '12 at 03:59

score 1 · Answer 2 · answered Jun 04 '12 at 03:57

1

Sorry, I figured i couldnt nest a form within a form. I think thats why it didnt work

answered Jun 04 '12 at 03:57

Michael Rhema

171
4

Dynamically loaded form won't update correctly

2 Answers2