Метод данных Jquery Ajax меняет div на поле ввода текста

Я использую ajax для отправки данных формы (состоящих из нескольких текстовых полей и одной загрузки файла) на php, чтобы вставить его в sqldb. Сценарий отправляет обратно json закодированный массив, который включает данные двух текстовых полей, заголовка и адреса; и полный URL-адрес для файла, который был загружен с помощью ad_link по массиву).Метод данных Jquery Ajax меняет div на поле ввода текста

Jquery Ajax использует эти данные для заполнения некоторых элементов div в соответствии с их именем класса. Значения вводятся в элемент div.

Тем не менее, это делает элементы div похожими на текстовые поля (как и те, которые были использованы для первоначальной отправки значений). Я проверил классы, чтобы убедиться, что все соответствует правильно и что они уникальны для их соответствующей функции. На этой странице используются bootstrap и jquery. Как я могу устранить или исправить это?

<body> 
    <!--Form--> 
    <form name="data-form" class="data-form" method="post" action="add-list.php" enctype="multipart/form-data"> 
     <fieldset > 
     <input class="fileUpload" name="flyer" type="file" /> 
     </fieldset> 
     <textarea name="title" id="title"></textarea> 
     <textarea name="address" id="address"></textarea> 
     <button id="nxtbutttwo" class="btn btn-primary avatar-save" type="submit">Save Listing</button> 
    </form> 

    <!--Elements to populate upon ajax success--> 
    <div class="aadded_display"> 
     <ul> 
     <li> 
      <div><a class="aad_link" href="" target="_blank"> 
      <div class="atitle"></div> 
      </a></div> 
     </li> 
     <li> 
      <div class="aaddress"></div> 
     </li> 
     </ul> 
    </div> 

    <!--Jquery Ajax--> 
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script> 
    $("document").ready(function() { 
     $(".data-form").submit(function() { 
      data = $(this).serialize(); 
      if (confirm("good?"))  { 
       $.ajax({ 
        type: "POST", 
        dataType: "json", 
        url: "add-list.php", 
        data: data, 
        success: function(response) { 
           if (response.success) { 
            $("#modal1").modal('hide'); 
           $(".aadded_display").show(); 
           $(".atitle").html(title); 
           $(".aadress").html(adress); 
           $("a.aad_link").html(ad_link); 
           } 
           else { 
            console.log("An error has ocurred: sentence: " + response.sentence + "error: " + response.error); 
           } 
          }, 
          error: function() { 
           alert("An Error has ocurred contacting the server. Please contact your system administrator"); 
          } 
         }); 
       return false; 
      } 
     }); 
    }); 
    </script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    </body>

источник

2015-01-09 rhill45

Ответ от АЯКС запроса удерживается в response объекте, который вы используете, чтобы проверить успех, но не для заполнения дивы.

$(".atitle").html(response.title); 
$(".aadress").html(response.adress); 
$("a.aad_link").html(response.ad_link);

Для текстовых полей в дивы это происходит потому, что некоторые браузеры создают глобальные переменные для элементов в DOM с их идентификаторами, так title это название и текстовое поле вы поместить копию в .atitle дел.

источник

2015-01-09 02:44:41 Musa

так, чтобы исправить textarea Мне нужно было бы переименовать объекты в массиве json? спасибо, кстати @musa – rhill45

совершенно исправить, спасибо @musa – rhill45

Метод данных Jquery Ajax меняет div на поле ввода текста

ответ

Смежные вопросы