php - JQuery Mobile 中的 JavaScript 文件在其他页面上不起作用

标签 php javascript jquery jquery-mobile

我有一个 JS 文件，其中包含国家列表以及这些国家/地区的州/地区。我有 1 个 jquery 移动页面，它有 3 个表单，我已经将代码放入标题中以包含 js 文件。当我到达每个 anchor 时，第一个表格将有国家供我选择，但其他 2 个表格没有。发生了什么事？

<?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>

国家.js

这篇文章太长了，但这里有一个下载 .js 的链接，并显示了用于使其工作的代码。同样，它适用于第一种形式，但不适用于其他 3 种形式。

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

最佳答案

您的问题是您使用的是相同的 id在同一页面上多次属性。 id 应该在给定页面中是唯一的，如果不是，则在通过 id 检索元素时通常只会得到第一次出现。

至少对于您正在使用的插件，您需要传入每个选择的 ID，因此您需要做的是重命名您的每个选择(国家和州)，以便它们是唯一的，然后更改相应的print_country 使用该 id 的方法

例如

  <select onchange="print_state('state1',this.selectedIndex);" //note state1
   id="country1" class="country" name = "country"></select>

...

 <script language="javascript">print_country("country1");</script>

对其他两个表单执行相同的操作。

一般来说，同时更新多个元素的最简单方法是使用 class相反，例如将国家/地区类添加到您的国家/地区 select 中，然后使用类选择器

更新它 
 $('.country').val('YourValue');

作为一个方面，您确实将所有 JavaScript 代码与 html 分开，例如，您可以在页面底部放置一个，而不是一堆内联脚本标记。 

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

关于php - JQuery Mobile 中的 JavaScript 文件在其他页面上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18257837/

上一篇：javascript - Three.js 各种大小的粒子

下一篇：javascript - 更新 Highchart 数据表单导出按钮

相关文章：

php - 获取字符串摘录中的所有段落

php - 写入文本文件并更新数据库

javascript - 页面和母版页中的 pageLoad 函数

javascript - 停止 ASP.NET 表单(单选按钮列表)内的回发 - 返回 false 且 PreventDefault 不起作用

asp.net - 如何强制在成功函数中完成的 DOM 修改保留在 jQuery.Ajax() 调用中？

PHP MySQL 插入具有不同 ID 的多行

php - 使用 while 循环和 if 语句从不同表中获取数据

javascript - 获取相对于窗口的 HTML 元素边界框的正确方法是什么？

javascript - 更改事件处理函数中的变量值

javascript - 使用 Jquery/Javascript 进行多实例音频播放

©2024 IT工具网  联系我们