I am attempting to initialize javascript for a jQuery mobile page using the pageInit() function. I have outlined some attempts below that I can't seem to get working. Can any one tell me what I'm doing wrong. Also is there a way to do this using $(this) instead of using the pages explicit name?
pageInit.html:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jqueryui.com/ui/jquery-1.7.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.position.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.autocomplete.js"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"
type="text/javascript"></script>
<script src="functions.js"></script>
</head>
<body>
<script>
alert("script");
$(this).live('pageinit', function (event) {
//$('pageInit.html').live( 'pageinit',function(event){
//$('#pageInit').live( 'pageinit',function(event){
//$('#pageInit.html').live( 'pageinit',function(event){
alert("Page Initialized");
});
</script>
</body>
The pageinit event is fired on the document. It doesn't make sense to use live, either. Instead I would use bind. For example:
$(document).bind('pageinit', function (event) {
alert("Page Initialized");
});
Take a look at the jQuery mobile documentation for more information.
Related
To calculate the relative time of a post I'm using jquery-timeago library. Here is the JavaScript code which I need to place in the HTML page
<script type="text/javascript">
jQuery(document).ready(function() {
$("abbr.timeago").timeago();
});
</script>
I have also included Jquery
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Im still getting the error as
How do I resolve this error? There are already few questions such as this on Stack Overflow but none of them could resolve my issue.
EDIT:
Here's the head part of the HTML page
<html>
<head>
{% for ud in userdata %}
<title>{{ud.fullname}} </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.4.3/jquery.timeago.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript">
jQuery(document).ready(function() {
$("abbr.timeago").timeago();
});
</script>
</head>
Here's a fiddle. But it works fine. DEMO
EDIT : The issue has been resolved by making changes in the below way!
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("abbr.timeago").timeago();
});
</script>
replace your current CDN with the below one and try.
https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.4.3/jquery.timeago.js
Include this after jquery.min.js
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.4.3/jquery.timeago.min.js"></script>
Check this fiddle now Fiddle
<abbr class="timeago" title="2011-12-17T09:24:17Z">December 17, 2011</abbr>
jQuery(document).ready(function () {
$("abbr.timeago").timeago();
});
Place your code properly.
Then it will start working.
CDN
Use the CDN provided by Shussain
I had related issue, as per above in this exact case it was solved with Shussain user's comment:
$j = jQuery.noConflict(); $j(document).ready(function() { $j("abbr.timeago").timeago(); });
But I have solved issue with replacing document ready as per below:
(function ($) {
"use strict";
// Your js code
});
})(jQuery);
I'm trying to implement swiping of image using html and javascript for phonegap application, following this demo PhotoSwipe there it works fine, but after adding into my project, not able to swipe the images. and even linked the js files correctly still i get this error in logcat "Uncaught TypeError: Cannot read property 'PhotoSwipe' of undefined at file:///android_asset/www/examples/01-default.html:26"
any idea on my issue? Thanks.
swipe code
<title>PhotoSwipe</title>
<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href="css/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript">
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
<script type="text/javascript" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" src="/libs/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.min.js"> </script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.5.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.5.js"></script>
<script type="text/javascript" src="photoswiper.js"></script>
}
Add the js files before the script that you have written, it might be the cause of the problem because the photoswipe features that you are trying to use in the script have not been loaded and hence are not available yet.
I have a large asp.net 2.0 application. In the current page i have one
<head id="head1" runat="server"> with some meta information and the original developer has written all Javascript functions in the <body> tag. Now i want to implement
$(document).ready(function load()
// My code
});
and when i include jquery-1.8.3.js in my head/body tag , the other javascript functions are not working properly. what could i do to solve this?
<head id="Head1" runat="server">`
<script language="javascript" type="text/javascript" src="JScript/jquery-1.8.3.js"/>`
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<title>HMS</title>
<link href="Css/MyStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
Body
<body>
<script language="javascript" type="text/javascript" src="JScript/MediReckonerJscript.js">
</script>
//some javascript functions here that are not firing since i added jquery reference in the head section. if that is removed this function works well.
My script in body that usesjQuery Library.
<script type="text/javascript" language="javascript">
//This is my script in the <body> tag.
jQuery.noConflict();
$(document).ready(function load() {
var iFrame = $('#PageFrame');
iFrame.bind('load', function() { //binds the event
alert('iFrame Reloaded');
});
});
</script>
Perhaps this could be the version problem please check with some lower version of the same library also you can use jQuery.noConflict(); for jQuery is conflicting OR $.noConflict(); if $ is conflicting.
Use noConflict() like this
<script type="text/javascript" language="javascript">
//This is my script in the <body> tag.
var j = jQuery.noConflict();
j(document).ready(function load() {
var iFrame = j('#PageFrame');
iFrame.bind('load', function() { //binds the event
alert('iFrame Reloaded');
});
});
</script>
If you have other libraries in your page add this.
jQuery.noConflict();
Libraries like prototype use the same '$' used by jQuery and so, they conflict.
I have a script for dynamic javascript date picker, taken from here. Please scroll down to Toggle by Element which i want to implement but it is not working
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<SCRIPT type="text/javascript" src="js/jquery.min.js"></SCRIPT>
edit: i added the following mootools script
<script src='http://cdnjs.cloudflare.com/ajax/libs/mootools/1.3.2/mootools-yui-
compressed.js'
type='text/javascript'></script>
<SCRIPT type="text/javascript" src="datepicker.js"></SCRIPT>
<SCRIPT type="text/css" src="datepicker.css"></SCRIPT>
<SCRIPT type="text/css" src="datepicker_vista.css"></SCRIPT>
</head>
<body>
<script language="JavaScript">
window.addEvent('load', function() {
new DatePicker('.demo_allow_empty', {
pickerClass: 'datepicker_dashboard',
allowEmpty: true
});
});
</script>
<label>Datepicker starting at and allowing no value:</label>
<input name='date_allow_empty' type='text' value='' class='date demo_allow_empty' />
</body>
</html>
what i am missing?
It seems it require mootools, i cant see any mootools script tag in your source.
it has nothing to do with jQuery.
edit : here is an exemple :
<script src='http://cdnjs.cloudflare.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'
type='text/javascript'></script>
put it before the date picker script
Hi I'm trying to run a javascript function (an alert to test) but it is not firing when in a page other than the index.html.
here is an example of a page that is not firing the javascript alert ( note that < is removed from all of the tags so as to render in stack overflow):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert("test");
navigator.notification.alert("PhoneGap is working");
}
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="docs/_assets/js/jqm-docs.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<link rel="stylesheet" href="n_style.css" />
</head>
<body onload="onBodyLoad()">
</body>
</html>
onDeviceReady only fires once when the app starts up. See documentation:
http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html#deviceready
It's the function that indicates PhoneGap is fully loaded.
Your Javascript isn't running because you don't have an onBodyLoad function. I would wrap document.addEventListener("deviceready", onDeviceReady, false); in an onBodyLoad function. Also, if you are having javascript errors, try opening the page in firefox and using firebug to check for errors.