0

I have two pages, main and search. On select of "Search name", I am able to redirect to the search page. But by clicking on "view source", I can see only the main page code and not the search page. So apparently the javascript written for the search click event in the search page is not working.

Main page

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="Content/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="Scripts/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
        <title>Main Menu</title>
        <script type="text/javascript" charset="utf-8">
            function Search_onclick() {

                $.mobile.changePage("SearchPage.html");
            }
        </script>
    </head>
    <body>
        <div data-role="page" id="mainmenu">
            <div data-role="main" class="ui-content">
                <h2>
                    Action:</h2>
                <ul data-role="listview">
                    <li><a href="#" onclick="Search_onclick()">Search Name</a></li>
                    <li><a href="#">Add Name</a></li>
                    <li><a href="#">Edit Name</a></li>
                    <li><a href="#">Delete Name</a></li>
                </ul>
            </div>
        </div>
    </body>
    </html>

Search page

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="Content/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
    <title>Search Name</title>
    <script type="text/javascript" charset="utf-8">
        function Search_onclick() {

            alert("search");
        }
    </script>
</head>
<body>
    <div data-role="page" id="Searchpage">
        <div data-role="main" class="ui-content">
            <input type="search" name="search" id="search" placeholder="Search for name...">
            <input id="btnsearch" type="button" data-inline="true" value="search" onclick="Search_onclick()">
            <a href="mainmenu.html" class="ui-btn">Main Menu</a>
        </div>
    </div>
</body>
</html>
Eric Hartford
  • 16,464
  • 4
  • 33
  • 50
  • place code of search page inside _page div_. related: http://stackoverflow.com/a/20293189/1771795 – Omar Mar 18 '14 at 12:32
  • "place code of search page inside page div ". would you please paste the correct code here.There is no problem on page redirect but search event click event is not fired. – user3433027 Mar 18 '14 at 12:43
  • I know, alert isn't firing on search page, right? if yes, place JS ode inside `
    ` to be retrieved by Ajax when you change page from main to search.
    – Omar Mar 18 '14 at 12:45
  • It is not working.
    – user3433027 Mar 18 '14 at 13:26
  • good, now add this `$(document).on("pagecreate", "#Searchpage", function () { function Search_onclick() { alert("search"); } });` – Omar Mar 18 '14 at 13:35

0 Answers0