Question

假设：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="format-detection" content="telephone-no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
        <title>Our Application</title>
        <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.2.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

        <script src="js/jquery.js"></script> <!-- added -->
        <script src="js/jquery.mobile-1.3.2.js"></script> <!-- added -->

        <script>
            function getSearchVars() {
                var src_priceMin = 500;

                $('#form1').submit(function () {
                    src_priceMin = $("#form_priceMin").val();
                });

                var searchQuery =
                    '{' +
                        ',"priceMin":' + src_priceMin +
                    '}';

                // encode variable
                var encVar = encodeURIComponent(searchQuery);

                return encVar;
            }

            var goUrl = encodeURIComponent("http://mysite.net/api/properties?json=" + getSearchVars()) + "&callback=?";
            var searchUrl = 'http://anotherSite.com/get/?url=' + goUrl;


            $(document).on("pageinit", function(){
                $("#search").live("pageshow", function(){
                    $('#form1').submit(function() {
                        searching = true;
                        var prcMin = $("#form_priceMin").val();

                        getResults();

                        $.mobile.changePage( "#src_page", { transition: "slide", changeHash: false });
                        return false;
                    });
                    return false;
                });        
            });

            function init() {
                document.addEventListener("deviceready", onDeviceReady, false);
            }

            function onDeviceReady() {
                // move navigator.geolocation to here later for device test
            }

            function getResults() {
                $.getJSON(searchUrl, function (data) {
                    console.log("Starting Results Fetch");
                    console.log(searchUrl);
                });
                return false;
            }
        </script>
    </head>
    <body onload="init()">
        <div id="home" data-role="page"  data-theme="c" data-title="Go: Home">    
            <div class="myLogo"><img src="img/go_my_logo.jpg" alt="Go my" /></div>

            <div data-role="controlgroup" id="searchField" >
                <label for="searchTitle">Find Prices:</label>
                <input type="text" name="name" id="searchPrc" value="" placeholder="enter price" data-mini="true" />
                <img src="img/srch_btn.png" alt="search button" />
            </div> <!-- search -->


            <div data-role="footer" data-position="fixed" data-id="vs_footer" data-theme="c">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-role="button" data-icon="home">Home</a></li>
                        <li><a href="#search" data-role="button" data-icon="search">Search</a></li>
                    </ul>
                </div> <!-- navbar -->
            </div> <!-- footer nav-->
        </div> <!-- home page -->

         <!-- search page -->
         <div data-role="page" id="search" data-theme="c">
            <div data-role="header" class="logo">
                <h1>Search</h1>
                <a href="#home">Home</a>
            </div>
            <div data-role="content" >
                <form id="form1">    
                    <div id="fnameDiv" data-role="fieldcontain">
                        <label for="form_priceMin">Min. Price:</label>
                        <input type="text" name="form_priceMin" id="form_priceMin" placeholder="Enter min price" />
                    </div>

                      <div id="submitDiv" data-role="fieldcontain">
                        <input type="submit" value="Submit" data-inline="true"/>
                    </div>
                </form>
            </div>
            <div class="modal"></div>

            <div data-role="footer" data-position="fixed" data-id="vs_footer">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-role="button" data-icon="home">Home</a></li>
                        <li><a href="#search" data-role="button" data-icon="search" class="ui-btn-active ui-state-persist">Search</a></li>
                    </ul>
                </div> <!-- navbar -->
            </div> <!-- footer nav-->
        </div> <!-- search page -->


    <!-- Search Results--->
    <div data-role="page" id="src_page">
        <div data-role="header">
            <h3>Search Results</h3>
        </div>
        <div data-role="content" id="src_content">

        </div>
        <div data-role="footer" data-position="fixed" data-id="vs_footer">
            <div data-role="navbar">
                <ul>
                    <li><a href="#home" data-role="button" data-icon="home">Home</a></li>
                    <li><a href="#search" data-role="button" data-icon="search">Search</a></li>
                </ul>
            </div> <!-- navbar -->
        </div> <!-- footer nav-->
    </div> <!-- Search Results -->
    </body>
</html>

我遇到的问题是，当我提交时，我的搜索网址中“priceMin”的值为“未定义”。

这是一个范围问题吗？我是否错误地引用了变量/表单字段？基本的想法是，人们可以在“搜索”页面中输入价格，单击“提交”，然后转到显示至少该价格的所有内容的结果页面。使用URL的目的是我使用api来显示某个价格的“东西”。我可以用静态值来做，但我从表单字段中获取值的调用不会产生任何数据。

移动应用程序jquery变量导致“未定义”

0 个答案: