Saving the page title in a variable so that it is accessible after post

Question

I am trying to create a 'quick and simple' breadcrumb trail for my site. As my site will only ever have 3 levels, the final ever output could only be:

Home > Search Product (multiple product types) > Product Details

I have attempted to write a custom breadcrumb.

In effect, what I am doing is capturing the page title, and displaying that with HREF to the page URL. This works great when going from Home to perform a search:

Home > Search Chairs

However, after performing a search, and I click on an item I wish to view more detail about (my page performs a post), and once on the details page, my breadcrumb displays:

Home > Chair Details

What I was hoping for is:

Home > Search Chairs > Chair Details

Is there a way I can achieve this?

Current code:

function createBreadcrumb() {

alert($(document).find("title").text());

    var $pageTitle = $(document).find("title").text();
    var $pageURL = $(location).attr('href');

    $('.breadcrumb').html(('<a href="/">Home </a> > ') + ('<a href="' + $pageURL + '">' + $pageTitle + '</a> '));
}

****Update following Harrys suggestion:*

$(function() {
    /* create page breadcrumb on initial page load */
    createBreadcrumb();
});

function createBreadcrumb(oldPagePass) {

if (oldPagePass !== null && oldPagePass !== undefined) {

    var $pageTitle = $(document).find("title").text();
    var $pageURL = $(location).attr('href');

    $('.breadcrumb').html(oldAgePass + ('<a href="' + $pageURL + '">' + $pageTitle + '</a> '));
}  
else {
    alert($(document).find("title").text());

    var $pageTitle = $(document).find("title").text();
    var $pageURL = $(location).attr('href');

    $('.breadcrumb').html(('<a href="/">Home </a> > ') + ('<a href="' + $pageURL + '">' + $pageTitle + '</a> '));
  }    
}

.ajaxSuccess(function() {

var $pageTitle = $(document).find("title").text();
var $pageURL = $(location).attr('href');

var $oldPage = $('.breadcrumb').html(('<a href="/">Home </a> > ') + ('<a href="' + $pageURL + '">' + $pageTitle + '</a> '));

createBreadcrumb($oldPage);
});

Code Update:

jQuery Function

.on('click', '.searchResult', function() {
var row = $(this);
$('#resultForm > *').filter(':input').each(function(index, el) {
    var name = $(el).attr('name').slice(8).toLowerCase();
    var data = row.data(name);
    if (data !== 'undefined')
        $(el).val(data);
});

$('#resultForm').submit();
})

Search page form tag:

<form:form method="post" id="resultForm"> </form:form>

Answer 1

I wouldn't exactly recommend a JS based approach for this but if you are interested only in this option, the following algorithm/pseudo-code will help you:

Assumption: Your pages follow a strict Home > Search > Details structure and that the Details page cannot be called from anywhere but it's corresponding Search Page)

Is Page Type == Home? If yes, breacrumb = "Home" // This is because when it is Homepage, the breadcrumb is always just Home and no anchor needed because it will become a link to same page.

Is Page Type == Search? If yes, breadcrumb = "<a href='home.htm'>Home</a>" + "Current Page Title" // This is because your search page is always 2nd level and the first level is always home. Notice there is no link on the 2nd level because it actually is the current page.

Is Page Type == Details? If yes, breadcrumb = "<a href='home.htm'>Home</a>" + <a href='prev_page_url'>Previous Page Title</a> + "Current Page Title" //This is because we dont know what type of search page the previous page was. It could be Search Chairs or Search Tables or Search XX. Note again there is no link on 3rd level for reasons explained above.

So, in essence every page must be assigned a page type and based on that we decide what to show in the bread-crumb.

Now, let us see a sample:

1. User is in Homepage. Page Type = Home so breadcrumb = Home.
2. User clicks on Search for Chairs. In Search Chairs page, Page Type = Search, so breadcrumb would be Home > Search Chairs.
3. User clicks on View Details. Page Type = Details, so breadcrumb = Home > Search Chairs (from previous page) > View Chair Details.
4. User clicks on link to Search for Tables. Page Type = Search, so breadcrumb = Home > Search Tables. Previous page's breadcrumb is ignored.
5. User clicks on View Details. Page Type = Details, so breadcrumb = Home > Search Tables (from previous page) > View Table Details.
6. User clicks on Home link. Page Type = Home, so breadcrumb = Home. Previous page's breadcrumb is ignored.

This should overcome the issue that Sumurai8 had mentioned in this thread also.

A code sample is available here and here.