动态添加输入字段，但字段由外部php函数生成 [英] Add input fields dynamically but fields are generated by external php functions

问题描述

是的.这个问题好像重复了一样，但实际上找不到类似的东西. 事情在这里起作用，但在这里不是动态的. 但是，很简单.

    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++;
 }

但是在这里我给它一点点扭曲.

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

因此，这里的新函数"addmore()"将返回由外部php代码生成的字段，这些代码是在AJAX的帮助下被调用的.

函数addmore();就是这样.

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');                 
          }
    });
}

显然是$ jd('#fieldtable_id').html(res);部分；正在做实际的工作，但我无法使用它在此处动态介绍新字段.

请引导我.

解决方案

您的函数addmore()没有返回任何内容，因为

1. 您的函数中没有return "value"
2. 您正在使用$ jd.ajax()进行异步调用

您应该这样做:

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

和:

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');                 
          }
    });
}

yeah.. this question seams like repeated but really couldn't find something similar.. Things work here but are not dynamic here.. but yeah its simple..

    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 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..

解决方案

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');                 
          }
    });
}

这篇关于动态添加输入字段，但字段由外部php函数生成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！