Der Zugang zum Inhalt dynamisch mit ajax eingefügt

Question

Dies ist das Fragment von Code mit ajax eingefügt:

<form> 
    <label for = "task-name">Name</label> 
    <input type = "text" id = "task-name" /> 

    <label for = "task-description">Description</label> 
    <input type = "text" id = "task-description" /> 

    <input type = "hidden" id = "task-col" /> 
    <input type = "hidden" id = "task-row" /> 

    <input type = "submit" id = "add-task" onclick="return false" value="Add" /> 

</form> 

Dies ist der JS-Code, der das vorhergehende Element im DOM einzufügen:

$('html').on('click', '.task-pop', function(){ 
    var pos = $(this).parent().parent().attr('class').split("-"); 
    ajaxObj = getXmlHttpObject(); 
    ajaxObj.onreadystatechange = function(){ 
     if(ajaxObj.readyState == 4 && ajaxObj.status == 200){ 
      $('#pop-hold').html(ajaxObj.responseText); 
      $('#task-col').val(pos[0]); 
      $('#task-row').val(pos[1]); 
     } 
    }; 
    ajaxObj.open("GET","resources/component/newTask.jsp"); 
    ajaxObj.send(null); 

    $('#pop-blk').css('display','block'); 
    $('#pop').show("fast"); 
}); 

Wie Sie können sehen, dass ich versuche, einige der versteckten Eingaben #task-row und #task-col aus dem dynamisch hinzugefügten Inhalt hinzuzufügen.

Die Seite wird ordnungsgemäß angezeigt, und es wird kein Fehler ausgegeben, aber auf diese beiden Felder wird nie zugegriffen. Wie kann ich das lösen?

Answer 1

Änderung

$('#pop-hold').html(ajaxObj.responseText); 
$('#task-col').val(pos[0]); 
$('#task-row').val(pos[1]); 

mit

var html = $(ajaxObj.responseText); 
html.find('#task-col').val(pos[0]); 
html.find('#task-row').val(pos[1]); 
$('#pop-hold').html('').append(html); 

Answer 2

Sie sollten jQuery Ajax() verwenden, wäre viel einfacher für Sie, die ganze Ajax Sache zu handhaben:

$('html').on('click', '.task-pop', function(){ 
    var pos = $(this).parent().parent().attr('class').split("-"); 

    $.ajax({ 
     url: 'resources/component/newTask.jsp', 
     type: 'GET', // Default value is GET but I included it for you 
     success: function(data) { 
      $('#pop-hold').empty().append(data); 
      $('#task-col').val(pos[0]); 
      $('#task-row').val(pos[1]); 
     } 
    }); 

    $('#pop-blk').css('display','block'); 
    $('#pop').show("fast"); 
}); 

Nur ein Teil der Lösung, hoffe es wird helfen ^^

Answer 3

Die Tatsache, dass die Eingänge ausgeblendet sind, hindert Sie nicht daran, ihren Wert mit val() zu setzen. Wenn Sie die val-Funktion wie dieses $('#task-col').val(pos[0]); nennen, stellen Sie sicher, dass:

• Die # Task-col Element vorhanden
• pos [0] nicht spezifiziert (Sie durch den Austausch pos[0] mit "test" testen können)
• Sie diese Zeile tatsächlich ausgeführt

(Sie, indem Sie eine altet("test") die Linie, bevor testen können) Und wenn Sie jQuery verwenden, nicht herumspielen mit dem getXmlHttpObject als @Ethenyl sagte. Verwenden Sie stattdessen $.ajax.