I'm trying to save and read but when I try to save the value of button in the panel, I get error - Unable to set property 'adl' of undefined or null reference. I have never used localStorage before. Can someone help me locate the error?
Thanks
Joe
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js" data-semver="2.1.3" data-require="jquery"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).ready(function() {
// Save settings
$( "#myPanel" ).panel({
beforeopen: function( event, ui ) {}
});
$( "#myPanel" ).on( "panelbeforeopen", function( event, ui ) {} );
$( "#myPanel" ).panel({
close: function( event, ui ) {}
});
$( "#myPanel" ).on( "panelclose", function( event, ui ) {
//localStorage.adl = $("#checkbox-h-2a").is(":checked"); //$('#checkbox-h-2a').val();
if (typeof(Storage) !== "undefined") {
localStorage.adl = $("#checkbox-h-2a").is(":checked");
console.log($("#checkbox-h-2a").is(":checked"));
}
});
});
</script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="home">
<div data-role="panel" id="myPanel" data-display="overlay">
<!-- panel content goes here -->
<fieldset data-role="controlgroup" data-type="horizontal">
<input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
<label for="checkbox-h-2a">Auto Detect Location</label>
</fieldset>
</div><!-- /panel -->
<div data-role="header">
<h1>Test</h1>
Open Panel
</div><!-- /header -->
<div data-role="content">
<div data-role="main" class="ui-content">
<p>content will go here</p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- end of first page -->
</body>
</html>
You should use the set method of localStorage like so:
localStorage.setItem(keyName, keyValue);
Consult the documentation for more information.
I believe you are accessing/ running the html file from your file system, not from any server. That's why you are facing the problem. When you run your web page from local filesystem, you can't guarantee that everything works like on webserver.
I was able to replicate your issue in IE-11, when I was accessing the page from file system. Here is the snapshot of the error (please notice the url in the snapshot, it's local file system). I believe you are getting the same error where localStorage is undefined.
Now I am accessing the same html file from simple http server (notice the url in the below screenshot) and it's working fine. Here is the snapshot of that where localStorage is not undefined.
So, now that you know your problem, you can run your html page from a server. There are many ways to create a server like using node.js, simple python server etc. I have used simple python server. Hope this solves your issue!
Related
I am trying to implement a collapsable sidebar with a form (search field and submit button) for my site.
I have referenced as script:
https://code.jquery.com/jquery-1.11.3.min.js
and
https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js
However in this combination the form just wont submit, instead it seems to apply the get parameters to the URL and then fires preventDefault of some sort.
It seems like I am using an old version of jQuery , however when I tried to update to:
https://code.jquery.com/jquery-3.2.1.min.js
I noticed that my collapsable menu wont work anymore and the complete style is broken. Also I cant put it in a fiddle since they are mostly already using jQuery.
Sample 1 (Collapse works but form not):
<html>
<head>
<title>Test form</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="about">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Search</h1>
<form method="get">
<input name="test" type="text">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</body>
</html>
Sample 2 (Form works but Collapse not):
<html>
<head>
<title>Test form</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="about">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Search</h1>
<form method="get">
<input name="test" type="text">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</body>
</html>
For the first sample I also tried to declare a input type button instead of submit and trigger it manually using:
$('#submitbutton').click(function() {
$('#myform').submit();
});
Without success.
Thanks in advance!
jquery mobile version 1.4.5 is only locked to certain older jquery versions and have not been tested onto older versions above jquery2.0
Read more about it here if you need to: http://blog.jquerymobile.com/2013/02/20/jquery-mobile-1-3-0-released/.
This would explain why the jqueryversion 3.2.1 doesn't work with your collapsible form.
Meanwhile on the side of the 1.11.3 version, According to the developer console all you have to do is load up your form on a web server instead of loading it locally on your computer (C:/Folder/.html wont work, you need to use browser extensions like https or http)
I hope this helps you as I myself ain't a professional programmer and can't scratch up a working code for you.
It seems like I was misjudging.
With jQuery mobile comes alot of automatically introduced features for e.g. submitting a form in the background using XHR request and not reloading the site.
Imho they should make this a little bit clearer as I had a hard time figuring this issue out. Solution is: for `s or 's you DONT want to be loaded in background, add the tag: data-ajax="false" like so:
<form action="#" method="get" data-ajax="false">
<a href="" data-ajax="false">
Hope this helps someone.
In jQuery mobile I want to load pagecontainers from external files. I can add the markup to my DOM, but the problem I am facing afterwards is that as soon as I navigate to #page2, the entire #page1-div disappears from the DOM and thus I cannot navigate back (Please see screenshots below).
DOM before clicking "Go To Page 2"
DOM after clicking "Go To Page 2"
As you can see, the entire #page1-div is gone for good. Why is that? Any thoughts? Please see my markup and code below:
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<title>Hello jqm</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$(document).on( "pagecontainerload", function( event, ui ) {
console.log('navigating to page1...');
$.mobile.pageContainer.pagecontainer("change", "#page1");
console.log('navigating done!');
} );
console.log('loading pagecontainers...');
$.mobile.pageContainer.pagecontainer("load", "page1.html");
$.mobile.pageContainer.pagecontainer("load", "page2.html");
console.log('pagecontainer-load done!');
});
</script>
</body>
</html>
page1.html
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
Go To Page 2
</div>
</div>
page2.html
<div data-role="page" id="page2" class="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
Go Back To Page 1
</div>
</div>
Remarks: This is a follow up question to this one: jQuery mobile - Splitting up pages to different files
jQuery Mobile removes external pages when you navigate away of them. You should leave a base page cached in DOM rather than loading all pages.
Solution one: in test.html, add html markup of page1.html and load page2.html externally.
Solution two: add data-dom-cache="true" to page1 div to keep it cached even if it's loaded externally.
<div data-role="page" id="page1" data-dom-cache="true">
Update
You can cache all external pages at once without the need to add data-dom-cache to each and every page div. All you need to do is to globally set domCache option of page widget to true on mobileinit event. The code should be placed after jQuery.js and before jQuery-Mobile.js.
<script src="jquery.js" />
<script>
$(document).on("mobileinit", function () {
$.mobile.page.prototype.options.domCache = true;
});
</script>
<script src="jquery-mobile.js" />
For this case, you should try to init the page manually
In page1:
$(document).bind("mobileinit", function () {
...
$.mobile.autoInitializePage = false;
$.mobile.initializePage();
});
In page2:
$(function () {
$.mobile.activePage = null;
$.mobile.initializePage();
});
This is my solution for switch 2 pages not in same HTML.
I have a single 'index' page that replaces the 'mainContents' when any button in the navBar is pressed.
This is so that I can re-load only the contents needed, and keep the header, navbar, and footer static.
This is causing me trouble in my "search.html" page (which is loaded into the #mainContents ).
search.html has a form which (will) call some sql queries via PHP. When I initially designed this webpage I had it spanning across multiple pages; re-loading header, footer, etc each time. So I just re-loaded the whole page with the new 'php' contents (which will be a table populated with data).
Now that 'search.html' is located inside the #mainContents of the 'index.html' page, when the 'go/submit' button is pressed, the entire page is reloaded, and I lose my header and footer...
I've been at this for a while now, and I am at a loss as to how to make it work.
I'll include relevant pages/scripts (though it seems like a bit much, I'd rather you have the information available)
Index.html (main page):
<!DOCTYPE html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="noteVote">
<!-- HEADER -->
<div data-role="header" align="middle" class="header">
<img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- NAVBAR -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
<!-- /NAVBAR -->
</div>
<!-- /HEADER -->
<!--
This is the MAIN section.
This is where the contents will be replaced
-->
<div data-role="content" class="ui-content" id="mainContent">
Site-related text.
</div>
<!-- /MAIN -->
<!-- FOOTER -->
<div data-role="footer" class="footer">
This is the footer.
</div>
<!-- /FOOTER -->
</div>
<!-- /INDEX -->
<script src="./scripts/navScript.js"></script>
</body>
</html>
navScript.js is the script that causes the nav-buttons to replace only the #mainContents :
$(document).ready(function() {
// Actual script includes code for each nav-bar button.
$("#searchButton").on("click", function(e) {
e.preventDefault();
$("#mainContent").load("./pages/search.html");
});
Then the 'search.html' which only replaces the #mainContent .
(this is where it gets messy, as I've tried a few ways to get this to work how I want):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main" data-role="content" id="main">
<div id="holder">
<h1>Search</h1>
<div class="left">
<form id="searchForm">
<b>Course:</b>
<select name="course">
<option value="*">All</option>
<option value="COMM2216">COMM-2216</option>
<option value="COMP2121">COMP-2121</option>
<option value="COMP2510">COMP-2510</option>
<option value="COMP2526">COMP-2526</option>
<option value="COMP2714">COMP-2714</option>
<option value="COMP2721">COMP-2721</option>
</select>
<p>
Type:
<input type="radio" name="type" value="lec">Lecture
<input type="radio" name="type" value="lab">Lab
<input type="radio" name="type" value="*" checked>Both
<p>
<input type="submit" value="Go" id="searchGoButton">
</form>
</div>
</div>
</div>
<script src="./scripts/searchGo.js">
</script>
</body>
</html>
And finally 'searchGo.js', is the code that is supposed to enforce only the "search.html" page to change (inside the #mainContent ), so that the header, footer, etc stay present.
$(document).ready(function() {
$("#searchForm").submit(function(e)
{
e.preventDefault();
$.ajax({
type: "POST",
url: "./scripts/php_test.php",
data: "blah",
success: function(){
$("#holder").load("../pages/account.html");
}
}) ;
} );
This is just a sample/test to see if it would work; but it reloads the whole page.
It is my intention that searchGo.js will load a .php script that will call the sql queries, and populate a table and replace the #mainContent div with its
Again, I apologize for all the code, and if my problem is vague... I'm totally stumped, and would greatly appreciate any help. My alternative is to go back to reloading the navbar and header with each page; which I will resort to soon if no one can offer assistance.
Any suggestions of alternate means to accomplish this task are more than welcomed.
Try to add onsubmit="return false;" on the search form tag. The problem is that you don't override default submit button form behavior. That is the reason that your form submitting is refreshing the whole page.
Something like this:
<form onsubmit="return false;">
<input id="submitButton" type="submit" />
</form>
You can call your search function like this
$(document).ready(function() {
$('#submitButton').on('click', function() {
console.log('Form submitted');
console.log('Ajax call');
console.log('Insert returned data');
});
});
Js bin link
You need to delegate the event for that button -
$("body").on("submit", "#searchForm", function(e)...
Because search.html is loaded into the DOM via AJAX jQuery is "unaware" of it. The submit bubbles up the chain though and can be "captured" at a level that was already there when jQuery initially ran. The submit bubbles up to the body then jQuery sees it and acts.
I want to use Swiper Javascript Api(http://www.idangero.us/) in Jquery Mobile..
But because Jquery Mobile uses ajax, my javascript doesn't work..
Example sources are like that.
index.html
<head>
<link href="./scripts/jquery.mobile-1.4.0.css" rel="stylesheet" type="text/css"/>
<script src="./scripts/jquery-1.10.2.min.js"></script>
<script src="./scripts/jquery.mobile-1.4.0.js"></script>
<link rel="stylesheet" href="./scripts/idangerous.swiper.css"/>
<script src="./scripts/idangerous.swiper.2.4.1.js" defer="true"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"></div>
<div role="main" class="ui-content page_content">go sub page</div>
<div data-role="footer"></div>
</div>
</body>
sub.html
</head>
<body>
<div data-role="page">
<div data-role="header">
</div>
<div role="main">
<!-- using swipe javascript source-->
<script defer="true">
$(document).on('pagecreate', function() {
var mySwiper = new Swiper('.swiper-container',{
//Your options here:
mode:'horizontal',
loop: true
//etc..
});
})
<div class="swiper-container">
<div class="swiper-wrapper">
<!--First Slide-->
<div class="swiper-slide" style="background:white;">
<center><font color="black">1</font></center>
<center><font color="black">page1</font></center>
</div>
<!--Second Slide-->
<div class="swiper-slide" style="background:white;">
<center><font color="black" >2</font></center>
<center><font color="black" >page2</font></center>
</div>
<!-- Third Slide-->
<div class="swiper-slide" style="background:white;">
<center><font color="black">3</font></center>
<center><font color="black">page3</font></center>
</div>
</div>
</div>
</div>
</div data-role="footer"></div>
</div>
</body>
I used Swiper api(javascript) at sub.html. But when I access index.html page and click sub link, sub page's Swiper api doesn't work. When I refresh that page, it work..
How can I view the Swiper api even I do not refresh it?
jQuery Mobile uses AJAX to load in your new page. However, it strips out the head--as well as anything outside a container with data-role="page" (or body if not provided).
The solution is to move your script so it appears within the section of the page that jQuery Mobile injects into the page, so it doesn't get removed.
Then, if you want to execute javascript on $.ready(), you'll need to bind to jQuery Mobile's onPageInit event like so:
$( document ).on( "pageinit", function( event ) {
alert( "This page was just enhanced by jQuery Mobile!" );
});
In the real world, I've noticed that pageinit sometimes doesn't solve the problem, so if all else fails, try binding to pagebeforeshow and see if that does the trick.
My guess is that the document.ready is only fired once - when your page has initially been loaded and DOM is ready. You can put your code directly into a tag in the loaded sub.html. No need to use the $(document).ready event handler.
I am using android 2.2, phonegap 1.3, and jquery-mobile 1.0
I have a list view in which there is an element in the list that I want to use to create a dialog. I would like my dialog to be defined in a separate file so I can reuse it and I would like it to set the title according to the value I pass.
My dialog looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title"></h1>
</div>
<div data-role="content">
...
</div>
</div>
</body>
</html>
I have tried using a #href with the title parameter (as defined below), dialog is opened but the title param isn't present.
<ul data-role="listview" data-theme="a">
...
<li><a href="dialog.html?title=blah" data-rel="dialog"/></li>
...
</ul>
I have read that I could use a data-url but in this case it is not clear where I define it (in the <a> or in a <div> which wraps it) and how I extract this in the dialog page.
EDIT
For the record the mechanism works in a standard browser but without the styling.
I created the script inside the <script> tags below which listens for page show events and updates the title and placeholder for the input.
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title">
</h1>
</div>
<div data-role="content">
<input placeholder="Type here..." id="configtext">
</input>
...
<script type="text/javascript">
$("div.ui-page-z").live("pageshow", function(event, ui) {
var dataUrl = $(".ui-page-active").attr("data-url");
$("#title").empty();
$("#title").append(SMSPLUS.getValue("title", dataUrl));
$("#configtext").attr("placeholder", SMSPLUS.getValue("placeholder", dataUrl));
});
</script>
</div>
The script wasn't detected when placed in the header (presumably because the framework takes no notice of headers for dialogs)
You might try removing the
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
</body>
and only return the body html & javascript in your ajax call. Having two DOMS in one might confuse the browser.