Jump to content

Help with redirecting to specific nav-pill on same page


Recommended Posts

Good morning & Happy New Year.
I am fairly new to PHP and am having issue.
The issue is trying to redirect back to current page to a specific nav-pill after adding a new record to the associated MYSQL table.  My nav-pills are defined as follows:

<div class="container">
   <ul class="nav nav-pills nav-justified">
      <li class="active"><a data-toggle="pill" href="#pData">Project Data</a></li>
      <li><a data-toggle="pill" href="#pReceipts">Project Receipts</a></li>
      <li><a data-toggle="pill" href="#Tasks">Tasks</a></li>
   </ul>
</div>

After posting a new receipt I would like to redirect back to #pReceipts pill to show the new entry.  I think I need some js to handle the redirect but can't seem to get it.  The current redirect command is

         if($result && mysqli_affected_rows($con) == 1){
            $session->msg('s',"Receipt Added ");
            redirect('edit_project.php?id='.$project['id'], false);
         } else {
            if (!$err_num) {
               $session->msg('d',' Error adding receipt!');
               redirect('edit_project.php?id='.$project['id'], false);
            } else {   
               $session->msg('d',' Error adding receipt!');
               redirect('edit_project.php?id='.$project['id'], false);
            }
         }   

This works but always show the active defined nav-pill.  Not sure how to redirect to a specific nav-pill.  Are there any good examples to accomplish the desired effect?  Trying to to refresh or redirect to the currently displayed view.

Rod

He is using bootstrap. Op, look up and learn how to use a html bookmarks and linking to them. That is the answer to your question.

 

Basically your URL will be page.php#bookmark

 

Or

 

page.php?id=123#bookmark

Edited by benanamen

I am using Bootstrap to setup navigation.  I have setup a menu scheme on the page that will display different forms for data entry.  The nav-pill is a button that causes a specific section (form) to be displayed.  After the user enters data (new entry or updates) and submits the data to the database I would like to refresh the page in the specific form so the user would see the changes in the data (verification).  Currently when the redirect command is executed the default view is displayed.  Thus the user would have to re-select the appropriate button to re-display the edited form.

 

Hope that explains what I am trying to do.

I have tried the page.php#bookmark approach but still do not get the desired results.  Here is the command that I am using:

 

                redirect('edit_project.php?id='.$project['id'].'#pReceipts', false);
 

which evaluates to

 

                 edit_project.php?id=1#pReceipts

 

still returns to the active defined nav-pill option   #pData

I dont know what this redirect is you have. It should be header with Location. You have not shown how you have the bookmark setup. If this doesnt work, your bookmarks are not done correctly. Bookmarks are simple.

 

Bookmark Link:

<a href="#C4">Jump to Chapter 4</a>

 

Bookmark Target:

<h2 id="C4">Chapter 4</h2>

 



die(header("Location: edit_project.php?id={$project['id']}#bookmark"));

Edited by benanamen

because the initial active pill/tab navigation and content is hard-coded into the markup, any request/redirect for the page will always go back to that specific navigation selection and content.

 

from a server-centric standpoint, you would need to dynamically output the class="active" selector in the correct navigation and add the 'in active' keywords to the class selector for the correct content section in order to achieve this.

Edited by mac_gyver

The problem is his bootstrap tab code is wrong. Nothing to do with the redirect.

 

OP, Your bootstrap tab code is wrong. Start with the code sample provided by bootstrap and make sure Tabs are working with the default tab code, then you can integrate your additional code.

Edited by benanamen

The redirect function is in my library and defined as:

function redirect($url, $permanent = false)
{
    if (headers_sent() === false)
    {
      header('Location: ' . $url, true, ($permanent === true) ? 301 : 302);
    }

    exit();
}
 

Is there a tutorial on dynamically outputting the class as active and changing the default active link as not active.  I am trying to learn more on making the app user friendly.  I think I will have to do more in javascript based on the command when the page opens.  The current page will have at least four panels that are access through the nav-pill navigation.  It works with basic functionality by clicking on the various nav-pill options.  However, after the user makes changes on one of the panels and submits the changes, I would like the user to automatically see the changes on the panel.

I have not found the issue with tab controls.  I am using the Toggable/Dynamic Pills example from Bootstrap.  From what I see the code appears to be working.  When I click any of the pills the proper panel appears and data can be modified (mainly working on the pReceipts panel).  When the add new receipt button is triggered the data is added to the database.  After the update the main screen appears and the other pills can be selected with proper panels being displayed.

 

So I guess I do not see what you have seen.  I do pay attention and try to verify code anytime the experienced  members spot something.  I am learning and may not find the issue as quickly as liked.  I responded to each reply as soon as possible.

 

I am continuing to look for the tab problem

 

Rod

because the navigation's active state and the content's display state is controlled by javascript, just adding a bookmark/anchor on the end of the url doesn't cause the client side code to 'work'. it does cause the browser to go to the correct place on the page (which is hidden in all but the hard-coded 'active' tab), but it does nothing to select the corresponding navigation tab or display the correct content.

 

here's why this won't work without extra code - https://github.com/twbs/bootstrap/issues/2415

 

and a client-centric solution, if you don't like the server-centric one - https://github.com/timabell/jquery-stickytabs

Okay, my bad. The tabs are not standard bookmarks. Add this Java-script to your page, then doing a normal bookmark URL as previously talked about will work. I have tested this. First new thing I learned this year. :happy-04:

<script>
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });

</script>

Complete working demo:

<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" rel="stylesheet" type="text/css">
  </head><body>

  <div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">Messages</div>
    <div role="tabpanel" class="tab-pane" id="settings">Settings</div>
  </div>

</div>

<p>
* Links must be copy/pasted to address bar. Will not work clicking here.<br>
<a href="#home">Home Link From Outside</a><br>
<a href="#profile">Profile Link From Outside</a><br>
<a href="#mesages">Messages Link From Outside</a><br>
<a href="#settings">Settings Link From Outside</a>
</p>

<script>
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });

</script>

</body></html>
Edited by benanamen
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.