Jquery Mobile, Panel event only triggered if placed in external .js

问题

Trying to implement panel event without success

using this code in

$(document).on("panelbeforeopen", "#leftpane", function(event, ui ){  //
alert("panelbeforeopen");

        var disableForm = "<?php echo ($_SESSION['user'] == '' ? 'true' :      'false') ?>";
        if(disableForm){
              alert("form disabled");
            }else{
              alert("form enabled");
            }
    });

This will result in just working if i refresh the page totally. If i put it in my included .js file it works without refreshing the page but PHP function to get user in session will be trick.. I dont want to solve it that way.

my header looks like this:

  <head>
  <title>Titel</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-  1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="_js/javascript.js"></script>

<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>

html

<body>
<div data-role="page" id="menu"> 
  <!-- Panels begins here  -------------------------------------------------------------------------->
  <div data-role="panel" id="leftpane" data-position="left" data-swipe-close="true" data-display="overlay" data-theme="a">
<h4 id="loginTitel">Login</h4>
<p id="output"></p>
<div id="formDiv">
    <form id="loginForm" >
      <label for="usn" class="ui-hidden-accessible">Username : </label>
      <input type="text" maxlength="25" placeholder="username" data-mini="true" required autofocus name="username" />
      <label for="passwd" class="ui-hidden-accessible">Password : </label>
      <input type="password" maxlength="25" placeholder="password" data-mini="true" required autofocus name="password" />
      <input name="action" type="hidden" value="login" />
      <button data-theme="b" id="submit" data-mini="true" type="submit">Login</button>
    </form>
 </div>
    <p />
  </div>
  <!-- /leftpanel -->

  <div data-role="panel" id="infoPanel" data-display="overlay" data-position="right" data-theme="b">
    <h2>Information</h2>
    <p>content</p>
  </div>
  <!-- /rightpanel --> 
  <!-- Panels end here  -------------------------------------------------------------------------->
  <div data-role="header" position="inline"><a href="#leftpane" data-icon="lock" data-iconpos="notext" class="ui-btn-left"></a><img src="_pic/globe.png" alt="Low resolution logo" class="align-right"/><a href="#infoPanel" data-icon="info" data-iconpos="notext" class="ui-btn-right"></a>
    <h1>JQM Site</h1>
    </header>
  </div>
  <div data-role="content" id="content">
    <h4>Titel</h4>
    <p>
      content
    </p>

  </div>
  <footer data-role="footer" class="ui-body-c" data-position="fixed"> </footer>
</div>

Main function I´m trying to reach here is to make a check if user session exist and show content in leftpanel depending on result of Session.

maby I´m approaching this all wrong? an example would be much helpful

来源：https://stackoverflow.com/questions/21913601/jquery-mobile-panel-event-only-triggered-if-placed-in-external-js

标签

javascript

php

jquery-mobile