Databases
StackOverflow2013
Postsdbo
POCreate breadcrumbs dynamically on client side using javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreate breadcrumbs dynamically on client side using javascript
    primarykey
    data
    text
    <p>I want to create <strong>breadcrumbs dynamically on client side using java script</strong>. The breadcrumbs will be the <strong>path followed by user</strong> while navigation as: <strong>Home > about us > our history..</strong></p> <p>The anchor tags will be generated on each page in the sequence in which the user navigate.</p> <p>Now I can create these breadcrumbs using server side technology easily but I want to generate it dynamically on each page on client side. Now I don't know exactly how to implement it.</p> <p>Some logic in my mind is as: </p> <ol> <li><p>Create an <strong>object type variable</strong> in java script with a <strong>name</strong> and <strong>value pair</strong> where <strong>name</strong> is the <strong>name of current</strong> page and <strong>value</strong> is the <strong>url of that page</strong>. </p></li> <li><p>Now pass this object variable using <strong>query string</strong> while navigating from one page to other.</p></li> <li><p>Then in the second page get that object variable from query string and extract the name and value pair from that object and then using that create the anchor and add it to targeted div (place holder). </p></li> <li><p>Again when user goes to another page <strong>add the name and value pairs</strong> for all the <strong>previous pages</strong> along with the <strong>name and value pair</strong> for current page at the last in the <strong>object variable</strong> and pass it to next page using <strong>query string</strong>. </p></li> <li><p>Now in next page <strong>do the same</strong> and create anchors.</p></li> </ol> <p>Some what similar I got <a href="http://jsfiddle.net/JcZun/1/" rel="nofollow">here</a> using html5 client side storage as: <strong>html:</strong></p> <pre><code>&lt;ul id="navigation_links"&gt; &lt;li&gt;Page1&lt;/li&gt; &lt;li&gt;Page2&lt;/li&gt; &lt;li&gt;Page3&lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>js:</strong></p> <pre><code>$(document).ready(function(){ bindEventToNavigation(); }); function bindEventToNavigation(){ $.each($("#navigation_links &gt; li"), function(index, element){ $(element).click(function(event){ breadcrumbStateSaver($(event.currentTarget).html()); showBreadCrumb(); }); }); } function breadcrumbStateSaver(text){ //here we'll check if the browser has storage capabilities if(typeof(Storage) != "undefined"){ if(sessionStorage.breadcrumb){ //this is how you retrieve the breadcrumb from the storage var breadcrumb = sessionStorage.breadcrumb; sessionStorage.breadcrumb = breadcrumb + " &gt;&gt; "+text; } else { sessionStorage.breadcrumb = ""+text; } } //if not you can build in a failover with cookies } function showBreadCrumb(){ $("#breadcrumb").html(sessionStorage.breadcrumb); } &lt;div id="breadcrumb"&gt;&lt;/div&gt; </code></pre> <p>but here instead of creating hyperlinked anchors it is creating simple text, whereas I want the breadcrumbs to be anchors and hyperlinked to their respective pages.</p> <p>I am new to java script and don't know how to implement this. If you have any better logic and solution for this please tell me.</p> <p>thanks in advance.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USSaurabh Palatkar
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCreate breadcrumbs dynamically on client side using javascript
      1. USSaurabh Palatkar
      1. VTFavorite
    2. VO
      singulars
      1. POCreate breadcrumbs dynamically on client side using javascript
      1. USRhushikesh
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload