Using an Uploadify and JGrowl combo:
<link rel="stylesheet" type="text/css" href="css/default.css" /><link rel="stylesheet" type="text/css" href="css/jgrowl.css" />
<script type="text/javascript" src="js/jquery1.4.4.js"></script>
<script type="text/javascript" src="js/jgrowl.js"></script>
<link rel="stylesheet" type="text/css" href="css/artworkDesigner.css" />
<link href="js/uploadify-2.1.4/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/uploadify-2.1.4/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/uploadify-2.1.4/swfobject.js"></script>
<script type="text/javascript" src="js/uploadify-2.1.4/jquery.uploadify.v2.1.4.min.js">/script>
<script type="text/javascript">
// <![CDATA[
var uploadType = "art";
var templateID = "42scs";
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader': 'js/uploadify-2.1.4/uploadify.swf',
'script': 'js/uploadify-2.1.4/UploadHandler.ashx',
'cancelImg': 'js/uploadify-2.1.4/cancel.png',
'scriptData': { 'type': uploadType, 'templateID': templateID },
'auto': true,
'multi': true,
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.png;*.gif;*.bmp;*.jpeg',
'queueSizeLimit': 90,
'sizeLimit': 4000000,
'buttonText': 'Choose Images',
'folder': '/uploads/test',
'onComplete': function(event, ID, fileObj, response, data) {
if (response != "1") {
alert(response); // ALERTS 'ERROR TEXT' which is expected
// DOESNT RUN THIS LINE:, AND REST OF SCRIPT SEEMS TO FREEZE
$.jGrowl("<strong>Error!</strong><br />" + response, { sticky: true });
alert("flag"); // THIS IS NOT RUNNING
} else {
alert(fileObj.name + "\n" + fileObj.filePath + "\n" + ID + "\n");
alert(response);
}
}
});
});
// ]]></script>
This script works fine, when templateID is set to a real number (without a string at the end to purposefully throw an error), but when an invalid string is passed in 42scs as shown in the code above, the script alerts
"Some error text"
Which is the correct return value when an exception is thrown server side. Then the script just stops doing anything else, when it is meant to throw the Jgrowl error. Any ideas why this isn't happening?
I'm using Jgrowl exactly the same on another page and it works fine.
Double reference to Jquery library will conflict:
<script type="text/javascript" src="js/jquery1.4.4.js"></script>
<script type="text/javascript" src="js/uploadify-2.1.4/jquery-1.4.2.min.js"></script>
Related
js: i use simple alert to display the location, and use phonegap build to compile. Device ready alert is shown! But not any other alerts!
document.addEventListener("deviceready", getDeviceLocation , false);
function getDeviceLocation () {
alert('device ready');
navigator.geolocation.getCurrentPosition(showPosition, showError, { enableHighAccuracy: true } );
}
function showPosition(position) {
alert('show postion called');
alert("Latitude: " + position.coords.latitude +
"Longitude: " + position.coords.longitude);
}
function showError(error) {
alert('show error called');
alert("Errorcode: " + error.code +
"Errormessage: "+ error.message );
}
html:the html page is as follows:
<!DOCTYPE html>
<html ng-app>
<head>
<link rel="stylesheet" href="style.css">
<!--<link rel="stylesheet" href="bootstrap.css">-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.css">
<!-- Latest compiled and minified JavaScript -->
<script src="angular.min.js"></script>
<script src="cordova.js"></script>
<script src="angular.animate.min.js"></script>
<script src="angular.route.min.js"></script>
<link rel="stylesheet" href="font-awesome.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
</body>
<script type="text/javascript" src="pro.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="script.js"></script>
</html>
This code works for me. Hope will help you.
newMapForGuest: function()
{
// setting here default latitude and longitude in case geolocation does not work.
var defaultLatLng = new google.maps.LatLng(1.290, 103.851);
if ( navigator.geolocation )
{
function success(pos) // function will call on success
{
alert('Latitude: '+ pos.coords.latitude +' Longitude: '+pos.coords.longitude);
}
function fail(error) // function will call on fail
{
alert('error message: ' +error);
}
// intializing geolocation to get current position
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 10000});
}
else
{
// in case geolocation does not work then call code mentioned here.
}
},
i am using phonegap for android application to get external card,
i am using this code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello World</title>
<link rel="stylesheet" href="css/index.css" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="cordova.js" type="text/javascript"></script>
<script type="text/javascript">
window.appRootDirName = "app";
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("device is ready");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
alert(window.appRootDir.fullPath);
}
function fail() {
console.log("failed to get filesystem");
}
function gotFS(fileSystem) {
console.log("filesystem got");
window.fileSystem = fileSystem;
fileSystem.root.getDirectory(window.appRootDirName, {
create: true,
exclusive: false
}, dirReady, fail);
}
function dirReady(entry) {
window.appRootDir = entry;
console.log("application dir is ready");
}
</script>
</head>
<body>
</body>
</html>
Its returns file://mnt/sdcard/app - this is my internal phone storage path
the external path is file://mnt/ext_card/app
How can i get external card path in phonegap?
Finally i found we can't get the external SD Card Path,
Environment.getExternalStorageState();
Its returns only Internal SD Card path
Reference:
http://developer.android.com/reference/android/os/Environment.html#getExternalStorageDirectory()
Using auto complete in jquery. I am facing a problem which
TypeError: $(...).autocomplete is not a function
I included all the necessary script files. I am not able to understand where I made the mistake. How can I resolve this?
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.hashchange.min.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.easing.1.3.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.tools.min.js" ></script>
<script>
$(document).ready(function () {
$('#namanyay-search-box').keyup(function (e) {
var searched = $('#namanyay-search-box').val()
$.getJSON('get_data', 'title=' + searched, function (result) {
var elements = [];
$.each(result, function (i, val) {
elements.push(val.merchant_name)
})
$('#namanyay-search-box').autocomplete({
source: elements
})
})
});
var indicator = $('#indicator'),
indicatorHalfWidth = indicator.width() / 2,
lis = $('#tabs').children('li');
$("#tabs").tabs("#content section", {
effect: 'fade',
fadeOutSpeed: 0,
fadeInSpeed: 400,
onBeforeClick: function (event, index) {
var li = lis.eq(index),
newPos = li.position().left + (li.width() / 2) - indicatorHalfWidth;
indicator.stop(true).animate({
left: newPos
}, 600, 'easeInOutExpo');
}
});
});
</script>
you are missing jQuery UI library, include the script and css files from jQuery UI
Also remove the duplicate jquery library.
download this http://code.jquery.com/ui/1.10.3/jquery-ui.js and place it in assets and add the code below
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-ui.js" ></script>
I'm building a project made of several jquery mobile pages, each has a navbar.
when I view each page the $(document).ready function fires up well, but when I go to the page through the navbar it won't fire up.. also in the chrome debugger I see only one html page (the one I'm currently viewing) in the source folder.
when I refresh the page the function works ok
tried to replace the "$(document).ready(function () {" with:
"$("div[data-role*='page']").live('pageshow', function(event, ui) {" as someone suggested
but that doesn't work as well.
that's the first page I load:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: "getdata.aspx/return_member_list",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (res) {
var parsedData = JSON.parse(res.d);
var tableStr = "<table class='CSSTableGenerator'>";
$.each(parsedData, function () {
tableStr += "<tr><td>" + this.fName + "</td><td>" + this.lName + "</td></tr>";
});
tableStr += "</table>";
$('#tableDiv').html(tableStr);
},
error: function (res, msg, code) {
// log the error to the console
alert("The following error occured: " + msg + " " + code);
} //error
});
});
</script>
</head>
<body>
<div id="page1" data-role="page" data-theme="a">
<div data-role="header" data-theme="a">
<h1>חברי העמותה</h1>
</div>
<div data-role="navbar">
<ul>
<li>חברי העמותה</li>
<li>בניית צוות</li>
<li> בדיקה</li>
</ul>
</div>
<div data-role="content">
<div id="tableDiv"></div>
</div>
<div data-role="footer">
<h1>footer area</h1>
</div>
</div>
</body>
</html>
And below are the second and third page's head:
build.htm:
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function save_crew()
{
p_num = new Object();
p_num.p1 = p1.value;
p_num.p2 = p2.value;
p_num.p3 = p3.value;
p_num.p4 = p4.value;
l_num = new Object();
l_num.l1 = l1.value;
l_num.l2 = l2.value;
l_num.l3 = l3.value;
s_num = new Object();
s_num.s1 = s1.value;
s_num.s2 = s2.value;
s_num.s3 = s3.value;
var photo = { 'p1': p_num.p1, 'p2': p_num.p2, 'p3': p_num.p3, 'p4': p_num.p4 };
var light = { 'l1': l_num.l1, 'l2': l_num.l2, 'l3': l_num.l3, 'l4': l_num.l4 };
var sound = { 's1': s_num.s1, 's2': s_num.s2, 's3': s_num.s3, 's4': s_num.s4 };
// Put the object into storage
localStorage.setItem('photo', JSON.stringify(photo));
localStorage.setItem('light', JSON.stringify(light));
localStorage.setItem('sound', JSON.stringify(sound));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('sound');
var ro = JSON.parse(retrievedObject);
alert(ro.s2);
window.location.href="test.htm";
}
</script>
</head>
test.htm:
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
var sound_RO = localStorage.getItem('sound');
var photo_RO = localStorage.getItem('photo');
var light_RO = localStorage.getItem('light');
sound_RO = JSON.parse(sound_RO);
photo_RO = JSON.parse(photo_RO);
light_RO = JSON.parse(light_RO);
$.each(sound_RO, function (index, value) {
alert(value);
});
$.ajax({
type: "POST",
url: "getdata.aspx/return_prof",
data: "{prof:'צלם'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (res) {
var parsedData = JSON.parse(res.d);
$('[data-role="content"]').append('<div id="collapsible-set" data-role="collapsible-set"></div>');
$("#collapsible-set").append('<div id="collapsible" data-role="collapsible"></div>');
$("#collapsible").append('<h3>צלמים </h3>');
for (i = 0; parsedData[i] != null; i++) {
$("#collapsible").append('<p>' + parsedData[i].fName + ' ' + parsedData[i].lName + '</p>');
}
$('[data-role="content"]').trigger('create');
},
error: function (res, msg, code) {
// log the error to the console
alert("The following error occured: " + msg + " " + code);
} //error
});
});
</script>
</head>
Reason
When jQuery Mobile loads pages after the initial one (with ajax), it will only load its BODY content, which means any js or css file initialized in HEAD (and if it is not initialized in first loaded HTML) will be disregarded. So all your custom js code will never be executed.
Solution
Move all of your js code into the first HTML file
You should create a new js file, name it whatever you want. Put all of your js code (from every page) into it. Then initialize it in the first HTML file to load.
Move your js code into the page BODY
Simply open every page and move its javascript code from HEAD to the BODY. Because of this, javascript code will be loaded into the DOM and executed when page is shown.
Final thoughts
All of this is described in more details + examples in my other answer/article: Why I have to put all the script to index.html in jquery mobile
You should also think about switching to the jQuery Mobile page events instead of document ready. Document ready usually works correctly but sometimes it will trigger before page is loaded into the DOM. That why jQM page events must be used instead. They will make sure page content is triggered only after page is safely loaded into the DOM. To find out more take a look at this answer/article: jQuery Mobile: document ready vs page events
I've been working on this for a couple of days now and have been unable to find a solution. Basically, I have to JS scripts in my head that won't execute the $(document).ready(...). The strange thing is that I have other scripts that work with it just fine. Here are the two I am having problems with: (I've added a couple comments about what I have tried)
<% content_for(:head) do %>
<script type="text/javascript">
$(document).ready(function() {
$('.button-print-ticket').click(function(e) {
e.preventDefault();
var header = $('.social-header');
header.queue(function() {
var search_string ='#map-canvas img[src=https://maps.gstatic.com/mapfiles/google_white.png]';
var glink = $(search_string).parent().parent();
glink.replaceWith(glink.html());
$(this).dequeue();
});
header.hide();
header.queue(function() {
window.print();
$(this).dequeue();
});
header.queue(function() {
$('.social-header').show();
$(search_string).parent().replaceWith(glink);
$(this).dequeue();
});
});
});
</script>
<script type="text/javascript">
//an alert here works
if(screen.width >= 800) {
//an alert here works too
$(document).ready(function() {
//an alert here only works in the console
$(document).ready(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'top':'160px'},500);
});
});
$('#boxclose, #bt-fbshare, #bt-tweet, #bt-email').click(function(){
$('#box').hide("drop", { direction: "up" }, 100, function(){
$('#overlay').fadeOut('fast');
});
});
$(document).keyup(function(e) {
if (e.keyCode == 27){
$('#box').hide("drop", { direction: "up" }, 100, function(){
$('#overlay').fadeOut('fast');
});
}
});
});
}
</script>
<% end %>
I also included the Ruby On Rails tag because it is the only difference that I can discern. (The JS IS shown in Firebug) I don't have an onload in my <body> tag either. Another oddity is that it used to work and I don't recall making any changes to either of these scripts.
Edit 2:
One other thing: I can also put console.log($) just before if (screen-width >= 800) and it tells me that $ is a function.
Edit:
Here is the generated HTML:
<head>
<style type="text/css">#media print { .gmnoprint { display:none }}#media screen { .gmnoscreen { display:none }}</style>
<title>Web Page</title>
<meta content="text/html;charset=UTF-8" http-equiv="content-type"/>
<meta content="ALL" name="robots"/>
<meta content="5 Days" name="revisit-after"/>
<meta content="EN" name="language"/>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0"/>
<link type="text/css" rel="stylesheet" media="screen, projection, print" href="/stylesheets/screen.css?1347374478"/>
<link type="text/css" rel="stylesheet" media="screen, projection, print" href="/stylesheets/global.css?1346943598"/>
<link type="text/css" rel="stylesheet" media="print" href="/stylesheets/print.css?1343928684"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 7]><link href="/stylesheets/ie7.css?1343928684" media="screen, projection" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if !IE]><link href="/stylesheets/media.css?1343928684" media="screen, projection" rel="stylesheet" type="text/css" /><![endif]-->
<script type="text/javascript" src="/javascripts/jquery.min.js?1343928684"></script>
<script type="text/javascript" src="/javascripts/jquery.ui.min.js?1343928684"></script>
<script type="text/javascript" src="/javascripts/jquery.ajax-submit.js?1343928684"></script>
<script type="text/javascript" src="/javascripts/modernizr-2.js?1343928684"></script>
<script type="text/javascript" src="/javascripts/date.format.js?1343928684"></script>
<script type="text/javascript" src="/javascripts/geo.js?1343928684"></script>
<script type="text/javascript" src="/javascripts/spin.min.js?1343928684"></script><style></style>
<script type="text/javascript" src="/javascripts/application.js?1347326686"></script>
<script type="text/javascript" src="/javascripts/global.js?1345692570"></script>
<script type="text/javascript">
var logged_in = true;
$(function() {
if (logged_in) {
$('.signed-in').show();
$('.signed-out').hide();
} else {
$('.signed-in').hide();
$('.signed-out').show();
}
$('.sign-out-link').click(function(e) {
e.preventDefault();
$('.signed-in').hide();
$('.signed-out').show();
logged_in = false;e
window.location='/customers/destroy_session';
});
});
</script>
<!--<script type="text/javascript">
document.write(unescape("%3Cscript src='" + ((document.location.protocol=="https:")?"https://snapabug.appspot.com":"http://www.snapengage.com") + "/snapabug.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">
SnapABug.addButton("--------","0","55%");
</script>-->
<style type="text/css">
#map-canvas { width : 100%; height: 100%; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true" type="text/javascript"></script><script type="text/javascript" src="https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/14/main.js"></script>
<script src="/javascripts/google.maps.styled-marker.js" type="text/javascript"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var venueMarker = new google.maps.Marker;
var pu_map;
var map;
$(function() {
var latlng = new google.maps.LatLng(40.256676, -111.644755);
var mapOptions = {
zoom : 13,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP,
disableDefaultUI : true,
zoomControl : true
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
new google.maps.Marker({
position : latlng,
map : map
});
});
$(function() {
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(40.256676, -111.644755);
var mapOptions = {
zoom : 13,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP,
disableDefaultUI : true,
zoomControl : true
};
pu_map = new google.maps.Map(document.getElementById("popup_map_cont"), mapOptions);
directionsDisplay.setMap(pu_map);
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.button-print-ticket').click(function(e) {
e.preventDefault();
var header = $('.social-header');
header.queue(function() {
var search_string ='#map-canvas img[src=https://maps.gstatic.com/mapfiles/google_white.png]';
var glink = $(search_string).parent().parent();
glink.replaceWith(glink.html());
$(this).dequeue();
});
header.hide();
header.queue(function() {
window.print();
$(this).dequeue();
});
header.queue(function() {
$('.social-header').show();
$(search_string).parent().replaceWith(glink);
$(this).dequeue();
});
});
});
</script>
<script type="text/javascript">
if(screen.width >= 800) {
$(document).ready(function() {
$(document).ready(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'top':'160px'},500);
});
});
$('#boxclose, #bt-fbshare, #bt-tweet, #bt-email').click(function(){
$('#box').hide("drop", { direction: "up" }, 100, function(){
$('#overlay').fadeOut('fast');
});
});
$(document).keyup(function(e) {
if (e.keyCode == 27){
$('#box').hide("drop", { direction: "up" }, 100, function(){
$('#overlay').fadeOut('fast');
});
}
});
});
}
</script>
<script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/14/%7Bcommon,util,marker%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/14/%7Bmap%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/14/%7Bonion%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/14/%7Bcontrols%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/14/%7Bstats%7D.js"></script><script async="true" type="text/javascript" src="http://a.adroll.com/j/roundtrip.js"></script>
Maybe you should try putting all your JS code in the same tag script and $(document).ready() function
<% content_for(:head) do %>
<script type="text/javascript">
$(document).ready(function() {
$('.button-print-ticket').click(function(e) {
e.preventDefault();
var header = $('.social-header');
header.queue(function() {
var search_string ='#map-canvas img[src=https://maps.gstatic.com/mapfiles/google_white.png]';
var glink = $(search_string).parent().parent();
glink.replaceWith(glink.html());
$(this).dequeue();
});
header.hide();
header.queue(function() {
window.print();
$(this).dequeue();
});
header.queue(function() {
$('.social-header').show();
$(search_string).parent().replaceWith(glink);
$(this).dequeue();
});
});
if(screen.width >= 800) {
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'top':'160px'},500);
});
$('#boxclose, #bt-fbshare, #bt-tweet, #bt-email').click(function(){
$('#box').hide("drop", { direction: "up" }, 100, function(){
$('#overlay').fadeOut('fast');
});
});
$(document).keyup(function(e) {
if (e.keyCode == 27){
$('#box').hide("drop", { direction: "up" }, 100, function(){
$('#overlay').fadeOut('fast');
});
}
});
}
});
</script>
<% end %>
And as marteljn comments, be sure to reference JQuery in the head section
<script type="text/javascript" src="jquery.js"></script>
If it's still not working you can post the generetad HTML as proposed by jfriend00.