Loop inside divs with same class

Question

I'm trying to loop inside divs which have the same class name. It's in order to get the correct query string which I want to use for a getJSON afterward. The problem is that I can't get the various arguments from the divs...

Here is the code creating the divs (this one works fine, I checked with Chrome console) :

 $(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_'+field.id+'">' + '<label>' +field.button_title+ ' </label>' + '<input type="text" name="mytext-'+field.titre+'" table='+field.table+' titre='+field.titre+' id="field_'+field.titre+'" placeholder="'+field.placeholder+'"/>' + ' ' + '<button class="removeclass3"> x </button>' + '<br>' + '</div>' + '</div>'); $("body").on("click", ".removeclass3", function() { $(this).parent('div').remove(); // To Remove Filter return false; }); $(InputsWrapperDisplay).append('<div>' + '<div class="name" table="'+field.table+'" titre="'+field.titre+'" id="InputsWrapperDisplay-'+field.id+'">' + '<label>' +field.button_title+'</label>' + ' ' + '<button class="removeclass3"> x </button>' + '</div>' + '</div>'); $("body").on("click", ".removeclass3", function() { $(this).parent('div').remove(); // To Remove Display return false; }); 

 <div id="InputsWrapper"></div> <div id="InputsWrapperDisplay"></div> <div class="name" id="InputsWrapper_TI"><label>TI </label><input type="text" name="mytext-TI" table="technical_item" titre="TI" id="field_TI" placeholder="Nom partiel ou complet"> <button class="removeclass3"> x </button><br></div> 

Here is the code which is supposed to modify the myjson variable :

var myjson = "http://****/get_json_test.php?callback=?";
  $('.name').each(function(i, obj){
     if(document.getElementById('field_'+obj.titre+'') != null){
        if(document.getElementById('field_'+obj.titre+'').value != null){
           myjson += '&mytext-'+obj.table+'|'+obj.titre+'=' + document.getElementById('field_'+obj.titre+'').value;
        }
     }
  });

  $('.display').each(function(i,obj){
     if(document.getElementById('InputsWrapperDisplay-'+obj.id+'') != null){
        myjson += '&'+obj.table+'|'+obj.titre+'';
     }
  });
  console.log(myjson);

I get this result : "http://******/get_json_test.php?callback=?"

Would anyone know why I don't get the modifications in myjson ?

Thanks, Corentin.

Answer 1

I think the problem is here:

$('.name').each(function(i, obj){
   if(document.getElementById('field_'+obj.titre+'') != null){
       ...
   }
});

You are iterating through all .name s, and then using its titre attibute to find its field_<titre> element, but your div.name element doensn't contain any titre attribute, see:

<div class="name" id="InputsWrapper_TI">...</div>

And after that, you're trying to access the field_<titre> attributes, but referencing to the .name element (the obj variable):

myjson += '&mytext-'+obj.table+'|'+obj.titre+'=' + document.getElementById('field_'+obj.titre+'').value;

---

To resolve the unmodified resultant string issue, I suggest the following solution (that doesn't require any change to your html):

$('.name').each(function(i, obj){
   var fieldElement = $(obj).find('input');
   if (fieldElement.length && fieldElement.val()) {
         myjson += '&mytext-' + fieldElement.attr('table') + '|' + fieldElement.attr('titre') + '=' + fieldElement.val();
   }
});

Answer 2

In the each you are gaining a jQuery element and it can't have a titre or table property coming from your data-source.

You can add these property as dom data-attributes and use them latter.

Like:

var field = {id:50,button_title:'demo',titre:'foo', placeholder: 'bar', table: 'tab'}

$('#InputsWrapper').append('<div>' + '<div class="name" id="InputsWrapper_'+field.id+'" data-titre="'+field.titre+'" data-table="'+field.table+'">' + '<label>' +field.button_title+ ' </label>' +
         '<input type="text" name="mytext-'+field.titre+'" table='+field.table+' titre='+field.titre+' id="field_'+field.titre+'" placeholder="'+field.placeholder+'"/>' + ' ' + '<button class="removeclass3"> x </button>' + '<br>' + '</div>' + '</div>');
            $("body").on("click", ".removeclass3", function() {
            $(this).parent('div').remove(); // To Remove Filter
            return false;
            });

Demo: http://jsfiddle.net/6ym3e0eL/

But please consider to:

1. build your dynamic HTML in a more mantainable way
2. avoid mixing jQuery and vanilla code to access the DOM