inserting new html element dynamically

Question

I have the following code that runs etape.html launch page, which allows to insert the html elements in a html block with n iteration.

For the first iteration all is well and appears, but in the second iteration nothing appears in the div block.

The secondary consideration is executed on pressing "Suivant" button, which allows to reload the page etape.html

Someone has any idea?

index=0;    
$("#etape").live('pageshow', function() {

    if(index>5)
    {
    //Go to other Page
    }

    switch(id_type_champ)
    {
        case 1:
            $('#header-right-container').append(''+nom_champ+'<input type="text" id='+Id+'  >  ').trigger("create");
            alert("case 1");
            break;
        case 2:
            $('#header-right-container').append(''+nom_champ+'<input type="text" id='+Id+' > ').trigger("create");
            alert("case 2");
            break;
        case 3:
            $('#header-right-container').append(''+nom_champ+'<input type="date" id='+Id+' OnClick="aff_date(\'' + Id + '\')">').trigger("create");
            alert("case 3");
            break;
        case 4:
            $('#header-right-container').append(''+nom_champ+'<select id='+Id+'    ><option value=0></option></select>').trigger("create");
            alert("case 4");
            break;
        case 5:
            $('#header-right-container').append(''+nom_champ+'<select id='+Id+' ><option value=0> </option></select> ').trigger("create");
            alert("case 5");
            break;
        case 6:
            $('#header-right-container').append(''+nom_champ+'<select id='+Id+' ><option value=0> </option></select> ').trigger("create");
            alert("case 6");
            break;
        case 7:
            $('#header-right-container').append(''+nom_champ+'<select id='+Id+' ><option value=0> </option></select> ').trigger("create");
            alert("case 7");
            break;
        case 8:
            $('#header-right-container').append(''+nom_champ+'<select id='+Id+' ><option value=0> </option></select> ').trigger("create");
            alert("case 8");
            break;
        case 9:
            $('#header-right-container').append(''+nom_champ+'<select id='+Id+' ><option value=0> </option></select> ').trigger("create");
            alert("case 1");
            break;
        default:
            $('#header-right-container').append(''+nom_champ+'<select id='+Id+' ><option value=0> </option></select> ').trigger("create");
            alert("case 1");
            break;
    }

    $('#header-left-container').append('<a href="etape.html" data-role="button"  OnClick="DoAction()" data-icon="arrow-r"    data-iconpos="right"  data-theme="a" id="suivant">Suivant</a> ').trigger("create");
}

function DoAction()
{
    //$('#'+id+'').val() ;        //GET text
    //$('#'+id+'').val('AAAAAA'); //SET
    index++;
    alert('Button has been clicked avec un index =  a '+ index);
}

And when does this second iteration occurs? Where is the code for it? — Kiro Coneski, Nov 19 '12 at 13:16
don't use the `onclick`, it's soooo bad, and it just undermines what jQuery is all about, ... — Val, Nov 19 '12 at 13:17
Don't use jQuery, it's sooooooo bad, and it undermines what JavaScript is all about ;-) — PeeHaa, Nov 19 '12 at 13:21
See: http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery — Christophe Roussy, Nov 19 '12 at 13:21
i think i should be change $("#etape").live('pageshow', function() — Abdosa Mine, Nov 19 '12 at 13:23

score 0 · Answer 1 · answered Nov 19 '12 at 13:25

0

I can't see the code but I would check that you are not adding more than one HTML elements with the same Id. Id need to be unique.

<select id='+Id+' >

Is the Id a a counter that is reset on the second iteration? Is the first iteration stored somewhere, and not removed, before the 2nd iteration is run? Use firebug and the like to check.

answered Nov 19 '12 at 13:25

James

117
8

i think i should be change $("#etape").live('pageshow', function() – Abdosa Mine Nov 19 '12 at 13:54
var Id=liste_id_ch_par_etape[j]; – Abdosa Mine Nov 19 '12 at 14:12
the problem that the code runs well, if I go to iteration 2, for example, nothing is displayed and if I press the button return the android emulator the elements of iteration 2 are displayed – Abdosa Mine Nov 19 '12 at 14:14

inserting new html element dynamically

1 Answers1