How to postion the text at its original space after revisiting the same link?

Question

My question sounds bit confusing. Let me explain you in detail what my requirement is. I'm using php, smarty, ajax and jquery. I'm putting a web address and pass one value in query string to the page as follows:

http://localhost/schooling_needs/sneeds1.0/web/teacher_details.php?teacher_id=5ed39ad1bce91ebc071f859cc76dea66

Then the following page gets loaded(screen shot attached). enter image description here

Then If click on any of class name it's subjects gets displayed, I used ajax() method of jquery to achieve this. Then if I click on any of the subjects then the chapters of that subjects gets displayed, I also used ajax() for this. It looks like the in the screen shot attached. enter image description here

Now when I click on any of the chapters from the chapter list the page redirects to the next page. I passed few values with the hyperlink in the form of query string(you will get to know those values from the code). Then the new page appears as attached in this screen shot. enter image description here

Now from here onwards my problem starts when I should click on Back link it is expected to look every thing as it is when I clicked on the subject chapter, but actually how it looks is attached in this enter image description here screen shot. Actually it should be displayed like in screen shot 2

As you can see from the screen shot the content is getting displayed in the left corner. This is happening because I'm using ajax first through subsequent requests but when I click on Back link the ajax is not getting called so it's not displaying at proper location. For your reference I'm giving the code of my PHP files as well as smarty template files:

teacher_details.php

<?php  
  require_once("includes/public-application-header.php");

  ob_start();
  prepare_request();
  $request = empty( $_GET ) ? $_POST : $_GET ;
  $op = $request['op']; 
  $objTeacherDetails = new TeacherDetails();
  if (isset($_GET['teacher_id'])){
            $teacher_id = $_GET['teacher_id'];
        $_SESSION['teacher_id'] = $teacher_id;
        } elseif (isset($_SESSION['teacher_id'])) {
            $teacher_id = $_SESSION['teacher_id'];
    }
    $teacher_classes = $objTeacherDetails->GetAllClassesByTeacherId($teacher_id);
    $smarty->assign('teacher_classes', $teacher_classes);
  $file_to_show = "teacher-details.tpl";

switch( $op ) {
    case "get_assigned_subject_list":
        $objClassSubjects = new ClassSubjects();
        $objSubjects = new Subjects();
        $class_id  = $request['class_id'];
        $all_subjects = $objSubjects->GetAllSubjects();
        $subject_details = $objClassSubjects-> GetClassSubjectDetailsById($class_id);

        $smarty->assign('all_subjects', $all_subjects);
        $smarty->assign('subject_details', $subject_details);
        $smarty->assign('teacher_id', $teacher_id); 
        $smarty->assign('class_id', $class_id);
        $smarty->display("assigned-subject-list.tpl");

        die();
        break;

  case "get_subject_chapter_list":
        $objChapters = new AdminChapters();
        $cs_map_id   = $request['cs_map_id'];
        $class_id = $request['class_id'];
        $chapter_details = $objChapters->GetAllChaptersBycsmapId($cs_map_id);

        $smarty->assign('class_id', $class_id);
        $smarty->assign('teacher_id', $teacher_id);
        $smarty->assign('cs_map_id', $cs_map_id);
        $smarty->assign('chapter_details', $chapter_details);   
        $smarty->display("chapter-by-subject.tpl");

        die();
        break;

        case "back":
        $objClassSubjects = new ClassSubjects();
        $objSubjects = new Subjects();
        $objChapters = new AdminChapters();

        $teacher_id  = $request['teacher_id'];
        $class_id  = $request['class_id'];
        $cs_map_id  = $request['cs_map_id'];

        $all_subjects = $objSubjects->GetAllSubjects();
        $subject_details = $objClassSubjects-> GetClassSubjectDetailsById($class_id);
        $chapter_details = $objChapters->GetAllChaptersBycsmapId($cs_map_id);


        $smarty->assign('all_subjects', $all_subjects);
        $smarty->assign('subject_details', $subject_details);
        $smarty->assign('teacher_id', $teacher_id); 
        $smarty->assign('class_id', $class_id);
        $smarty->display("assigned-subject-list.tpl");
        $smarty->assign('class_id', $class_id);
        $smarty->assign('teacher_id', $teacher_id);
        $smarty->assign('cs_map_id', $cs_map_id);
        $smarty->assign('chapter_details', $chapter_details);   
        $smarty->display("chapter-by-subject.tpl");
        //die();
        //break;

}

  $smarty->assign("file_to_show", $file_to_show);
  $smarty->display("index.tpl");    

?>

class_details.php

<?php 
  require_once("includes/public-application-header.php");
  ob_start();
  prepare_request();
  $request = empty( $_GET ) ? $_POST : $_GET ; 
  $class_id = $request['class_id'];
  $teacher_id = $request['teacher_id'];
  $cs_map_id = $request['cs_map_id'];
  $chapter_id = $request['chapter_id'];

  $op = $request['op'];

  switch( $op ) {
    case "get_chapter_theory":
      $objChapters = new AdminChapters();
      $chapter_theory_details = $objChapters->GetChapterDetailsByID($chapter_id);

      $smarty->assign('class_id', $class_id);
      $smarty->assign('teacher_id', $teacher_id);
      $smarty->assign('cs_map_id', $cs_map_id); 
      $smarty->assign('chapter_theory_details', $chapter_theory_details); 
      $smarty->display("chapter-theory-by-chapter.tpl");

      die();
      break;

    case "get_chapter_questions":
      $objChapterQuestions = new ChapterQuestions();
      $chapter_questions = $objChapterQuestions->GetChapterQuestionByChapterID($chapter_id);

      $smarty->assign('chapter_questions', $chapter_questions); 
      $smarty->display("chapter-questions-by-chapter.tpl");

      die();
      break;

    case "get_chapter_ppts":
      $objChapterPpts = new ChapterPpts();
      $chapter_ppts =  $objChapterPpts->GetChapterPptsByPptChapterID($chapter_id);

      $smarty->assign('chapter_ppts', $chapter_ppts); 
      $smarty->display("chapter-ppts-by-chapter.tpl");

      die();
      break;

    case "get_chapter_mcqs":
      $objChapterMcqQuestions = new ChapterMcqQuestions();
      $chapter_mcqs =  $objChapterMcqQuestions->GetChapterMcqQuestionsByChapterID($chapter_id);

      $smarty->assign('chapter_mcqs', $chapter_mcqs); 
      $smarty->display("chapter-mcqs-by-chapter.tpl");

      die();
      break;

    case "get_chapter_yvideos":
      $objChapterYoutubeVideos = new ChapterYoutubeVideos();
      $chapter_yvideos =  $objChapterYoutubeVideos->GetYoutubeVideoByChapterID($chapter_id);

      $smarty->assign('chapter_yvideos', $chapter_yvideos); 
      $smarty->display("chapter-yvideos-by-chapter.tpl");

      die();
      break;
  }
    ?>

teacher_details.tpl

{literal}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function get_subjects_by_class(class_id) { 
    $.ajax({
                url: "teacher_details.php",
          type: "POST",
                data: {'request_type':'ajax', 'op':'get_assigned_subject_list', 'class_id':class_id},  
                success: function(data) {
                $('#subject_container').html(data);
            }
    });
}
</script>
{/literal}
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
    <tr>
        <td align="left" valign="top">
          <h3>Teacher Details</h3>
        </td>
    </tr>
</table>
<table width="99%" border="0" cellpadding="0" cellspacing="0" class="manage_box" >
    <tr>
      <td>
        <form>
                <table>
          <tr>
            <td align="center">
            {if $teacher_classes}
            Classes
            </td>   
            {if $teacher_classes}
            {foreach from=$teacher_classes item="class"}
          </tr>
          <tr>
            <td valign="top" align="center" width="20">
              <a href="#" onClick="get_subjects_by_class({$class.class_id}); return false;">{$class.class_name}</a>
            </td>
            {/foreach}
            {/if}
          </tr>
            {/if}
        </table>
            </form>                     
        </td>
    <td align="left" id="subject_container" valign="top">
    </td>
    <td align="left" id="chapter_container" valign="top">
    </td>
  </tr>
</table>

assigned-subject-list.tpl

{literal}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function get_chapters_by_subject(cs_map_id,class_id) { 
  $.ajax({
          url: "teacher_details.php",
          type: "POST",
          data: {'request_type':'ajax', 'op':'get_subject_chapter_list', 'cs_map_id':cs_map_id, 'class_id':class_id},  
          success: function(data) {
            $('#chapter_container').html(data);
        }
    });
}
</script>
{/literal}
<form>
  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center">
      {if $subject_details}  
      Subjects
      </td>
      {foreach from=$all_subjects item=subjects}
    </tr>
    <tr>
      <td align="center" valign="top" width="150">
      {foreach from=$subject_details item=subject} 
      {if $subject.cs_subject_id==$subjects.subject_id}<a href="#" onClick="get_chapters_by_subject({$subject.cs_map_id},{$class_id}); return false;">{$subjects.subject_name}</a>{/if}
      {/foreach}
      </td>
      {/foreach}
    </tr>
      {/if}
  </table>
</form>

chapter-by-subject.tpl

<form>
  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center">
      {if $chapter_details}  
      Chapters
      </td>
    </tr>
    {foreach from=$chapter_details item=chapter} 
    <tr>
      <td align="center" valign="top" width="150">
      <a href="{$site_url}chapter_details.php?class_id={$class_id}&teacher_id={$teacher_id}&cs_map_id={$cs_map_id}&chapter_id={$chapter.chapter_id}&op=get_chapter_theory" title="Chapter's Theory">{$chapter.chapter_title}</a>
      </td>      
    </tr>
    {/foreach}
      {/if}
  </table>
</form>

chapter-theory-by-chapter.tpl

{literal}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function get_chapter_details(op,chapter_id) { 
  $.ajax({
          url: "chapter_details.php",
          type: "POST",
          data: {'request_type':'ajax', 'op':op, 'chapter_id':chapter_id},  
          success: function(data) {
            $('#chaper_data_container').html(data);
        }
    });
}
</script>
{/literal}
<form>
  <table cellpadding="0" cellspacing="0" border="0"> 
    <tr>
      <td align="center" colspan="5">
      {if $chapter_theory_details}  
      <h2>Chapter's Theory</h2>
      </td>
    </tr>
    <tr>
      <td align="center">
      <b><a href="#" onClick="get_chapter_details('get_chapter_questions',{$chapter_theory_details.chapter_id}); return false;">Chapter Questions</a></b>&nbsp;&nbsp;
      </td>
      <td align="center">
      <b><a href="#" onClick="get_chapter_details('get_chapter_ppts',{$chapter_theory_details.chapter_id}); return false;">Chapter PPTs</a></b>&nbsp;&nbsp;
      </td>
      <td align="center">
      <b><a href="#" onClick="get_chapter_details('get_chapter_mcqs',{$chapter_theory_details.chapter_id}); return false;">Chapter MCQs</a></b>&nbsp;&nbsp;
      </td>
      <td align="center">
      <b><a href="#" onClick="get_chapter_details('get_chapter_yvideos',{$chapter_theory_details.chapter_id}); return false;">Chapter Youtube Videos</a></b>&nbsp;&nbsp;
      </td>
      <td align="center">
      <b><a href="{$site_url}teacher_details.php?class_id={$class_id}&teacher_id={$teacher_id}&cs_map_id={$cs_map_id}&op=back" title="Chapter's Theory">
      Back</a></b>&nbsp;&nbsp;
      </td>
    </tr>
    <tr>
      <td  align="center" valign="top" colspan="5">
      {$chapter_theory_details.chapter_data}
      </td>      
    </tr>
      {/if}
  </table>
    <div id="chaper_data_container">
    </div>
</form>

Now can anyone help me in putting the matter at its proper place after clicking on back button? Thanks in advance.

Could you not shorten the question a little to only include the necessary parts? — dsgriffin, May 24 '13 at 13:19
@Zenith: If I miss a single thing then it would not be able to understand my issue. For that purpose I've written in simple language. I'm fed up of finding the solution for this issue but couldn't get the solution yet. — PHPLover, May 24 '13 at 13:20
What is the value of `$request['op'];` when the page is re-submitted? — James Birkett, May 24 '13 at 13:36
@JamesBirkett: The value of op is as per mentioned in the ajax() call. e.g. in one of calls the value is get_subject_chapter_list — PHPLover, May 24 '13 at 13:38

score 1 · Answer 1 · edited May 23 '17 at 12:01

Your problem is that AJAX responses are not persisting in the history stack. You can tackle around this problem in several ways. But first of all please read the discussion on this here.

Use html5 history api or html5 local storage as suggested in one of the answer
Use simple hash based solution. For this, use a simple hash history plugin or write your own code.

EDIT: There are nice demos (along with snippets) with AJAX content. See this and this.

How to postion the text at its original space after revisiting the same link?

1 Answers1