2016-02-18 2 views
1

Я понимаю, что этот вопрос может быть таким же. У меня есть googled, к сожалению, я, возможно, пропустил нечто подобное. Я извиняюсь за то же самое.невозможно позвонить jquery ajax

Я создал динамическую таблицу в js на основе некоторого ответа json и обновил таблицу соответственно. Теперь у меня есть кнопка отправки, которая публикует в настоящее время необработанные данные как вызов ajax. Но я не могу вызвать jquery. Ниже приведены коды:

JS:

$(document).ready(function(){ 
$('#ajax-button').click(function() { 
    var formData=$("#careers").serialize(); 
    console.log("This is the skills : "+formData); 
     $.ajax({ 
      type : "POST", 
      url : "currentopening", 
      //data : "skills="+skills, 
      data:formData, 
      dataType : "json", 
      async: true, 
      success : function(response) { 
       var obj = JSON.parse(response); 

       console.log("length of json response : "+obj.length) 
       if(obj.length>0){ 
       //for (var i = 0; i < obj.length; i++) 
       //{ 
        console.log("the characteristics : "+obj[0].title); 
        addRow(obj); 
       //} 
       } 
       else{ 
        document.getElementById("dynamictable").innerHTML="No jobs found!"; 
       } 
      } 
     }); 
    }); 


});function addRow(obj) { 

var table_1 = document.getElementById("dynamictable"); 

for(var i=0;i<obj.length;i++){ 

var btn = document.createElement("BUTTON"); 
var t = document.createTextNode("CLICK ME"); 
btn.appendChild(t); 
btn.id="apply-button"; 

var input = document.createElement("input"); 
input.setAttribute("id",obj[i].jobID); 
input.setAttribute("type", "hidden"); 
input.setAttribute("name", "jobID"); 
input.setAttribute("value", obj[i].jobID); 

var rowCount = table_1.getElementsByTagName("tr").length; 

var row1 = table_1.insertRow(rowCount); 
row1.id="x"; 

var cell0=row1.insertCell(0); 
var cell1=row1.insertCell(1); 
var cell2=row1.insertCell(2); 
var cell3=row1.insertCell(3); 
var cell4=row1.insertCell(4); 
var cell5=row1.insertCell(5); 
var cell6=row1.insertCell(6); 
var cell7=row1.insertCell(7); 
var cell8=row1.insertCell(8); 
var cell9=row1.insertCell(9); 

cell0.headers="title"; cell1.headers="qualification"; cell2.headers="salary"; cell3.headers="companyName"; cell4.headers="tags"; cell5.headers="location"; 
cell6.headers="experience"; cell7.headers="aboutCompany";cell8.id="hidden-element"; 
cell9.id="doit"; 

cell0.innerHTML= obj[i].title; 
cell1.innerHTML= obj[i].qualification; 
cell2.innerHTML= obj[i].salary; 
cell3.innerHTML= obj[i].companyName; 
cell4.innerHTML= obj[i].tags; 
cell5.innerHTML= obj[i].location; 
cell6.innerHTML= obj[i].experience; 
cell7.innerHTML= obj[i].aboutCompany; 
document.getElementById("doit").appendChild(btn); 
document.getElementById("hidden-element").appendChild(input);}};$('#apply-button').click(function() { 
console.log("id of current element : "); 
    var formData=document.getElementById(this); 
    console.log("id of current element : "+formData); 
    //console.log("This is the filter : "+formData); 
     $.ajax({ 
      type : "GET", 
      url : "apply", 
      //data : "skills="+skills, 
      data:"jobID="+formData, 
      dataType : "text", 
      async: true, 
      success : function(response) {console.log("The response : "+response); 

      } 
     }); 
    }); 

Я подозреваю, что поскольку идентификатор применяется кнопка создается динамически и не под document.load функции, моя кнопка не способный работать. Пожалуйста, дайте мне знать, требуется ли дополнительная информация.

Буду признателен за ответ.

+0

Вы getiing ошибку? Если да, напишите здесь – Derek

+0

Привет, Оливер, ошибок нет, страница перезагружается. – coolmego

+0

Пожалуйста, опубликуйте весь файл здесь – Derek

ответ

1

Вам нужно включить event.preventDefault()

$(document).on("click", "#ajax-button", function (event) { 
    ... 
    ... 
    ... 
    event.preventDefault(); 
} 

Это останавливает форму от представления, что это действие по умолчанию на кнопку отправки на форме, и поэтому ваша страница становится свежей.

Edit:

Как уже упоминалось в комментариях, так как форма быть динамически, вы будете нуждаться в доверителя, а не обязательный характер. Вышеуказанный код был пересмотрен.

+0

ИЛИ, он может просто вернуть false. – Derek

+0

Это приемлемо Я думаю, event.preventDefault() немного более явный, и я вижу это чаще, чем нет, но это действительно сводится к предпочтению - они делают то же самое. – mhodges

0

В качестве альтернативы, вы можете попробовать

$().click(){ 
    return false; 
} 

Остановить выполнение поста назад

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