Question

我正在使用AJAX将PHP页面加载到名为“ DIV1”的div中，在其中创建表的一部分，并在另一个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的生成表的部分，其中“ directions” div如下所示：

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>";

我正在尝试像这样更新'directions'div的内容：

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

我已经尝试了从“方向”到上述所有内容。我在做什么错了？

预先感谢

Answer 1

docs不使用css选择器，因为它的名称暗示仅包含id字符串。您可能已经打算使用确实带有CSS选择器的docs。请注意，将您的directions部分固定为一个ID选择器。

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

但是，如果您实际上打算使用getElementById，则只需传递元素的ID字符串即可：

document.getElementById("directions")

Answer 2

就像Patrick提到的那样，getElementById需要固定。但这也取决于您何时运行代码。为了确保在服务器调用完成后运行setPanel代码，可以将其放在success callback of the .load()中（加载完成后运行）；

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

编辑：

我不知道您的setPanel方法做什么，但是document.getElementById('directions')应该能够在加载运行后获取插入的div。

如果只想更改其内容，可以执行以下操作：

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

如何在AJAX加载的页面中更改html

2 个答案: