I'm asking you because I'm stuck on something stupid I can't find out ...
I started using phonegap a couple days ago and I was progressing quite well but this morning, my index.html doesn't care my js/index.js anymore !
I have a button that is supposed to fire an alert but when I click the button, nothing happens at all.
I understand I must have moved something wrong but could you please have a look ?
I tried to remove as many useless info as I could.
Here is my HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="jquery-1.7.2.js"></script>
<script src="jquery.mobile-1.1.0.js"></script>
<script src="jquery.url.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/AndroidHoloDarkLight.min.css" />
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>My Test App</h1>
</div>
<input type="button" name="goBack" id="goBack" onclick="goBack" value="Go Back to the previous View">
</div>
</body>
</html>
And here is the .js :
function goBack()
{
alert("test ...");
}
/*$("#bodyPage").ready(function(){
$.mobile.allowCrossDomainPages = true;
$("#page").bind("pageshow", function(event){
var url = $.url(document.location);
var arg1 = url.param("arg1");
$("#testP").text(arg1);
});
}
I'm learning by myself so I may have misunderstood something but could you please help enlightening me ?
Thanks a lot for your time.
Even though you've all been pretty useful in helping me getting better in javascript, the problem was much stupider...
In the .js file, I commented code with /* but I didn't use the */ because I thought it didn't matter much since I comment until the end. But I was wrong and I finaly found it thanks to everybody's help.
Have a nice day and thanks
in yout input tag try onclick="javascript:goBack();"
Try changing:
<input type="button" name="goBack" id="goBack" onclick="goBack" value="Go Back to the previous View">
in:
<input type="button" name="goBack" id="goBack" onclick="goBack()" value="Go Back to the previous View">
Update: There is something wrong in the file structure.
Advice: Do not use jQuery Mobile in mobile applications. Try more lightweight frameworks instead.
You habve included jquery two time:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery-1.7.2.js"></script>
Related
I am running XAMPP on a Windows box. Below is my test file:
<html>
<head>
<title>very nice file</title>
</head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<body>
<a class="expander" href="#">click me</a>
<div class="content">
I WANT TO HIDE THISSSS.
</div>
</body>
</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://raw.githubusercontent.com/redhotsly/simple-expand/master/src/simple-expand.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.expander').simpleexpand();
});
</script>
When I surf to that file in Internet Explorer, I see 'click me' and 'I WANT TO HIDE THISSSS'. When I surf to it in other browsers, I see 'click me', and clicking it will un-hide the 'I WANT TO HIDE THISSSS' text.
Searched all night and still have nothing! Any thoughts? Thanks!
Do you really need that expander? If you are just to hide/show a content. You can create one with few lines of code since you are using jquery
You can try this simple fiddle here https://jsfiddle.net/yzdthzhL/
you can play the code you want.
and by the way. I'm not sure if this is helpful or not but. It would nice to add your script inside your html document.
<html>
<head>
<script src="somelibrarieshere"></script>
</head>
<body>
<script src="somelibrarieshere"></script>
</body>
</html>
and not outside html block. It's better that way. :) Have a great day pal.
i'm sorry to bother you with a silly problem, but i've been learning jee lately and started using bootstrap as i've been told is a nice tool, anyway i'm making a simple jsp page with a form but i noticed whenever i try to use a dropdown it doesn't work !
i don't know what i'm missing, i'd very much appreciate if someone can take a look at my code and tell what's wrong :D (i made it as simple as it can be on button in the page to find where the problem is )
<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0">
<jsp:directive.page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false"/>
<jsp:output doctype-root-element="html"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
omit-xml-declaration="true" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Insert title here</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.css"></link>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"></link>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<script type="text/javascript" src="Bootstrap/jquery/jquery.js"></script>
<script type="text/javascript" src="Bootstrap/jquery/jquery.min.js"></script>
<script type="text/javascript" src="Bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="Bootstrap/js/Bootstrap.js"></script>
<script type="text/javascript" src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
</jsp:root>
I think my problem is that i'm missing the inclusion of some sort of file or somthing but i can't tell what is it, you can see i've tried including random ones to test but nothing :'(, i have the feeling it's something really stupid but i'd very much appreciate it if someone can help me please !
Thanks in advance guys
Maybe you could try this (see also here):
<script>
$(document).ready(function(){
$(".dropdown-toggle").dropdown();
});
</script>
You can use "select instead of ul" tag without "dropdown-menu". and "option instead of li".
You are missing the inclusion of your files.
I tried your dropdown, it works as it. I think your paths are not right because you said that:
fixed the problem with adding "<>script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">"
But jQuery is required by Bootstrap and already provided at the end ! So you missed this part at least.
<script type="text/javascript" src="Bootstrap/jquery/jquery.js"></script>
<script type="text/javascript" src="Bootstrap/jquery/jquery.min.js"></script>
<script type="text/javascript" src="Bootstrap/js/jquery.js"></script>
Furthermore you don't need jquery.js and jquery.min.js AND js/jquery.js
.min files are minified files. They do exactly the same job. And include three or four times a file is useless.
I advice you to use the tag ${pageContext.request.contextPath} in order to have the absolute path of your files. For example, if my app is called mywebapp on my server then ${pageContext.request.contextPath}/css/Bootstrap.css will give me /mywebapp/css/Boostrap.css
I hope it will help.
EDIT: Is it normal that your HTML file start with an XML tag ?
Please add in head otherwise It will not work
I am trying to build my personal website using express and want to put a datepicker on one of the page.
I tried to change the ejs file of this page, however, nothing works.
I am wondering if it is because that the layout.ejs file exists, and wondering how can I just load jquery-ui in only of the ejs.file? Because I cannot find any related npm to install . Many thanks for answering！XD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(function() {
$( "#datepick" ).datepicker();
});
</script>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
There is another similar question, but I think the answer does not works for me.
node.js - DatePicker jquery UI not workinng
When I just use Express and change the index.ejs like the following, it works , but when there are many pages, it seems that it cannot be loaded...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$('#datepick').datepicker();
});
</script>
</head>
<body>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
node.js - DatePicker jquery UI not workinng
For whom run into the same problem, this is the reference.
I finally found the answer by checking the code.I was unable to load JQuery for in the layout.ejs, I retyped the following in order to load the bootstrap, but actually by using https://npmjs.org/package/twitter-bootstrap-node twitter-bootstrap-node, there is no-need to load the javascripts again. This may be a common problems for beginners in Node.JS like me.Hope this answer can be helpful to people who run into the same problem and the code is in the answer of the related problem.
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/vendor/twitter/less/bootstrap.less"></script>
Hi look at this jsfiddle link http://jsfiddle.net/w7PHj/
you need to use like this....
$('#datepick').datepicker();
I'm sure I'm making a silly mistake but it took me hours and I couldn't find any solution for my problem. Everything seems ok but not working. I'm using Foundation 5 reveal. But modal window does not show. Here is my code:
HTML
<a class="openModal" href="#" data-reveal-id="imagemodal"><img src="image.jpg" /></a>
<div id="imagemodal" class="reveal-modal" data-reveal>Modal</div>
I've also included the following js files in body tag:
<script type="text/javascript" src="js/foundation/foundation.js"></script>
<script>
$(document).foundation();
</script>
<script type="text/javascript" src="js/foundation/foundation.reveal.js"></script>
Any help is appreciated in advance.
Put the call to foundation.reveal.js before you call $(document).foundation();.
I'm pretty sure this is because $(document).foundation(); initiates only those modules that have been specified prior to it, something that Foundation doesn't make clear in its notes.
Foundation offers you options to customize plugin initialization. By default, calling $('#scope').foundation(); will initialize all available plugins on the page.
I just wanted to add this piece of simple, near bare-bones modal markup, I spent nearly 4 hours last night getting it right, I don't think there's much out there to deal with these reveal-modal issues
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
</head>
<body>
reveal modal
<div class="reveal-modal" id="myNormal" data-reveal>
Modal
<a class="close-reveal-modal">close</a>
</div>
<script>
$(document).foundation();
</script>
</body>
I hope this is of any help for future visitors.
My problem is with Jquery mobile's changePage(), let me start out by saying i know there's a bunch of other post about this issue, but i have tried all the solutions without any luck so that's why i'm now asking for help.
I've build a Phonegap project, where each screen is = a .html file. i got my index.html that loads all the scripts needed for the entire app. Then my index.html loads a new page with $.mobile.changePage(). but when this happens the next page do'sent have any script's or css's attached to it why?
This if my index.html
<!--index page used to find out if the user should see the login or welcome page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.theme-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-2.0-original.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-fa.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.10.2.min.js" type="text/javascript"></script>
<!--Used to make sure theres as little delay on old devises as possible-->
<script src="buttonTapDelayJS.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="loginJS.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<script src="javaIndex.js" type="text/javascript"></script>
<script src="myJavaScript.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<!--Loads the css for the menu-->
<link href="menuStyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
var checkUser="admin";
function onDeviceReady() {
/*if the stored username is = the correctusername, it loads the welcome page if not it loads the login*/
if(window.localStorage.getItem("user") === checkUser){
$.mobile.changePage("welcome.html",{transition:"slide"});
//window.open("welcome.html", "_self");
} else {
//window.open("login.html", "_self");
$.mobile.changePage("login.html",{transition:"slide"});
}
}
</script>
</head>
<body onload="onDeviceReady()">
</body>
</html>
This is my login page
<!--Login page-->
<!DOCTYPE html>
<html>
<body onload="loadLogin();">
<!--Creates all content you see on the screen-->
<div data-role="page" id="login">
<div data-role="content">
<ul data-role="listview">
<div align="center" data-role="content">
<img src="icon.png" alt="">
</div>
<div data-role="content">
<label for="textinput">Indtast brugernavn</label>
<input type="text" name="textinput" id="textinput" value=""/>
</div>
<div data-role="content">
<label for="passwordinput">Indtast adgangskode</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</span> </div>
<div data-role="content">
<div>Login</div>
</div>
<div data-role="content">
<div></div>
</div>
</ul>
</div>
</div>
</body>
</html>
As stated in the start, my problem is that non of my functions on my login page works to give an example of that i got my infoButton that runs onClick="infoPopup(); and this function makes a popup navigator.notification.alert("Message", null, "Info", "OK"); But it do'sent show anything when i press it.
Am i loading my scripts wrong or whats wrong, any help would be really much appreciated?
EDIT 1:
If i copy all my index.html to all other pages what happens is this. my index.html links to my login.html correct. On the login page my onClick="infoPopup(); dosent work, but my onClick="saveLogin();myFunction();" works sort of. my login info does get saved but in my saveLogin(); i got a navigator.notification.alert(); but the alert aint popping up. i know that all of my functions work because they did when i used window.open(); instead of changePage. And the reason why i changed was because with window.open(); i cant get the jquery page transitions Any ideas?
EDIT 2:
Don't really know what i did but works now:) thanks for the reply's.
Even though i tired this alrdy what worked for me was to move all javascripts and css's to the index.html.
jQuery Mobile does not pull the whole page into the dom, it grabs the first data-role="page" element and its descendants and pulls that into the current dom.
So any scripts in the of the document will not be included.
I generally put all the functional JavaScript for my site on the index page and then when external pages are loaded into the dom they can benefit from the already loaded scripts.
Also, you can place JavaScript code inside the data-role="page" element and it will be included when jQuery Mobile does its AJAX load of the page.
Repeat the head section with all the scripts in each html page, since change page will cause reload of pages and will recreate head section.
simple change like -
$.mobile.changePage("welcome.html",
{transition:"slide"}
);