CODEWITHSUNDEEP
phpjquery
user67680
user67680

Reputation: 21

maintain jquery event from one php page to another

I am having this situation: - having a php page - having a jQuery script that collapses a menu - clicking on one of the collapsed elements to load another page by passing variable(s) in php

Problem: - jQuery script reloads too and cancels my previous choice.

Here is an example. I click on "Menu", jQuery script acts on "collapser" but when I click on the "Fish" link (or other), I got the page displayed but the menu will not be shown as collapsed.

What I want to achieve: - to keep the menu collapsed while moving from one page to another

here is a php code sample.

echo rightMenu();
function rightMenu(){

    $r  = '';

    $r .= '<ul id="collapser"><li>Menu<ul>';
    $r .= '<li><a href="main.php?show=page1">Fish</a></li>';
    $r .= '<li><a href="main.php?show=page2">Vegetables</a></li>';
    $r .= '<li><a href="main.php?show=page3">Meat</a></li></ul>';
    $r .= '</li></ul>';

    return $r;
};

Thank you, Myriam

Upvotes: 1

Views: 133

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191749

If you include jQuery.cookie, you can use a cookie to do it, which should be simpler:

$("#collapser").click(function () {
   //change to more appropriate value
   $.cookie('autocollapse', $(this).is(":visible"), {expires: 30});
});

//initial page load
if ($.cookie('autocollapse')) {
   $("#collapser").click();
}

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191749

When collapse is clicked, you can send an ajax request that records a session variable of some sort that indicates collapse:

//Your collapser click function
//record hidden status in data
$("#collapser").click(function () {
   if ($(this).data('hidden')) {
      $(this).slideDown().data('hidden', false);
   }
   else {
      $(this).slideUp().data('hidden', true);
   }
   //record hidden (collapsed) status on the server
   $.post('/record-collapser-hide.php', {'hidden': $(this).data('hidden')});
});

//On initial page load, collapse if #autocollapse is in the DOM
//Added by PHP code below
if ($("#autocollapse").length) {
   $("#collapser").data('hidden', false).click();
}


//--- record-collapser-hide.php ---
session_start();
$_SESSION['collapsercollapsed'] = isset($_POST['hidden']) ? $_POST['hidden'] : 0;


//--- function rightMenu() ---
...
$r .= '</li></ul>';
if (isset($_SESSION['collapsercollapsed']) && $_SESSION['collapsercollapsed']) {
   $r .= "<span style='display: none' id='autocollapse'>&nbsp;</span>";
}

NOTE: This code will most likely not work as-is, but you should be able to follow the basic idea.

Upvotes: 0

Related Questions