Как изменить HTML на странице, загруженной AJAX

Question

Я использую AJAX для загрузки страницы PHP в div с именем 'DIV1'. Там он создает часть таблицы, и есть еще один div, называемый 'directions'. Я хочу иметь возможность изменять содержимое 'directions''Div, но не могу найти его?Это потому что его динамика?Я попробовал несколько вещей и покажу пример, но где я ошибаюсь?

Код для загрузки AJAX:

$(document).ready(function(){
    $(".mainstuff button").click(function(){
        $('#loader').show();
        status = $(this).attr("data-name");
        var new_url = "get_job_details3.php?job_id="+status;
        //alert(status);
        $("#div1").load(new_url);           
    });
});

Часть PHP, которая генерирует таблицу, гдеdiv 'directions' выглядит примерно так:

echo "<input style='display:none' id='p_lat' type='text' value='".$p_lat."'><input style='display:none' id='p_lng' type='' value='".$p_lng."'><input style='display:none' id='d_lat' type='text' value='".$d_lat."'><input style='display:none' id='d_lng' type='' value='".$d_lng."'><table class='mainTable'>
<tbody>
<tr>


<td width='50%' style='vertical-align: top'><li>Vehicle required : <B>".$vehicle_required."</B></li>$r<li>Pick up time : <B>".$new_date."</B></li><li>Pick up time : <B>".$p_time."</B></li><li>Pick up address : <B>".$p_address."</B></li><li>Destination address : <B>".$d_address."</B></li><li>Return date : <B>".$d_date_new."</B></li><li>Return time : <B>".$d_time."</B></li><li>Number of passengers : <B>".$pax."</B></li><li>Estimated distance : <B>".$est_dist."</B></li><li>Estimated time : <B>".$est_time."</B></li><li></li><div id='mymap'><li><button id='show_map' style='margin-right:10px' type='button' class='btn btn-success'><span class='glyphicon glyphicon-map-marker'></span> SHOW ON MAP </button><button id='show_directions' data-toggle='collapse' data-target='#directions' type='button' class='btn btn-success'><span class='glyphicon glyphicon-map-marker'></span> SHOW DIRECTIONS </button><div id='directions' class='collapse'>Lorem ipsum dolor text....</div></li></td>
<td width='50%' id='description'><li>Purpose : <B>".$purpose."</B></li><li>Extra requirements : <B>".$list."</B></li><li>Notes : <B>".$notes."</B></li><li>Total current bids : <B>".$total_bids."</B></li><li>Current lowest bid : <B>£".$lowest_bid_price."</B></li><li>Your bids on this job : <B>".$your_bids."</B></li><li>Your current lowest bid : <B>£".$my_lowest_bid."</B></li><li>Make a new bid of : £<input id='bid_amount' type='text'><li><textarea id='extras' class='extras' placeholder='Enter any information you would like the customer to know'></textarea></li><li><button id='make_bid' data-name='".$job_id."' type='button' class='btn btn-bid'><span class='glyphicon glyphicon-pencil'></span> MAKE BID </button><button type='button' style='float:right' class='btn btn-success' onclick='closedown()'><span class='glyphicon glyphicon-remove-circle'></span> CLOSE </button></li></td>
</tr>
</tbody>
</table>";

, и я пытаюсь обновить содержимое div 'directions' следующим образом:

directionsDisplay.setPanel(document.getElementById('#div1 .mainTable directions'));

Я пробовал все из 'направленийк вышесказанному.Что я делаю не так?

Заранее спасибо

Answer 1

Как упоминает Патрик, getElementById необходимо исправить.Но это также зависит от того, когда вы запускаете код.Чтобы убедиться, что вы выполняете код setPanel после завершения вызова сервера, вы можете поместить его в успешный обратный вызов .load() (который выполняется после завершения загрузки);

$("#div1").load(new_url, function () {
    // this code will run after the ajax is done
    directionsDisplay.setPanel(document.getElementById('directions'));
});

---

edit:

Я не знаю, что делает ваш метод setPanel, но document.getElementById('directions') должен иметь возможность получить вставленный div после запуска загрузки.

Если вы просто хотите изменить его содержимое, вы можете сделать:

document.getElementById('directions').innerHTML = "some new text";

Answer 2

getElementById() не принимает селектор CSS, поскольку его имя подразумевает, что он принимает только строку идентификатора.Возможно, вы хотели использовать querySelector(), который использует селектор CSS.Примечание исправил вашу directions часть так, что она фактически была селектором идентификатора.

document.querySelector('#div1 .mainTable #directions')
//or just
document.querySelector("#directions")

Но если вы действительно намеревались использовать getElementById, просто передайте строку идентификатора элемента:

document.getElementById("directions")