JQM - Panel - events not triggered after navigation

Question

I have the same problem that this post. But the solution doesnt work with my project.

I use ASP.NET MVC4 and JQM. I have one JS file loaded in the head section. I have a menu like this :

<a href="#left-panel" id="link-menu" class="ui-panel-animate"></a>
<div data-role="panel" id="left-panel" data-display="push">
  <ul data-role="listview">
   ...
  </ul>
</div>

my link menu CSS class :

#link-menu
{
  top: 3px;
  position: absolute;
  background: url("images/icons-36-white.png"); 
}

It's a image, it position is absolute. So when panel is opened i have to add :

.Menu-decalage {
  -webkit-transform: translate3d(272px,0,0);
  -moz-transform: translate3d(272px,0,0);
  transform: translate3d(272px,0,0);    
}

In my JS file i have added :

$(document).on('pagebeforeshow', function () {
  $("#left-panel").panel({
    beforeopen: function (event, ui) {
        $("#link-menu").addClass("Menu-decalage");
    },
    beforeclose: function (event, ui) {
        $("#link-menu").removeClass("Menu-decalage");
    }
});

It works when the first page is loaded, not after navigation. I have understood that the code is executed on the first page, and i have tried with :

$.mobile.activePage.find('#left-panel').panel();

but it doesn't work.

I have tried to change

$(document).on('pagebeforeshow', function () {

to

$(document).on('pageinit', function () {

but activePage is undefined.

So if someone can give me a solution : Thank you

@shanabus : Yes. left-panel is in the menu.html and I have `
Html.RenderPartial("Menu"); ...` — Bizet, Jul 31 '13 at 14:45

shanabus · Answer 1 · 2013-08-01T12:34:35.507

0

You are missing a }); in your $(document).on('pagebeforeshow'... section.

If that doesn't fix the problem post more of your html and that may help.

UPDATE

When the JS is run once (initial load), often times that means that your JS code is not part of the page. Try moving your pagebeforeshow binding inside of the page you want it bound in. So you would have:

<div id="page1" data-role="page">
  <div data-role="header">
  </div>

  <script>
  ... on pagebeforeshow method ...
  </script>

  <div data-role="content">
  </div>
</div>

edited Aug 01 '13 at 12:34

answered Jul 31 '13 at 15:19

shanabus

12,989
6
52
78

it's just an oversight and doesn't fix the problem. – Bizet Aug 01 '13 at 11:14
I have put the code in a Fiddle. You can't run because the version of JQM is 1.1.1. The problem is that the panel's triggers are executed on the first load of page. When I do a "redirection" the Js is reloaded and triggers not executed. – Bizet Aug 01 '13 at 12:08
Hi I have tried to add the code inside the page but i have the same problem. It doesnt work after navigation. – Bizet Aug 05 '13 at 07:38

score -1 · Accepted Answer · answered Aug 05 '13 at 08:31

-1

I have found a solution by adding the image in html with relative position and removing background image of the link.

thanks for your help

answered Aug 05 '13 at 08:31

Bizet

56
4

This answer seems to have nothing to do with the question you asked. – shanabus Aug 06 '13 at 12:46
Exactly, but I had no more time to look for a solution and i had to fix the problem... I don't like this solution and if I find better, I will add the new answer. – Bizet Aug 09 '13 at 08:41

JQM - Panel - events not triggered after navigation

2 Answers2