CODEWITHSUNDEEP
phpjavascriptjqueryjquery-mobile
user2362601
user2362601

Reputation: 361

JavaScript file in JQuery Mobile not working on other pages

I have a JS file that has a list of countries and the states/districts in those countries. I have 1 jquery mobile page that has 3 forms and I have put the code to include the js files into the header. When I got to each anchor the first form will have the countries for me to choose but the other 2 forms don't. What's happening?

<?php
//allow sessions to be passed so we can see if the user is logged in
$sessionid = $_COOKIE["sessionid"];
session_id($sessionid);
session_start();

$expire=time()+60*60*24*30;
setcookie("sessionid", "$sessionid", $expire);

ob_start();

//connect to the database so we can check, edit, or insert data to 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 us access to the protect() function made earlier
include "./functions.php";

$userid = $_SESSION['uid'];
$lookupusername = mysql_query("SELECT * FROM users WHERE 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 too long to put in this post but here is a link to download the .js and shows the code to use to get it to work. Again it works on the first form but not the other 3.

http://bdhacker.wordpress.com/2009/11/21/adding-dropdown-country-state-list-dynamically-into-your-html-form-by-javascript/

Upvotes: 1

Views: 248

Answers (1)

Jack
Jack

Reputation: 10993

Your problem is that you are using the same id attribute multiple times on the same page. The id is supposed to be unique within a given page, if it's not then when retrieving the element by id you will usually only get the first occurrence.

AT a minimum for the plugin you are using you need to pass in the id of each select, so what you need to do is rename each of your selects (country and state) so that they are unique and then change the corresponding print_country methods to use that 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 do the same thing for your other two forms.

In general the simplest way to update multiple elements at the same time would be to use a class instead, for example add the country class to your country selects and then update it using the class selector 

 $('.country').val('YourValue');

As a side point you really separate all of your JavaScript code from the html, for example instead of a bunch of inline script tags you can have one at the bottom of your page. 

<script>
   $(function() {
       print_country("country1");
       print_country("country2");
       print_country("country3");
  });
</script>

Upvotes: 3

Related Questions