jQuery loading problem

  • (2 Pages)
  • +
  • 1
  • 2

21 Replies - 3508 Views - Last Post: 22 February 2012 - 06:38 AM

#16 C_coder   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 59
  • Joined: 25-May 11

Re: jQuery loading problem

Posted 09 February 2012 - 08:07 AM

This is my index.php page
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript src="js/loader.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" type="text/css" media="all">




<script>
$(document).ready(function(){

	$(#bureau).bind("click", function(){
	
		$("#image").load("p_bureau.html);

		});
	});
</script>






</head>
	<div class="header">
			<a href="#" id="home" class="nav">Home</a>
			<a href="#" id="bureau" class="nav">Bureau</a>
			<a href="#" id="modifier" class="nav">Modifier Data</a>
	</div>


<div class="container">

	<title>Machines</title>
	
	
	<body>
		<div class="content">
			<div class="formulaire">
		
			</div>
			
			<div class="schema" id="image">
			
			
			</div>
			
		</div>

	</body>
	<div class="footer">
		<?php include ('footer.php'); ?>
	</div>
</div>
</html>


This is my p_bureau.html page, is just an exemple, you can put your own image
<img src="Penguins.jpg" />


sorry but don't know why I can't upload stuff

This post has been edited by C_coder: 09 February 2012 - 08:08 AM

Was This Post Helpful? 0
  • +
  • -

#17 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: jQuery loading problem

Posted 09 February 2012 - 08:12 AM

View PostC_coder, on 09 February 2012 - 02:36 PM, said:

But when you have multiple links you can't use that.
$("p").bind("click", function(){
			$("#targetArea").load("drag.html");
		});

in your "p" your are calling the "p" but if you have multiple p's how are you going to andle that?...

Like this:
$(document).ready(function() {

	// There is no need to bind separate functions
	// to each link. They can all share a function,
	// as long as that function is made to act
	// differently based on which element called it.
	$("#header > a").click(function(e) {
		// The "this" variable will be set to the
		// calling element.
		var self = $(this);
		
		// And then all you have to do is use some
		// value that is unique to that element to
		// trigger whatever behavior is needed.
		// In this case, if you have the "href"
		// attribute of each point to the page to
		// be loaded, you can simply do this:
		$("#targetArea").load(self.attr("href"));
		
		// And then you do this to preven the link
		// from doing what it would normally do.
		// That is, this prevents the browser from
		// redirecting you to the "href" of the link.
		e.preventDefault();
	});
 
});

In that example, the links would look like they would if your intent was to actually redirect the user to the page rather than load it into the page. This, besides looking more natural, has the added benefit that users using ancient browsers, or are to paranoid to have Javascript enabled, will also be able to use the links. (Graceful degradation)

View PostC_coder, on 09 February 2012 - 03:07 PM, said:

	$(#bureau).bind("click", function(){

The quotes around the selector (#bureau) are missing. This is a syntax error, and the Javascript developer tools in Chrome should display it.
Was This Post Helpful? 1
  • +
  • -

#18 C_coder   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 59
  • Joined: 25-May 11

Re: jQuery loading problem

Posted 09 February 2012 - 08:23 AM

i wrote it like this...

<script>
$(document).ready(function() {


	$("#header > a").click(function(e) {
		
		var self = $(this);
		
	
		$("#image").load(self.attr("p_bureau.html"));
		
		
		e.preventDefault();
	});
 
});

</script>



not working.... :oops:
Was This Post Helpful? 0
  • +
  • -

#19 revolutionx   User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: jQuery loading problem

Posted 09 February 2012 - 08:26 AM

What error message are you getting in the browser console?

$("#image").load(self.attr("p_bureau.html"));


should be

$("#image").load(self.attr("href"));


As this says get the links' href attribute you clicked on, and then load it.

You also need to edit where all the links in the navigation point. At the moment they aren't set to anything:

     <a href="#" id="home" class="nav">Home</a>
     <a href="#" id="bureau" class="nav">Bureau</a>
     <a href="#" id="modifier" class="nav">Modifier Data</a>

This post has been edited by revolutionx: 09 February 2012 - 08:31 AM

Was This Post Helpful? 0
  • +
  • -

#20 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: jQuery loading problem

Posted 09 February 2012 - 08:40 AM

Looks like <div class="header"> is a class, not an ID like I assumed it was. So you'd have to do this: $(".header > a").click(...).

However, if a class only applies to one element, it really should be an ID.
Was This Post Helpful? 1
  • +
  • -

#21 C_coder   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 59
  • Joined: 25-May 11

Re: jQuery loading problem

Posted 09 February 2012 - 08:41 AM

Thanks mate...
It's working
Some +'s for you!

Thanks again!
Was This Post Helpful? 0
  • +
  • -

#22 C_coder   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 59
  • Joined: 25-May 11

Re: jQuery loading problem

Posted 22 February 2012 - 06:38 AM

SO, my problem was solved with the help that you gave me...but now I have one other prblem! =(
in the page I've putten a <?php include ?>, the link still works put the include doesn't work!
Any ideas?
Was This Post Helpful? 0
  • +
  • -
  • (2 Pages)
  • +
  • 1
  • 2