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

Question

I am using AJAX to load a PHP page into a div called 'DIV1' In there it creates a part of table and in there is another div called 'directions' I want to be able to change the contents of the 'directions' div but cant seem to find it? Is it because its dynamic? I have tried several things and will show example, but where am I going wrong?

The code for the AJAX load is

$(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);           
    });
});

The part of the PHP that generates the table where the 'directions' div is like so :

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

and I am trying to update the content of the 'directions' div like so :

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

I have tried everything from 'directions' to the above. What am I doing wrong?

Thanks in advance

Answer 1

getElementById() doesn't take a css selector, as it name implies it takes just the id string. You might have meant to use querySelector() which does take a css selector. Note fixed your directions part to actually be a id selector.

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

But if you actually meant to use getElementById then just pass the element's id string:

document.getElementById("directions")

Answer 2

Like Patrick mentions, the getElementById needs to be fixed. But it also depends on when you run the code. In order to make sure you run the setPanel code after the server call is done, you can put it in the success callback of the .load() (which runs when the load is done);

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

---

edit:

I don't know what your setPanel method does, but document.getElementById('directions') should be able to get the inserted div after the load has run.

If you just want to change its contents you could do:

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