php - JavaScript file in JQuery Mobile not working on other pages -
i have js file has list of countries , states/districts in countries. have 1 jquery mobile page has 3 forms , have put code include js files header. when got each anchor first form have countries me choose other 2 forms don't. what's happening?
<?php //allow sessions passed can see if user logged in $sessionid = $_cookie["sessionid"]; session_id($sessionid); session_start(); $expire=time()+60*60*24*30; setcookie("sessionid", "$sessionid", $expire); ob_start(); //connect database can check, edit, or insert data our users table $con = mysql_connect(***db info***) or die(mysql_error()); $db = mysql_select_db(***dbinfo***, $con) or die(mysql_error()); //include out functions file giving access protect() function made earlier include "./functions.php"; $userid = $_session['uid']; $lookupusername = mysql_query("select * users id='$userid'"); $row = mysql_fetch_assoc($lookupusername); $username = $row['username']; $usercountry = $row['country']; if ($username == ""){ header('location: index.php'); } ?> <!doctype html> <html> <head> <script type= "text/javascript" src = "countries.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>15:11 project mobile</title> <link rel="stylesheet" href="css/jquery.mobile-1.3.0.css" /> <link href="font-awesome/css/font-awesome.css" rel="stylesheet"> <script src="js/jquery-1.8.3.js"></script> <script src="js/jquery.mobile-1.3.0.js"></script> </head> <body> <!-- begin page 2 --> <div data-role="page" id="submit"> <div data-role="panel" id="settingspanel" data-position="left" data-display="overlay"> <ul data-role="controlgroup"> <li><a href="#submit" data-role="button">page two</a></li> <li><a href="#browse" data-role="button">page three</a></li> <li><a href="#projects" data-role="button">page four</a></li> <li><a href="log_out.php" data-role="button">logout</a></li> </ul> </div> <div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;"> <a href="#settingspanel" data-role="button" data-iconpos="notext" class="icon-reorder icon-2x" style="background: none; margin-left: 20px;"></a> <center><img src="images/logo_app_white.png" width="30px"></center> </div> <div data-role="content"> <tr><td>country: </td><td><select onchange="print_state('state',this.selectedindex);" id="country" name = "country"></select></td></tr> <tr><td>district/state: </td><td><select name ="state" id = "state"></select><script language="javascript">print_country("country");</script></td></tr> <tr><td><font color="red">*</font>city: </td><td><input type="text" name="city" /></td></tr> </div> <div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;"> <div data-role="navbar" style="background: #ce8339;"> <ul> <li><a href="#feed" class="icon-tasks icon-2x">my feed</a></li> <li><a href="#submit"class="icon-upload icon-2x">submit</a></li> <li><a href="#browse" class="icon-search icon-2x">browse</a></li> <li><a href="#projects" class="icon-folder-open-alt icon-2x">projects</a></li> </ul> </div><!-- /navbar --> </div> </div> <!-- end page 2 --> <!-- begin page org --> <div data-role="page" id="submitorg"> <div data-role="panel" id="settingspanel" data-position="left" data-display="overlay"> <ul data-role="controlgroup"> <li><a href="#submit" data-role="button">page two</a></li> <li><a href="#browse" data-role="button">page three</a></li> <li><a href="#projects" data-role="button">page four</a></li> <li><a href="log_out.php" data-role="button">logout</a></li> </ul> </div> <div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;"> <a href="#settingspanel" data-role="button" data-iconpos="notext" class="icon-reorder icon-2x" style="background: none; margin-left: 20px;"></a> <center><img src="images/logo_app_white.png" width="30px"></center> </div> <div data-role="content"> <tr><td>country: </td><td><select onchange="print_state('state',this.selectedindex);" id="country" name = "country"></select></td></tr> <tr><td>district/state: </td><td><select name ="state" id = "state"></select><script language="javascript">print_country("country");</script></td></tr> <tr><td><font color="red">*</font>city: </td><td><input type="text" name="city" /></td></tr> </div> <div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;"> <div data-role="navbar" style="background: #ce8339;"> <ul> <li><a href="#feed" class="icon-tasks icon-2x">my feed</a></li> <li><a href="#submit"class="icon-upload icon-2x">submit</a></li> <li><a href="#browse" class="icon-search icon-2x">browse</a></li> <li><a href="#projects" class="icon-folder-open-alt icon-2x">projects</a></li> </ul> </div><!-- /navbar --> </div> </div> <!-- end page org --> <!-- begin page miss --> <div data-role="page" id="submitmiss"> <div data-role="panel" id="settingspanel" data-position="left" data-display="overlay"> <ul data-role="controlgroup"> <li><a href="#submit" data-role="button">page two</a></li> <li><a href="#browse" data-role="button">page three</a></li> <li><a href="#projects" data-role="button">page four</a></li> <li><a href="log_out.php" data-role="button">logout</a></li> </ul> </div> <div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;"> <a href="#settingspanel" data-role="button" data-iconpos="notext" class="icon-reorder icon-2x" style="background: none; margin-left: 20px;"></a> <center><img src="images/logo_app_white.png" width="30px"></center> </div> <div data-role="content"> <tr><td>country: </td><td><select onchange="print_state('state',this.selectedindex);" id="country" name = "country"></select></td></tr> <tr><td>district/state: </td><td><select name ="state" id = "state"></select><script language="javascript">print_country("country");</script></td></tr> <tr><td><font color="red">*</font>city: </td><td><input type="text" name="city" /></td></tr> </div> <div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;"> <div data-role="navbar" style="background: #ce8339;"> <ul> <li><a href="#feed" class="icon-tasks icon-2x">my feed</a></li> <li><a href="#submit"class="icon-upload icon-2x">submit</a></li> <li><a href="#browse" class="icon-search icon-2x">browse</a></li> <li><a href="#projects" class="icon-folder-open-alt icon-2x">projects</a></li> </ul> </div><!-- /navbar --> </div> </div> <!-- end page miss --> </body> </html> countries.js
it's long put in post here link download .js , shows code use work. again works on first form not other 3.
http://bdhacker.wordpress.com/2009/11/21/adding-dropdown-country-state-list-dynamically-into-your-html-form-by-javascript/
your problem using same id attribute multiple times on same page. id supposed unique within given page, if it's not when retrieving element id first occurrence.
at minimum plugin using need pass in id of each select, need rename each of selects (country , state) unique , change corresponding print_country methods use id
for example
<select onchange="print_state('state1',this.selectedindex);" //note state1 id="country1" class="country" name = "country"></select> ...
<script language="javascript">print_country("country1");</script> and same thing other 2 forms.
in general simplest way update multiple elements @ same time use class instead, example add country class country selects , update using class selector
$('.country').val('yourvalue'); as side point separate of javascript code html, example instead of bunch of inline script tags can have 1 @ bottom of page.
<script> $(function() { print_country("country1"); print_country("country2"); print_country("country3"); }); </script>
Comments
Post a Comment