jQuery Mobile: Controlling what gets added to URL bar - javascript

I am building a mobile site using jquery mobile. It will contain a few static internal pages for settings etc., but primarily will be loading/linking external pages.
I have two requirements.
I do not want internal pages to affect the URL bar or add to the
urlHistory (as hashes, ie index.html/#settings)
when the user loads a new external page, I do want it to show in the
URL bar and add to the urlHistory.
This sounds simple enough, but I can not seem to get it working.
I tried the following in mobileinit. This simply NEVER modified the URL, for internal and external links.
$.mobile.changePage.defaults.changeHash = false;
Any suggestions are greatly appreciated.

You were close, mobilinit is a tricky event, it must be triggered before jQuery Mobile is loaded, here's an example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<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.3.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.changePage.defaults.changeHash = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="operations.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<ul data-role="listview" data-theme="a" id="test-listview">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Test it, you will find it satisfies your every requirement.

OK,
After testing various things I ran across a possibly solution that does not involve mobileinit.
For all links that I do NOT want reflected in the url bar, I set programmatically:
$.mobile.changePage("#home", {changeHash: false, transition:'fade'});
The key here is the changeHash set to false. This will transition to the page 'home' but will not make any changes in the URL bar.
I am unsure if I can do the same thing within an href tag.

Related

jQuery Tabs "Undefined is Not a Function"

I've recently been trying to use or familiarize myself with the JQuery tabs function. However everytime I've tried using it I get the error "undefined is not a function". I've researched this problem and a lot say it may have to do with the .js file not being loaded but that is not the case as my console tab shows it being loaded.
Here is the HTML file I have been trying to test out:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></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>
<link rel="stylesheet" type="text/css" href="Portal.css" media="screen" />
<script type="text/javascript" src="Portal.js"></script>
<script src="tabs.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<p>Hi, this is the first tab.</p>
</div>
<div id='tab2'>
<p>This is the 2nd tab.</p>
</div>
<div id='tab3'>
<p>And this is the 3rd tab.</p>
</div>
</div>
</body>
</html>
And the tabs.js file (which throws the undefined error when debugging):
$(document).ready(function () {
$("div.tabs").tabs();
});
Thanks. I can provide more details if needed. No CSS is being used yet (but I don't believe that to be the issue here).
Make really sure, that you are loading the js from the external sources.
I had a similar problem. My code was working in konqueror, opera and some firefox / iceweasel browsers, but not in others and not in chromium.
It turned out, that while my page was https hosted, i tried to load the external js over insecure http connection. These links were silently discarded by the "not working" browsers... i spent hours on that frack.
Hope this helps you or others.
You're selecting class tabs but what you have is ID tabs.
Change it to:
$( 'div#tabs' ).tabs();
Or change your HTML to:
class="tabs"
$( "#tabs" ).tabs() use this instead of $("div.tabs").tabs()

js not working properly on page which is loaded by jquery .load()

I am new to jquery and can't even assume how deeply this issue can go.
When the external page (in this case shop.php) is loaded into index.php, by Jquery function .load(); , it falls apart. Many jquery commands and plugins, that are applied to the shop.php page, aren't working.
This confuses me, because some of js commands and plugins still works. Obviously i can't say that files are not loaded completely, just majority of them are not working.
When I paste shop.php content into index.php, it works perfect. Also when i add desired js code into shop.php (wrapped into script tag), it works as well.
I really don't expect from anyone to look deeply into this problem. I just wanna know if this is common issue, and is there simple explanation for it ?
If not i'll seek for some different approach.
My code:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.min.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="js/shop.js"></script>
<script type="text/javascript" src="js/jquery.touchcarousel-1.2.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/jquery.ddslick.js"></script>
<script type="text/javascript" src="js/top-navigation.js"></script>
</head>
<body>
<div id="top-bar"><?php include("top-bar.php"); ?></div>
<div id="pageWraper"><?php include("home.php"); ?></div>
</body>
</html>
top-bar.php
<div id="nav">
<ul id="navigationWraper">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<ul class="submenu">
<li>asdasd</li>
<li>asdasdas</li>
<li>derwer</li>
</ul>
<li>Shop</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
shop.php
<div id="shop">
<div id="shopheader">
<div id="shopitemstop">
<div id="productcat">
<!-- bunch of code -->
</div>
</div>
</div>
</div>
Jquery:
$(document).ready(function(){
$(function() {
$("a.menuLink").on("click", function(e) {
e.preventDefault();
$("#pageWraper").load(this.href);
});
});
});
Hope this helps
Thanks,
Update :
I added:
<script type="text/javascript">
$(document).ready(function(){
$.getScript("js/shop.js");
$.getScript("js/jquery.touchcarousel-1.2.js");
$.getScript("js/main.js");
});
</script>
on top of shop.php page, dont know how right this is, but its working now.
Only thing that bugs me is if i remove jquery.touchcarousel-1.2.js from index.php head, page falls apart. It is like, only working if both of them are loaded ????
Question:
I really don't expect from anyone to look deeply into this problem. I
just wanna know if this is common issue, and is there simple
explanation for it ?
Answer:
Yes, it is a common problem for Ajax/dynamically loaded content.
The cause is: that most plugins work on the DOM as it exists when the plugin is run (unless they were specifically created to work with dynamic content).
The fixes include:
Find another plugin that is tolerant of dynamic content
Re-run the plugins
Strip out existing plugins and re-run the plugins (takes some effort to figure out some plugins)
Don't load content dynamically for plugins that do not support it

jquery mobile app does not show styled text on iPhone

I am trying to build my first project for iOS using PhoneGap. I have picked up an example from this page:
http://www.codeproject.com/Articles/579532/Building-an-iPhone-App-using-jQuery-Mobile
And my code looks like this after changing reference to 1.4.1 ans 1.9:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Task Timer</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Edit
<h1>Task Timer-1</h1>
Add
</div>
<div data-role="content">
<ul id="taskList" data-role="listview">
<li onclick="alert(1)">Task 1</li>
<li onclick="alert(2)">Task 2</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
About
</div>
</div>
</body>
</html>
This page, if you copy to an html file will display formatted text. However when I copy the App to iPhone it displays simple text.
Can someone please tell me what I am doing wrong?
I think I have just solved the issue.
I made a reference to cordova.js in main html file. And as a precaution copied cordova.js to www folder. And the text started appearing formatted the JQM way.

How can AngularJS be used replace .asp includes?

Building a small framework for .aspx sites. Project is called Dwarf and available on GitHub.
The problem that I am addressing is working with partials. For example in one of my pages I have a section in the side bar that pulls in an .html file. The reference in the page is
<!--#include file="/_includes/template/product-pages/product-links-contact-rep.html" -->
How can I integrate AngularJS to use partials here?
I am thinking
<!-- this is just an example -->
<script type=text/ng-template id=product-links-contact-rep.html>
<!-- Links -->
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
</script>
And that entire script goes in the page?, and how would the routing be addressed for a partial?
I am from a rails background and novice to ASP and new to Angular. So I would appreciate being pointed out where the gaps in my knowledge are so that I can do further research on my own.
The approach you can start with (not saying its the best one) but meets your need is to use directives in angularjs
Here's the code
main.js
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
});
app.directive("sidebar",function(){
return {
restrict: 'A',
templateUrl: "product-links-contact-rep.html.html",
link : function(scope,element,attr) {
// Do Great things here with your sidebar
},
}
});
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Side Bar</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app="myApp">
<script type="text/ng-template" id="product-links-contact-rep.html.html">
<!-- Links -->
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
</script>
<div ng-controller="MyCtrl">
<div sidebar></div>
</div>
</body>
</html>
Here is the working plunker code for reference : http://plnkr.co/edit/NAR1g5?p=preview

JQuery Mobile do something on page load when clicked on navbar item

I have a page with some nabars, and when the "My Activity" navbar is clicked I want it to do something on load, and currently for testing purposes, I am just trying to alert a message to screen on load, but since it is a js file being called I am not sure, what Jquery mobile load function to use?
here is my html for the page:
<html>
<head>
<title>My Activity</title>
<meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-id="pagetabs" data-theme="a" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Facebook</li>
<li>YouTube</li>
<li>My Activity</li>
</ul>
</div>
</div>
</div>
<div data-role="footer" data-theme="a" data-position="fixed"><h5>Social Stream</h5></div>
</div>
<script src="my_activity.js"></script>
</body>
</html>
and in my my_activity.js file I have tried different, page load functions. I tried the following, that only gets fired when you manually refresh the browser, doesn't get fired when you click on the navbar tab
$(document).on('pageinit', '[data-role="page"]', function(){
alert("hello");
});
Put this line:
<script src="my_activity.js"></script>
Inside a page div, like this:
<div data-role="page">
<div data-role="header" data-id="pagetabs" data-theme="a" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Facebook</li>
<li>YouTube</li>
<li>My Activity</li>
</ul>
</div>
</div>
<div data-role="footer" data-theme="a" data-position="fixed"><h5>Social Stream</h5></div>
<script src="my_activity.js"></script>
</div>
You are suffering from a classic jQuery Mobile problem. This topic is not discussed as a part of an official documentation so I will try to explain it to you.
When jQuery Mobile loads additional HTML pages it only loads page div (data-role="page"=, everything else is stripped. This is because HEAD already exist inside a DOM and another HEAD is not needs, same goes for a rest of the page.
If you want to find more about it take a look at my blog ARTICLE that discuss this topic. There you will find a better description plus few solutions with examples. Read it carefully.

Categories