Question

This question might seem like a repeat, but I really couldn’t find something similar.
Things work here but are not dynamic here:

    var counter = 0;
function addInput(divName){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "Member " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
      document.getElementById(divName).appendChild(newdiv);
      counter++;
 }

but here I am giving it a little bit of a twist:

    var counter = 0;
function addInput(divName){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "Member " + (counter + 1) + addmore();
      document.getElementById(divName).appendChild(newdiv);
      counter++;
 }

so, the new function addmore() here is returning the fields generated by the external PHP code which is being called with the help of AJAX..

The function addmore(); is something like this:

addmore(){
        $jd.ajax({
          url: "<?php echo JURI::root(); ?>",
          type: "POST",
          data: {'option':'com_joomd', 'view':'itempanel', 'task':'loadfields', 'typeid':<?php echo $this->cparams->typeid; ?>, 'catid[]':checked, 'id':<?php echo (int)$this->item->id; ?>, "<?php echo jutility::getToken(); ?>":1, 'abase':1},
          beforeSend: function()    {
            $jd(".poploadingbox").show();
          },
          complete: function()  {
            $jd(".poploadingbox").hide();
          },
          success: function(res)    {
          
                $jd('#fieldtable_id').html(res);
          },
          error: function() {
              alert('error');                 
          }
    });
}

Obviously the part $jd('#fieldtable_id').html(res); is doing the actual job, but I am not able to use it to introduce the new field here dynamically.

Please guide me.

Answer 1

Your function addmore() isn’t returning anything because

1. There is no return "value" in your function
2. You’re making an asynchronous call with $jd.ajax()

You should do like this :

var counter = 0;
function addInput(divName){
      addmore(divName);
}

and :

function addmore(divName){
        $jd.ajax({
          url: "<?php echo JURI::root(); ?>",
          type: "POST",
          data: {'option':'com_joomd', 'view':'itempanel', 'task':'loadfields', 'typeid':<?php echo $this->cparams->typeid; ?>, 'catid[]':checked, 'id':<?php echo (int)$this->item-        id; ?>, "<?php echo jutility::getToken(); ?>":1, 'abase':1},
          beforeSend: function()    {
            $jd(".poploadingbox").show();
          },
          complete: function()  {
            $jd(".poploadingbox").hide();
          },
          success: function(res)    {
             var newdiv = document.createElement('div');
             newdiv.innerHTML = "Member " + (counter + 1) + res;
             document.getElementById(divName).appendChild(newdiv);
             counter++;

          },
          error: function() {
              alert('error');                 
          }
    });
}