Can't use Javascript when using AJAX (jQuery Mobile) - javascript

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.

Related

Loading View into <div>

Just wondering if anyone knows of a decent jQuery plugin (Or Javascript) that would allow me to load "view" (NOT PARTIAL VIEW) into a <div> when a user clicks on a link.
Here's where it may be tricky, I have 8 pages.I have a Homepage in that, there is 3 divisions. First division for Header and second one have picture and third one for footer. I want to load view into second division. I have been searching Google and have not been able to find anything that seems stable.
Thanks in advance Shiyas :)
I have tried below code. It's not working.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This code is from my HomePage. In here I am rendering Header(Partial view) into the first divison. When i click on a link in Header, the book view should load into middle division. Well, It's not loading.
You can use jquery load function.
Load data from the server and place the returned HTML into the matched element.
$('#divId').load('url');
jQuery .load() documentation
Place the piece of your script that loads the view at the bottom of your page just before </body>. You should also use a relative URL, so when you release to production you will not have to change this. Try the below.
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("/Home/Books");
});
</script>
</body>

Error when saving value to localStorage

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!

jQuery mobile - Pagecontainer disappears from DOM

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.

jQuery accordion does not work

i think i have done all right but still accordion is not working
<head runat="server">
<title></title>
<link href="assets/jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom/development-bundle/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<script src="assets/js/jquery-1.10.2.min.js"></script>
<script src="assets/jquery-ui.js"></script>
<script type="text/javascript">
$("#Acc").accordion();
</script>
<body>
<form id="form1" runat="server">
<div id="Acc">
<h3>First One</h3>
<div>
<p>
1st Data
</p>
</div>
<h3>second One</h3>
<div>
<p>
2nd Data
</p>
</div>
<h3>Third One</h3>
<div>
<p>
3rd Data
</p>
</div>
</div>
</form>
You need to wrap the script in document.ready which delays the execution of a script until the DOM is completely loaded. Currently the script cannot find the div#Acc when it executes because it has not been loaded.
$(document).ready(function(){
$("#Acc").accordion();
});
Your script should be within a dom ready handler
jQuery(function(){
$("#Acc").accordion();
})
Since your script is in the header when your selector $("#Acc") is executed, the element is not yet loaded to the dom so the selector will not return anything thus the accordion widget will not get initiated for the element
Demo: Fiddle

Showing a dialog from a separate html file and passing it a parameter

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.

Categories

Resources