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;
});
});
Related
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.
I am making an application where a header with some Menus and a footer will stay in all the pages.
Now one way to this is write the code for header and footer in every page, which is a bad option.
The other option is using iframe,which I am using. here is my code-
<div style="height:75%;width:98%;">
<iframe name="someFrame" id="someFrame" frameborder="0" scrolling="yes" width="98%" height="100%"></iframe>
</div>
In this iframe I am calling the the contents of the other pages. I have one home page with a header and footer, and the middle portion will change using iframe.
To achieve the overlapping of iframes perfectly I use a jquery function which is below.
<script>
$("a").click(function(e) {
e.preventDefault();
$("#someFrame").attr("src", $(this).attr("href"));
$("a").removeClass("active");
$(this).addClass("active");
})
</script>
Now what I need is - is there any other way to do it?? That I can make 2 different pages for header and footer, and get the contents in every page? using java?? or ajax or whatever.. Any help will be appreciable...
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.html",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
demo_test.html
<h1>I am not part of this page</h1>
There is another way to solve your difficulty.create a html file for menu named navbar_menu.html
navbar_menu.html
<ul>
<li>Home</li>
<li>About Us</li>
<li>Ticket Sales</li>
<li>Merchandise
<ul>
<li>Products</li>
<li>Shopping Cart</li>
</ul>
</li>
<li>Past Shows
<ul>
<li>Photo Gallery</li>
<li>Video Clips</li>
</ul>
</li>
</ul>
In another html page say index.html. In index.html page code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$.get("navbar_menu.html", function(data) {
$("#header").html(data);
});
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
The standard way to achieve this would be to use PHP. In the page where you want the header html included add in: <?php include 'header.html';?> Then change the extension of the pages you put this code into to .PHP instead of .HTML .
You can use jquery load function to load the content into a container div.This way we can have separate fragments for header and footer and be reused across pages
For example
$('#headercontainer').load('ajax/header.html #header')
Please see
[http://api.jquery.com/load][1]
Hope this helps
Why not just use Asp.net with master pages. You can have a desktop and a mobile master page where you write the header, menu and footer once, then you just add content pages.
It also gives you a programming language to use. C# will allow you to do way more than just HTML and JavaScript. Plus you can setup web user controls and black box your controls.
If youre interested check out the free microsoft IDE at http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx
i find it strange. I couldn't figure it out why.
First of all, I put js files on the <head>. Something like this below:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
Furthermore, my code for menu navigation like below:
For HTML
<ul class="mainMenu">
<li>LINK 1
<ul class="subMenu">
<li>SUB LINK 1</li>
<li>SUB LINK 2</li>
<li>SUB LINK 3</li>
<li>SUB LINK 4</li>
</ul>
</li>
<li> LINK 2 </li>
</ul>
For JS:
$(document).ready(function(){
$('.mainMenu').children('li').on('click', function() {
$(this).children('ul').slideToggle('slow');
});
}
AND CSS:
.subMenu {
display: none;
}
Here is JSFIDDLE. It is working in JSFiddle but it's not working in my server. I am wondering why. Any idea?
I'm not sure if it's the case or not. You must put your code inside
$(document).ready(function(){ // here });
So your are telling jQuery to load/manipulate dom elements after all the HTML elements has been loaded.
Now here comes the point that why is your your fiddle is working.
Its because, $(document).ready(function(){ }); it's already built-in inside the js panal of jsFiddle. So whatever jQuery you write on that panel it all will go inside $(document).ready(function() { // here }) which means all your code will run after the page has finished loading.
Note : And of course maintain order when loading the scripts accordingly as you don't want to call a function that hasn't been loaded yet for sure.
Should be loaded first
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
When jQuery is loaded, load other components
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
First load jquery , jquery migrate is plugin so load after jquery framework
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
wrap the code in document ready
$(document).ready(function(){
$('.mainMenu').children('li').on('click', function() {
$(this).children('ul').slideToggle('slow');
});
});
___ ^--- not close
Add Below code and just try it again, It should work or not ??
$(document).ready(function(){
$('.mainMenu').children('li').on('click', function() {
$(.subMenu).css("display", "block");
$(this).children('ul').slideToggle('slow');
});
});
<html>
<head>
<title></title>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
$('#myList').delegate('li', 'click', function() {
var text = $(this).attr('id');
var hashname = "#" + "content";
var linkname = text + ".html";
alert(text);
$(hashname).load(linkname);
});
});
</script>
<ul id="myList" class="dropdown-menu">
<li id="about"> About us</li>
<li id="Services">Services</li>
<li id ="faq">FAQ</li>
</ul>
</head>
<body>
Main Content
</div>
<br />
<div id="content"></div>
</body>
</html>
I want to load header only once and want to dynamically load content by creating diff pages. Above code works well in mozilla but not workinf in Chrome or IE. Please help.
Below is Services.html
<p>This is dynamic content of service page</p>
<ul id="myList" class="dropdown-menu">
<li>Services</li>
</ul>
Are you running these from file:///? IE doesn't allow file access when running locally and Chrome requires --allow-file-access-from-files flag to be set when you launch the browser. Firefox doesn't have these restrictions, so your project would work as you expect there.
To get around these issues, run your project in a local webserver.
Try to use HTML helpers instead url strings. That urls you have probably isn't correct.
Try to do something like this in your header page:
<head>
<title></title>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
$('#myList').delegate('li', 'click', function() {
var url = $(this).data('url');
alert(text);
$("#content").load(url);
});
});
</script>
<ul id="myList" class="dropdown-menu">
<li id="about" data-url="#Url.Action("about", "myController")"> About us</li>
<li id="Services" data-url="">Services</li>
<li id ="faq" data-url="#Url.Action("faq", "myController")">FAQ</li>
</ul>
</head>
But normally what is done is something like this:
<html>
<head>
<title></title>
<script src="jquery-1.10.2.js"></script>
<ul id="myList" class="dropdown-menu">
<li id="about"> About us</li>
<li id="Services">Services</li>
<li id ="faq"><a href="#Url.Action("faq", "myController")>FAQ</a></li>
</ul>
</head>
<body>
Main Content
<br />
<div id="content">
#RenderBody()
</div>
</body>
</html>
UPDATE to complete the my answer to your question:
The code have some issues.
First, tags have a href so, you the user click the code executes is suppose the page be redirected to that link reference and on the JS is trying to do the same, what is a little strange.
Second, some JS functions don't work for every browsers. However .load() is supported in IE and Chrome but the problem could be on the $(hashname) and the url that is passed on linkname by the reason I refered above (I'm not expert but I think normally HTTP GET request not supports that structure of url with .html in the end). So it's better to try my solution and give feedback
I'm trying to get tabs working in IE8, using code directly off the examples page for Twitter Bootstrap, but they just aren't behaving the same way as they do on the example page.
Specifically, the inactive tabs always remain visible.
Code below:
<head>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js"></script>
</head>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">1...</div>
<div class="tab-pane" id="profile">2...</div>
<div class="tab-pane" id="messages">3...</div>
<div class="tab-pane" id="settings">4...</div>
</div>
<script>
$(function () {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
I've tried initiating the tabs both through using data-toggle tags and also using the suggested .tab() method but no difference... the inactive tabs are always visible!
JSfiddle link here (but jsfiddle doesn't work in IE8 anyway): http://jsfiddle.net/4gNpt/
SOLVED! - It appears that the first line of the html file must be
<!DOCTYPE html>
Otherwise it doesn't work properly at all.
Solved! - It appears that the first line of the html file must be
<!DOCTYPE html>
Otherwise it doesn't work properly at all.