Displaying a hidden div content using JQuery

Question

I am having two div tags. While clicking on the first div tag, an AJAX call takes place and the second div tag replaces the first one.

I am having the Back button in second div tag. While clicking on the Back button, I should be able to see the first div tag replaced by second div tag.

Here is my Razor code:

<div id="tag1" onclick="show_placedetail()>
    <a href="#" class="button button-small button-style3 butcurve-sml">View</a>
</div>

<div id="tag2">
    <a href="#" class="button button-small button-style4 butcurve-sml" onclick="show_placelist()">Back</a>
</div>

Here is my AJAX call:

@using (Ajax.BeginForm("Detail", "Places", new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "tag1",
    }, new { name = "PlaceDetailsForm", id = "PlaceDetailsForm" }))
{
    <input type="hidden" name="locationId" id="locationId" />
    <input type="hidden" name="distance" id="distance" />
}

And here is my JQuery:

function show_placedetail() {
    $('#tag1').hide();
    $('#PlaceDetailsForm').submit();
}

function show_placelist() {
    $('#tag2').hide();
    $('#tag1').show();
}

I have checked the .html() content of the first div tag is emptied after the AJAX call.

What should I do in order to display a div tag which had been replaced by another div tag during AJAX? Do I need to call another AJAX call to display the first div content?

Kindly advice.

Thanks in advance.

Answer 1

I got fixed my mistake.

Actually, I am replacing my first div by AJAX. Hence, it wont be available if I try to show it again. So I created a parent tag and put both of the tags within it. And I changes my InsertionMode option to InsertAfter.

Now it is working fine.

Here is my updated Razor code:

<div id="parent">
  <div id="tag1" onclick="show_placedetail()>
      <a href="#" class="button button-small button-style3 butcurve-sml">View</a>
  </div>

  <div id="tag2">
      <a href="#" class="button button-small button-style4 butcurve-sml"   onclick="show_placelist()">Back</a>
  </div>
</div>

And my updated AJAX code:

@using (Ajax.BeginForm("Detail", "Places", new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.InsertAfter,
        UpdateTargetId = "parent",
    }, new { name = "PlaceDetailsForm", id = "PlaceDetailsForm" }))
{
    <input type="hidden" name="locationId" id="locationId" />
    <input type="hidden" name="distance" id="distance" />
}