Using jQuery to navigate between divs

Question

I currently have a div which when clicked posts data to another page and reloads the div. I would like to add a back button (#backref) to the new div to take me back to the previous div. I have found several posts on this whereby you add display:none; to the div you want to browse to, but obviously this is my initial div so I cannot use that css. Any suggestions on how to get round this would be appreciated!

Code I am using to achieve this:

$(document).ready(function () {
$('.clickthrough2').click(function () {
    // get car id
    carId = $(this).attr('id'); // get the car id to access each class element under the car div container

    $.post('referrer-ajax2.php', {
        clickthrough: $('#car-'+carId+' .clickthrough').val(),
        ref_date_from2: $('#car-'+carId+' .ref_date_from2').val(),
        ref_date_to2: $('#car-'+carId+' .ref_date_to2').val()
    },
    function (data) {
        $('#car1').html(data);
    });
});     
});

index.php:

<div id="car1" class="declined3 statdivhalf2">
<h4>Select Car</h4>

<div class="statgrid">
    <?php
    $result=$ mysqli->query($sql); 
    if($result->num_rows === 0) { echo 'No Cars in selected time period.'; } 
    else { while ($row = $result->fetch_array()) { 
    ?>
<div id="car-<?php echo $row['car_id'];?>">
<input type="hidden" class="ref_date_from2" value="<?php echo $date_from; ?>" />
<input type="hidden" class="ref_date_to2" value="<?php echo $date_to; ?>" />
<input type="hidden" class="clickthrough" value="<?php echo $row['car_name'] ?>" />
<a><div id="<?php echo $row['car_id'];?>" class="clickthrough2 col-5-6"><?php echo $row['car_name'] ?></div></a>
</div>

    <div class="col-1-6">
        <?php echo $row[ 'quantity']; ?>
    </div>
    <?php } } ?>
</div>
</div>

referrer-ajax2.php:

<div id="car1" class="declined4 statdivhalf2">
    <h4>Car Details</h4>

<div class="statgrid">
    <?php
    $result=$ mysqli->query($sql); 
    if($result->num_rows === 0) { echo 'No Cars in selected time period.'; } 
    else { while ($row = $result->fetch_array()) { 
    ?>
    <div id="clickthrough2" class="col-5-6"><?php echo $row['car_details'] ?></div>
    <div class="col-1-6"><?php echo $row[ 'quantity']; ?></div>
    <?php } } ?>
    <a><div id="backref">< Back</div></a>
</div>
</div>

EDIT: I have tried the below be it did not work:

$('#backref').click(function () {
  $('.declined4').hide();
  $('.declined3').show();
});

Thomas West · Accepted Answer · 2015-01-09 16:24:23Z

1

Instead of reloading the div with the new content you could create a new div each time hiding the old one. You would then cycle through them by indexing each div with either an id or (probably better) a "data-" attribute.

answered Jan 9, 2015 at 16:24

Thomas West

362 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

n00bstacker Over a year ago

Do you have an example please? I have not heard of that method before.

n00bstacker Over a year ago

Do you mean here create a new div with jQuery :S. Or do you mean more the hide and unhide

Thomas West Over a year ago

In your code you are doing function (data) { $('#car1').html(data); }); Change that line to hide the div and put in a new div with the new html.

Collectives™ on Stack Overflow

Using jQuery to navigate between divs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related