CODEWITHSUNDEEP
jqueryjquery-mobile
Irene T.
Irene T.

Reputation: 1393

Jquery mobile Panel before open action

I am trying to do something before my panel opens but i have no luck... Actualy i want to load a file inside it with ajax, but unfortunately even alert doesn't work

<script type="text/javascript">
  $( "#nav-panelz" ).panel({
    beforeopen: function( event, ui ) { }
  });


$( "#nav-panelz" ).on( "panelbeforeopen", function( event, ui ) {
  alert('Before Open');
});

</script>

inside body

<div data-role="panel" data-display="push" data-theme="b" id="nav-panelz" style="z-index:250000;">

  <ul data-role="listview">
    <li data-icon="delete"><a href="#" data-rel="close" style="color:#09F;">Close menu</a></li>
<li><a href="#panel-responsive-page2">Accordion</a></li>
    <li><a href="#panel-responsive-page2">Ajax Navigation</a></li>
    <li><a href="#panel-responsive-page2">Autocomplete</a></li>
    <li><a href="#panel-responsive-page2">Buttons</a></li>
  </ul>
</div>

Any suggestions?

Upvotes: 2

Views: 1182

Answers (1)

ezanker
ezanker

Reputation: 24738

Try putting your code inside a jQuery Mobile page event like createpage:

$(document).on("pagecreate", "#page1", function () {
    $( "#menuA" ).on( "panelbeforeopen", function( event, ui ) {
        alert('Before Open');
        $("#pnlContent").html('<p>Dynamically added content</p>');
    });
});

Here is a DEMO

The way you have it now, the panel has probably not been enhanced/initialized yet when you are trying to attach to the event.

Upvotes: 3

Related Questions