Help with redirecting to specific nav-pill on same page

[rodb]

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

[ginerjm]

Does this involve some framework or plug-in that you are using? What is a "nav-pill"? I see you have some classes similar to that term, but what are you really trying to do here?

[benanamen]

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 January 1, 2016 by benanamen

[rodb]

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.

[ginerjm]

You're using bootstrap per Benanamen. Greek to me! I'll say good bye

[rodb]

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

[ginerjm]

I'm gonna guess that the page reference is part of the url, not part of the query string. Try that.

[benanamen]

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 January 1, 2016 by benanamen

[rodb]

I appreciate the inputs however I am getting the same result.  Still shows the default form vs the pReceipts form.

I replaced the redirect command with the header command with the appropriate bookmark.

[benanamen]

Post the ENTIRE code so I can run it on my end.

[mac_gyver]

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 January 1, 2016 by mac_gyver

[benanamen]

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 January 1, 2016 by benanamen

[rodb]

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.

[benanamen]

Why, oh why do people not pay attention on here. You have a tab problem all by it self, let alone any redirecting.

[rodb]

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

[benanamen]

`

Edited January 1, 2016 by benanamen

[mac_gyver]

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

[benanamen]

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.

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

[benanamen]

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 January 2, 2016 by benanamen