Given:
<!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>Home</li>
<li>Search</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>
Home
</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>Home</li>
<li>Search</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>Home</li>
<li>Search</li>
</ul>
</div> <!-- navbar -->
</div> <!-- footer nav-->
</div> <!-- Search Results -->
</body>
</html>
The issue I'm running into is that when I submit, the value of "priceMin" in my search URL is "undefined".
Is this a scoping issue? Am I referencing the variable/form field incorrectly? The basic idea is that one would type in the Price in the Search page, click Submit, be taken to a results page displaying all things of at least that price. The purpose in the use of the URL is that I'm using an api to display "things" of a certain price. I can do it with the static value, but my call to get the value from the form field yields no data.
Related
I am trying to make an HTML page, that when users access, it will take them to a 3rd party external site (I have no control over), and fill in the username and password fields, and log them in.
This is the source of the external site, which I got from my browser.
<!DOCTYPE html>
<html><head>
<title>Omitted | Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var areActiveModsSelected = false;
var areInactiveModsSelected = false;
function SetActiveSelection()
{
var checkboxes = document.ActiveMods.getElementsByClassName("ModSelection");
areActiveModsSelected = !areActiveModsSelected;
SetSelection(checkboxes, areActiveModsSelected);
}
function SetInactiveSelection()
{
var checkboxes = document.InactiveMods.getElementsByClassName("ModSelection");
areInactiveModsSelected = !areInactiveModsSelected;
SetSelection(checkboxes, areInactiveModsSelected);
}
function SetSelection(checkboxes, isSelected)
{
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = isSelected;
}
}
function checkSavegame()
{
var e = document.getElementById("savegame");
if (e != null) {
var savegame = e.options[e.selectedIndex].text;
var isEmpty = isEmptySavegame(savegame);
document.getElementById("mapSelector").disabled = !isEmpty;
document.getElementById("difficultySelector").disabled = !isEmpty;
}
}
function isEmptySavegame(value)
{
var ret = value.match(/SAVEGAME \d\d* - Empty/g) || value.match(/SPIELSTAND \d\d* - Leer/g) || value.match(/SAUVEGARDE \d\d* - Vide/g);
return ret != null;
}
window.onload = function()
{
checkSavegame();
}
</script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/monitor.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/all.js"></script>
</head>
<body>
<div class="white-bg clearfix">
<header class="main-header" role="banner" data-module="sticky">
<div class="header-bar clearfix"> <div class = "row column"> <div class = "top-bar-right"> <ul class = "menu float-left"><li><a target="_newTwitter" href="https://twitter.com/url"><span class="icon icon-twitter"></span></a></li><li><a target="_newFacebook" href="https://www.facebook.com/giants.farming.simulator"><span class="icon icon-facebook"></span></a></li><li><a target="_newYoutube" href="http://www.youtube.com/user/giantssoftware"><span class="icon icon-youtube"></span></a></li><li><a target="_newGoogleolus" href="https://plus.google.com/109211762279175256996"><span class="icon icon-google"></span></a></li> </ul>
<ul class="dropdown menu float-right"><li class="is-dropdown-submenu-parent is-down-arrow menu-flags"><img src="img/icons/flag-en.png" alt="lang"><ul class="menu submenu is-dropdown-submenu first-sub vertical"><li><img style="border:1px solid #000;" src="img/icons/flag-en.png" alt="English"><span class="country">English</span> <span>(en)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-de.png" alt="Deutsch"><span class="country">Deutsch</span> <span>(de)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-fr.png" alt="Francais"><span class="country">Francais</span> <span>(fr)</span></li></ul></li></ul> </div>
</div>
</div>
<div class="top-bar"> <div class="row column"> <div class="top-bar-left"> <img src="img/logo.png"> </div> <div class="top-bar-right"> <ul class="menu float-left"> <li><span>HOME</span></li>
<li><span>SAVEGAMES</span></li>
<li><span>MODS</span></li>
<li><span>JOURNAL</span></li>
<li><div class="status-indicator online"><span>ONLINE</span></div></li></ul></div></div></div></header><section class="content-wrap"><div class="row"> <div class="medium-8 columns">
<img src="template/gsfs.png"><br/><br/><h2>Login to server</h2>
<p>Please enter your login credentials</p>
<div class="row column">
<form name="input" action="index.html?lang=en" method="POST"><div class="table2"><div class="row column table-even"><div class="medium-3 columns column-label">Username</div><div class="medium-9 columns"><input type="text" name="username" value=""></div></div><div class="row column table-odd"><div class="medium-3 columns column-label">Password</div><div class="medium-9 columns"><input type="password" name="password" value=""></div></div><div class="row column table-even text-right">
<input class="button button-form-submit" name="login" type="submit" value="Login"></div></div></form><br />
<h2>Dedicated Server Mobile App (Free)</h2><div><a class="itunesbadge" href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1135922781&mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:135px;height:40px;background-position: center;"></a><a class="googleplaybadge" href="https://play.google.com/store/apps/details?id=com.giantssoftware.fs17_dedi_app" style="margin-left: 5px; display:inline-block;overflow:hidden;background:url(https://play.google.com/intl/en_us/badges/images/apps/en-play-badge-border.png) no-repeat;width:141px;height:40px;background-size: cover;background-position-x: -4px;background-position-y: -3px;"></a></div></div>
</div>
<div class="medium-4 columns">
<div class="social-wrapper">
<div class="social-header clearfix">
<div class="title-wrap clearfix" style="line-height: 62px;">
<i class="icon icon-twitter"></i><span>Twitter</span>
</div>
Follow
</div>
<!-- Load from cache: ../cached/fs17_dedi_twitter_cache_farmingsim_4.json-->
<div class="social-news-block">
<p>RT hi: Come and meet us at E3 at booth West Hall #4512 to learn more about Farming Simulator 19, the next game in the successf…</p>
<span class="post-date">about 1 hour ago</span>
</div>
<div class="social-news-block">
<p>Are you are bale stacking champion? Are you at #blank ? Then show us your skills. The… <a target="_blank" href="blank">nothing</a></p>
<span class="post-date">4 days ago</span>
</div>
<div class="social-news-block">
<span class="post-date">11 days ago</span>
</div>
<div class="social-news-block">
<p>RT #url: We are glad to announce our plans for further expansion by moving to bigger office spaces for our two existing studios…</p>
<span class="post-date">12 days ago</span>
</div>
</div>
</div>
</div>
</section>
<div class="partners clearfix text-center"> <div class="row"> <div class="columns">
<img style="vertical-align:text-top;" src="template/image_11.gif" /> </div> </div> </div> <footer class="main-footer clearfix">
<div class="row">
<div class="medium-8 columns">
<div class="copyright"><img class="copyright__logo" src="img/logos/footer-logo.png"><div>© 2016 GIANTS Software GmbH Alle Rechte vorbehalten.<br>Alle anderen Warenzeichen sind das Eigentum ihrer jeweiligen Besitzer.</div></div> </div>
<div class="medium-4 small-12 columns">
<ul class="menu menu-footer float-right">
<li>7.0.5.0</li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/frontend.js"></script>
<script>$(document).foundation();</script>
</div>
</body>
</html>
I tried this, but it simply redirects to the page without filling any of the fields.
<DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
window.onload = function() {
document.getElementById('loginForm').submit();
};
</script>
</head>
<body>
<form id="loginForm" action="URL of site" method="POST">
<input type=hidden name="username" value="moo"/>
<input type=hidden name="password" value="boo"/>
</form>
</body>
</html>
What is wrong with my code, and how can I achieve my goal?
Thank you.
I would like to add external Javascript files, for specific pages in my Phonegap app. The app uses Framework7 for the UI.
Example:
Exercise page 2.1 has JavaScript file exercise2_1.js.
Exercise page 2.9 has JavaScript file exercise2_9.js ect.
I only want to load the JavaScript files, when the user is on that specific page.
The JavaScript files work, when they are included in the header section on the index page. I don't want to load all the exercise JavaScript files. I only want to load the one's being used. Is it possible to do this, without loading all the js files?
In the my-app section, i tried to load the files as an external js file. But could not get it to work. Nothing happens.
Index page
<html>
<title>My App</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/exercise.css" />
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="list-block accordion-list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">2</div>
</div></a>
<div class="accordion-item-content">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
Exercise 2</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="views">
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
my_app.js page
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
myApp.onPageInit('exercise2_1', function (page) {
})
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name === 'exercise2_1') {
}
});
$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) {
myApp.alert('Test');
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
//document.body.appendChild(js);
document.getElementsByTagName("head")[0].appendChild(js);
}
includeJs("js/exercise2_1.js");
})
Exercise 2.1 page (exercise2_1.html)
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">Exercise 2.1</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages">
<div data-page="exercise2_1" class="page">
<form id="Cloze" method="post" action="" onsubmit="return false;">
<div class="ClozeBody">
Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0">
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6">
</span> ingeniør.
</div>
</form>
<button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()"> Check </button>
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()"> Hint </button>
<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;"> OK </button>
</div>
</div>
</div>
I accomplished this by including JQuery and doing the following:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name == 'page1') {
$.getScript("js/page1.js");
} else if (page.name == 'page2') {
$.getScript("js/page2.js");
}
});
I found the problem. It had to do with the onload event on the index page.
I removed the onload event from the index page and put it in the exercise page.
This solved my issue.
<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>
Hopes this helps someone else.
I am using the following code which displays a form. The form elements should be validated . Please find the attached code with what i have tried.
<!doctype html>
<html>
<head>
<title> App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>site Details</h1>
</div>
<div data-role="content">
Enter the details of site
Modify site details
</div>
</div>
<div data-role="page" id="Site entry1">
<div data-role="header">
Home
<h1>Welcome To enter the details of site</h1>
</div>
<div data-role="content">
<div class="content-primary">
<form id= "1">
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="sitename">Site name:</label>
<input type="text" sitename="name" id="sitename" value="" />
</li>
<li data-role="fieldcontain">
<label for="siteno">Site name:</label>
<input type="text" siteno="siteno" id="siteno" value="" />
</li>
Next
</ul>
</form>
</div>
</div>
</div>
<div data-role="page" id="Site entry2">
<div data-role="header">
previous
<h1>Welcome To enter the module details of site</h1>
</div>
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="moduleno">name:</label>
<input type="text" modulename="moduleno" id="moduleno" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
<div data-role="footer">
Next
</div>
</div>
<div data-role="page" id="Site entry3">
<div data-role="header">
previous
<h1>Welcome To enter the exe details of site</h1>
</div>
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="modulename">name:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
<div data-role="footer">
Home
</div>
</div>
<div data-role="page" id="Modify site">
<div data-role="header">
Home
<h1>List of sites </h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
find the following scripting
function validate()
{
var siteName = document.getElementById("siteName").value;
var siteNo = document.getElementById("siteNo").value;
if (siteName.length == 0)
{
alert("Please, enter your name");
return false;
}
if (siteNo.length == 0)
{
alert("Please, enter your no");
return false;
var numbers = /^[0-9]+$/;
if(siteNo.value.match(numbers))
{
return true;
}
}
}
How to validate that site no will be only numbers and site name only text.
The code i have tried above is not serving for the purpose.
Your html has an error too .. there two body tags .. remove one
<body>
<body>
Alse check this fiddle for validation. Make use of jQuery
Statements after a return usually are not executed. Change:
function validate()
{
var siteName = document.getElementById("siteName").value;
var siteNo = document.getElementById("siteNo").value;
if (siteName.length == 0)
{
alert("Please, enter your name");
return false;
}
if (siteNo.length == 0)
{
alert("Please, enter your no");
return false;
} // !!
var numbers = /^[0-9]+$/;
if(siteNo.value.match(numbers))
{
return true;
}
else
return false; // !!!
}
Recommendation: if the code would have been properly indented, this error would have been quite more obvious.
When I initialized a page and I try to navigate, at the first time the page step back. Why does the page step back.
I try to navigate in this way: $.mobile.changePage("#pagename");
For example. I try to go to the page of customers from the main after the initialization, I click to the icon. The webpage navigates when the navigate finished the page navigates back, but just at the first time, the url is still #....
code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="styles/jquery.mobile-1.3.1.min.css" />
</head>
<body>
<!-- //////////////////////////////////////////////////////
////////// MAIN PAGE ///////////////
////////////////////////////////////////////////////// -->
<section id="main-page" data-role="page" data-fullscreen="true">
<header data-role="header">
<h1>Főoldal</h1>
</header>
<div data-role="content">
<table>
<tbody>
<tr>
<td>
<div class="metro-bt" onclick="$.mobile.changePage('#customer-page');" id="customer-btn"> <!-- <<<-------------- here I invoke the function change page and than change back, but just at the first time -->
<div></div>
<span>Customers</span>
</div></td>
<td>
<div class="metro-bt" data-bind="click: bt_calendar_click" id="calendar-btn">
<div></div>
<span>Calendar</span>
</div></td>
</tr>
<tr>
<td>
<div class="metro-bt" data-bind="click: bt_negotiation_click, enable:isNegBtEnable" id="negotiation-btn">
<div></div>
<span>Negotiation</span>
<span data-bind="text: durationOfNegotiation" style="line-height: 0; display: block;"></span>
<span data-bind="text: nameOfPartner" style="line-height: 15px;clear: both; display: block;">asdf</span>
</div></td>
<td>
<div class="metro-bt" data-bind="click: bt_logout_click " id="logout-btn">
<div></div>
<span>Logout</span>
</div></td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- //////////////////////////////////////////////////////
////////// Customer ///////////////
////////////////////////////////////////////////////// -->
<section id="customer-page" data-role="page" data-fullscreen="true">
<header data-role="header">
<h1>Ügyféltörzs</h1>
<a data-role="button" href="#main-page" data-icon="back" data-iconpos="notext" class="ui-btn-left"></a>
</header>
<div class="content" data-role="content">
<div data-enhance="false" data-bind="event: { rowselect: rowselect }" id="customer-jqxGrid" style="margin: 0 auto"></div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
Hozzáad
<a id="b-customer-negotation" class = "ui-disabled" data-icon="star" data-bind="click: startNegotiation"> </a>
<a id="b-customer-modify" class = "ui-disabled" data-icon="edit" data-bind="click: modify"></a>
</div>
</section>
<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<script type="text/javascript" src="scripts/lib/jquery-1.9.1.min.js"></script>
<script src="scripts/lib/knockout-2.2.1.js"></script>
<script src="scripts/lib/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
g_loginViewModel = null;
m_tokenKey = "token";
m_serverName = "http://localhost:49670";
$(function() {
$.mobile.ignoreContentEnabled = true;
if (window.localStorage.getItem(m_tokenKey) != null) {
$.mobile.changePage("#main-page");
// bootstrap();
} else {
g_loginViewModel = new LoginViewModel();
ko.applyBindings(g_loginViewModel, document.getElementById("login-page"));
}
});
</script>
</body>
</html>
Please post it in fiddle, also what do you mean by page steps back? i guess you need not specify the first page as change page it should directly load the first page with data-role page.
I have a piece of code using jQuery to load content from an internal webpage onto a new page DOM after the user has selected a button from another page. The problem I got is no matter what option button I click the same result shows in the DOM. I was told to change the Var to .live but it hasn't made any difference. I cant really explain it more apart from some one looking at my code. What is the best way to deal with this?
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="../jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="../jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="../jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Options</li>
<li>results</li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="options">
<div data-role="header">
<h1>Options</h1>
</div>
<div data-role="content">
<div id="page-wrap">
<div id="header">
<h1>Call a webpage in a DOM</h1>
</div>
<div id="load-div" class="functions">
<span>Value 1</span>
<input type="submit" value="300GB" id="load" />
<div id="load-div" class="functions">
<span>Value 2</span>
<input type="submit" value="500Gb" id="load2" />
</div>
results
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</div>
<div data-role="page" id="results">
<div data-role="header">
<h1>Results</h1>
</div>
<div data-role="content">
<div id="result" class="functions">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
// load() functions
var loadUrl = "load.html";
$("#load").live("click",function(){
$("#result").html(ajax_load).load(loadUrl);
});
</script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
// load() functions
var loadUrl = "load2.html";
$("#load_2").live("click",function(){
$("#result").html(ajax_load).load(loadUrl);
});
</script>
Options
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Basically you overwrite every script you have here. Don't use loadUrl.
For #load:
$("#load").live("click",function(){
$('#result').html(ajax_load).load('load.html');
});
And for #load2:
$("#load_2").live("click",function(){
$("#result").html(ajax_load).load(`load2.html`);
});
Separate script tags are not independent. The code in one can interact with the code in another.
You have declared var ajax_load and loadUrl in both blocks. The ones in the second block overwrite those in the first. Either give them different names, or eliminate them and put the string values directly in your function.