I decided to design my new job that I use Ajax and i use this cod for load page
html
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="menu">
<ul>
<li class="page2" id="page2">PAGE TOW</li>
<li class="page3" id="page3">PAGE THREE</li>
</ul>
</div>
<div class="load"></div>
</body>
</html>
js
$(document).on('click','.menu li',function(){
var $this = $(this);
if($(this).hasClass("page2")) {
$(".load").load('page2.php');
}
else if($(this).hasClass("page3")) {
$(".load").load('page3.php');
}
});
This works properly ! But many times when I click on tabs Browser hangs...
My question is whether I badly written code?
Or this is normal in Ajax
If there is a way to help or not use of Ajax
The code is not written poorly, but you have chosen an inefficient method of solving this. By attaching your click event to $(document) you are causing a lot of unnecessary overhead and using a lot of resources the browser could be using elsewhere.
Instead, you should try to add the event handler to the closest parent element. Like so...
$('.menu li').on('click', function(e) {
//Run your code in here
});
See the accepted answer on this stackoverflow question for more information on why this is a better practice.
This answer here has a lot of good information on the subject as well.
Related
<html>
<head>
<title>Quiz Application</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
function ready()
{
if(document.getElementById("rb2").checked)
{
alert("correct");
}else if(document.getElementById("rb1").checked)
{
alert("incorrect");
}
else
{
alert("incorrect");
}
}
function nextPage()
{
window.location = "next.html";
}
</script>
</head>
<body>
<form method="post">
<center><h1>Quiz Application</h1></center><br><br>
<center>What does JVM stands for ?<br><br>
<radiogroup>
<input type="radio" id="rb1"/>Java Vendor Machine<br>
<input type="radio" id="rb2"/>Java Virtual Machine<br>
<input type="radio" id="rb3"/>Java Viral Machine<br>
<input type="submit" id="sub" value="Freeze" onclick="ready();"/><br>
<input type="submit" id="next" value="Next Question" onclick="nextPage();"/></center>
</radiogroup>
</form>
</body>
</html>
Above is my code for redirecting my page to next page after click event.
But it is not redirecting to next page.I went through many questions on stackoverflow as well but didnt succeed.
Please help me .
Thanks in advance.
What are you doing there? If you're doing it with jQuery mobile an example would look like this:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"> </script>
</head>
<body>
<div data-role="page" id="page1">
<p>This is page 1. If you want to go to Page 2 click here.
</div>
<div data-role="page" id="page2">
<p>This is page 2. If you want to go back to Page 1 click here.
</div>
</body>
</html>
Changing a page by function could look like this:
function changePage() {
$.mobile.changePage( "#loginPAGE", { transition: "none", changeHash: true });
}
Here's a pen: http://codepen.io/anon/pen/gaeoQE
Frameworks - Mobile App Development
So like i said in my comment, i would recommend you to use a framework. Since i don't know, how conversant you're in JavaScript and anything else i think you should start with jQuery. For mobile App development it's not one of the best frameworks in my opinion but it's easy to learn and thats important for you to start.
So jQuery is a thing for your website. For your mobile application you need jQuery mobile.
You go to that websites and download both. When your download is finished, you're going to open up your index.html and add the scripts to your <head></head> section so that it looks like the following:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
These things are important. Also the order in which you include the scripts is important.
After adding this to your header, you're able to access a whole bunch of functions. All of the features are testable inside a demo environment which can be found over here: jQuery mobile Demos (1.4.5).
When you have finished that, you're going to copy my code from my pen into your <body></body> and it should work. For changing a page via javascript you can use the function changePage() which i've already posted before.
I hope this will help you, if not please let me know where exactly i can help you.
I found out the solution for my query . i just wrote the following function onClick of a button (input type should be button and not submit then only it will work)
function nextPage()
{
document.location="nextpage.html"; //instead of window.location
}
I am trying to use jQuery for the first time and I am coding it by hand. But my jQuery code doesn't work at all... Here's my setup :
Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="mainCSS.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mainJQuery.js"></script>
</head>
<body>
<div class="test"> </div>
</body>
</html>
mainCSS.css
.test {
background-color:#FF0004;
border-radius:25px;
display:block;
height:500px;
width:500px;
}
mainJQuery.js
// JavaScript Document
$(document).ready(function() {
$('.test').click(function() {
$('.test').fadeOut('slow');
});
});
Just to state it for the record:
In order for your jQuery code to work, you need to link to the jQuery library in your HTML.
If you are following a tutorial that doesn't include this in the first step, you should find another tutorial to follow. If you got to this question because you did not follow the first step of your tutorial, you should read more carefully before falling back on StackOverflow, or risk getting some serious downvotes.
The two most common ways of including jQuery in your HTML page are:
1) Downloading the library, and linking to a local copy. In your <head> section:
<script type="text/javascript" src="/url/path/to/local/jquery.min.js"></script>
2) Linking to a remote copy of the jQuery on Google's CDN. Again, in <head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
If you don't link to jQuery using one of those options, or something similar, your code will not work. In most browsers you will be able to tell that this is the problem by opening the Javascript console, typing "jQuery" and getting an error like jQuery is not defined.
It's amazing that I couldn't find a duplicate question to close this in favor of, but then again I didn't click on every single "Why doesn't this simple jQuery script work" question on StackOverflow.
And there are a lot.
I found this script, that i want to implement into my webside.
http://codepen.io/johnmotyljr/pen/qhvue
It does exactly what i want it to do, BUT! I don't know how to put into my webside?! Where to put the JS and how?
The content that i need to change is stored in an html-file, but how do i get that content into my div with this script?
Hope you can understand what i'm asking for and sorry for my limited/bad english!
View the source code of your link, find the <iframe> tab, and the demo html is inside.
You can load that content via AJAX. So, building on the CodePen-example you gave, you could do something like this:
$('#kittens').click(function() {
$('div').load('kittens.html');
});
Where kittens.html is the URL of the html file you want to load.
Update:
Now that you have posted a link to your website, I notice a few more things:
You haven't got jQuery included. Between you <head></head> tags you
should include <script type="text/javascript"
src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Probably, you want the Resultater | Billeder | Video | Afkom links to load different content, right? Then, you should use
something like this:
In between <script type="text/javascript"></script>:
$('.hesteundertop a[href="#resul"]').click(function(e) {
$('.hestetekst').load('... Resultater URL ...');
e.preventDefault();
});
try this type of method.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
var kittens = "Kittens";
var puppies = "puppies";
var aardvark = "aardvark";
$('#kittens').click(function(){
$('div').html(kittens);
//$('div').load('kittens.html');
});
})
</script>
<body>
<ul>
<li id="kittens"></li>
<li id="puppies"></li>
<li id="aardvark"></li>
</ul>
<div>Click on the picture for description.</div>
</body>
</html>
I am building a simple web app for mobile platforms using jQuery Mobile and in that, I intend to read some data from an API sending it as JSON (which I have exposed from a server side Django based project), and then parses it using jQuery's mechanism and then I create list elements based off that data.
Now, I have the following index.html:
<html>
<head>
<title>Playism App</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jsonParser.js"></script>
<link rel="stylesheet" type="text/css" href="css/major.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">
</head>
<body>
<p>List of games: </p><br/>
<div id="gameContainer" data-role="page">
<ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">
<!-- Content here will be dynamically generated based on the JSON output parsed from the API feed -->
<li>Dummy</li>
</ul>
</div>
<script type="text/javascript" src="js/gamesRenderer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
renderGames();
});
</script>
</body>
</html>
Now, just to test I created that Dummy list element and it's rendering perfect but there is no styling applied to any of the new elements which I inject using .append() calls from jQuery. The code is as follows:
function renderGames(){
for (var i = objCreated.length - 1; i >= 0; i--) {
$("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");
};
}
and as can be seen in index.html, I am calling it at DOM ready but no jQuery mobile styling gets applied to these manually injected list elements whereas the Dummy element gets proper styling. I believe something is wrong with the order in which the elements are called.
Thanks in advance !
Don't get me wrong but this question was asked so many times, but here's a solution for you:
function renderGames(){
for (var i = objCreated.length - 1; i >= 0; i--) {
$("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");
};
$("ul#gamesList").listview('refresh');
}
You need to use:
$("ul#gamesList").listview('refresh');
When working with a dynamically added jQuery Mobile you must manually start markup enhancement process. Read more about it in this article.
One other thing, never use document ready with jQuery Mobile, they should not be combined. Read more about it here. Sometimes it works sometimes not. Basically when working with jQuery Mobile always use page events.
Your final javascript should look like this:
$(document).on('pagebeforeshow', '#gameContainer', function(){
renderGames();
});
function renderGames(){
for (var i = 10 - 1; i >= 0; i--) {
$("ul#gamesList").append("<li><a href='#''>Some object" + i + "</a></li></ul>");
};
$("ul#gamesList").listview('refresh');
}
Working example: http://jsfiddle.net/Gajotres/5uPfM/
Seems the for loop make the css cannot load properly. Don't know what is the 'objCreated'.
Try to migrate the code here in JSFiddle.
Here is the code:
<body>
<p>List of games: </p><br/>
<div id="gameContainer" data-role="page">
<ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">
<li>Dummy</li>
</ul>
</div>
</body>
$(document).ready(function(){
renderGames();
});
function renderGames(){
$("ul#gamesList").append("<li><a href='#''>Hello world!</a></li></ul>")
}
The css seems works on the injected elements. The list-style is "none" because of the jQuery Mobile UI css works.
first apply css and see your css file are linked properly
<link rel="stylesheet" type="text/css" href="css/major.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">
then JS and see your js file are linked properly
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jsonParser.js"></script>
<script type="text/javascript">
$(document).ready(function(){
renderGames();
});
</script>
First of all I' very new to jQuery and JavaScript but not to HTML and PHP.
I found many posts about that problem but no solution. I think I am doing something (completely?) wrong...
I've got two files, the index.php and content.php which should dynamically add content to the page.
index.php:
<!DOCTYPE html>
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="../css/jquery.mobile-1.1.1.min.css"></link>
<script type="text/javascript" src="../js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.1.min.js"></script>
<title>Ajax test</title>
<script language="JavaScript">
$(function(){
$('#page1').click(function(event) {
$('#content').load($(this).attr('href')).trigger("create");
return false;
});
});
$(function(){
$('#page2').click(function(event) {
$('#content').load($(this).attr('href')).trigger("create");
return false;
});
});
</script>
</head>
<body>
<div id="hm-agenda" data-theme="a" data-role="page">
<div data-theme="a" data-role="header">
<h1>Ajax test</h1>
</div>
<div id="content" data-role="content">
Default content
</div>
<div data-theme="a" data-role="footer" data-position="fixed" class="nav-glyphish-example">
<div data-role="navbar" class="nav-glyphish-example" data-grid="d" class="navdiv">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
</div>
</div>
</body>
</html>
So a click to "Page 1" or "Page 2" in the navigation should load content.php?page=x into the div with the id "content".
And this is how content.php looks like:
<ul data-role="listview" class="hm-list">
<li data-role="list-divider"><h3>You are on page: <?php print $_GET['page']; ?></h3></li>
</ul>
Loading the file into the content-div works fine put jQuery won't apply the styling stuff.
The strange thing is that after clicking the link in the navigation the style is getting applied for about one second and disappears immediately.
This example is online at: http://m.sepulturagenda.ch/ajax/
Any help is appreciated. I stock here for hours now...
Your problem is with this line:
$('#content').load($(this).attr('href')).trigger("create");
You are creating an asynchronous request via .load() and not waiting for it to complete before calling the .trigger("create") method. So basically you are calling the .trigger("create") method before there is any HTML to initialize.
You can utilize the callback function that you can pass to .load() to call the .trigger("create") method at the correct time.
For example:
$(function(){
$('#page1').click(function(event) {
$('#content').load($(this).attr('href'), function () {
$('#content').trigger("create");
}).trigger("create");
return false;
});
});
A Quick Note:
Is there a reason you're using .load() to load external content? jQuery Mobile will do this for you as long as the external content is in the proper format. Here is some documentation to explain what I mean: http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html
And a Side Note:
Using the document.ready event handler is not recommended when using jQuery Mobile. Instead you should bind to one of the jQuery Mobile page-events, like pageinit.
For example:
//place this in the global scope
$(document).on('pageinit', '#my-page', function () {
$('#page1').click(function(event) {
$('#content').load($(this).attr('href'), function () {
$('#content').trigger("create");
}).trigger("create");
return false;
});
});
Although since you're using an ID as the selector for your click event handler, you might as well delegate the event handler strait to the #page1 element.
For example:
$(document).on('click', '#page1', function () {
$('#content').load($(this).attr('href'), function () {
$('#content').trigger("create");
}).trigger("create");
return false;
});
Here is the documentation for jQuery Mobile events (see the large yellow warnings at the top of the page): http://jquerymobile.com/demos/1.1.1/docs/api/events.html
I'm sure there is a better way to do this but you could just manually tell it to add the "ui-btn-active" class..
$(function(){
$('#page2').click(function(event) {
$(".ui-btn-active").removeClass("ui-btn-active");
$('#content').load($(this).attr('href')).trigger("create");
$(this).addClass('ui-btn-active');
return false;
});
});