I have been making a website that has lots of pages. Hence decided to put the navigation bar in a separate php file to reduce re-work in all those pages in case of changes. So in my index.php I have included the navigation bar like:
<?php include 'navbar.php'; ?>
And the navbar.php looks like:
<div id="nav">
<ul>
<li pg="#home" >home</li>
<li pg="#pack" >packages</li>
<li pg="#about" >about</li>
</ul>
</div>
In the index.php, I have a javascript onClick function to select the <li> from navbar:
<script type="text/javascript">
var oldpg = "#home";
$(document).ready(function() {
$('#nav ul li').click(function() {
//here are the codes to hide/show divs });
});
</script>
But when you click those <li> nothing happens. I think the js is not picking up the elements from the php. How can I refer to those elements in a separate php file?
You need to fix your JavaScript:
$(document).ready(function() {
$('#nav ul li').click(function() {
//here are the codes to hide/show divs });
});
}); // you left off this closing
You can use Chrome DevTools or Firebug to view the console.
Use on and try. Not tested but that may be the problem here. Try
$(document).ready(function() {
$(document).on('click', '#nav ul li', function(e) {
//Your code
});
});
Also make sure that you included jQuery library
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
The code you showed us is correct. As long as the div with id "nav" is indeed being displayed, make sure you are including the jQuery library correctly. If it is, your error must reside inside whatever you did inside the click event handler $.click (in //here are the codes to hide/show divs).
Thanks for replying #Retsam #Campari #Chris #Ankit
As #Retsam said, I tried with Chrome console and found the error to be
Uncaught reference error: $ not defined (Firebug console didn't give any error/message)
The reason was because I had put my code before linking with the jQuery library.
So I moved my
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
above the onClick function and it worked.
Silly me ...
Thanks guys
Related
I am trying to test the jQuery GET method, but what I am getting as result is completely insane. All I am trying to do is call a function from my controller with jQuery and then display the echoed value in a div within my view. Below is my code and finally a breakdown of the problem I am encountering.
Controller
public function generate_suggestions2() {
echo "James";
}
View views\suggestions_v.php
<body>
//This DIV is used a button to call the jQuery function
<div id="next_btn">
<p>Click here to display a name</p>
</div>
//In this div the value retrieved by the jQuery should be displayed
<div id="listB"></div>
//This is the function that calls the function within my controller
<script type="text/javascript">
$( "#next_btn" ).click(function() {
$.get("core/generate_suggestions2/",
function(data) {
$( "#listB" ).html(data);
});
});
</script> //For some reason I need to put the script at the end of the body. When it's in the head nothing happens when I click the button. Also something I do not understand.
</body>
Now the problem is that when I click the DIV next_btn it does NOT display the James in the DIV listB.
Instead it populates the DIV listB with my source code from my main view views\core_v.php
I have no idea how this is even remotely possible, so please if you have a clue or even better you know what I am doing wrong please tell me. I am trying to get this to work for the past three days without any success or progress :(
Try using this code in your view
<script type="text/javascript">
"$( "#next_btn" ).click(function() {
$.get("<?php echo site_url().'/core/generate_suggestions2';?>",
function(data) {
$( "#listB" ).html(data);
});
});"
</script>
Also delete the </script> tag just right before this block comment.
Regarding this comment you have:
//For some reason I need to put the script at the end of the body. When it's in the head nothing happens when I click the button. Also something I do not understand.
It is because the DOM is not yet fully loaded and Javascript executes its code when the browser has finished loading the DOM you are referring to. So you either have to put it after the DOM element you want to edit, like you do now or you could use $(document).ready(function(){
}
); .
Read more about it here
This line is pretty strange:
</script><script type="text/javascript">
Try to delete first closing tag 'script' on it.
I've tried several options to try and load the content from a div on one page with id="container" into a div on a different html page id="landing".
I used the answer here and also lots of variations of it
Load content of a div on another page
I've run a test and Jquery is being loaded.
The test files are here http://www.salcombeyurts.co.uk/test/landing.html
My code looks like this:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
This will eventually end up on a PHP page. Part of a Joomla site.
You run the script before the #landing div is defined.
Run your code after the DOM ready event
$(function(){
$('#landing').load('source.html #container');
});
It seems like the suggestion you got was to do an AJAX request and load the entire page into the #container div on the current page, which is not a bad idea. What you seem to be trying to do, on the other hand, is load the page and then get the content of a div inside that page and put it in a container div on the current page, which is overly complicated and a bad solution to what ever the problem is.
Here is my solution none the less
$(function() {
$.get('page with the div you want', function(data) {
var content = $(data); //turn the page into a jquery object
var div = content.find('#div'); // this is the div you want the content from
$('#container').html(div.html()); // this will set the content of the current div
});
});
I would move your script to the bottom of the page and replace it like so.
Original:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
New:
<script type="text/javascript">
$(document).ready(function() {
$('#landing').load('source.html #container');
});
</script>
Note the space removal between source.html and #container.
I'm pulling my hair out with this bug, although I'm sure it's something obvious. Apologies if it is.
The following javascript successfully sets my cookie:
<script type="text/javascript">
$(document).ready(function(){
$.post('../setCookie.php',{'region':'test'});
});
</script>
But as soon as I tie the same code to an onclick event, like so...
<script type="text/javascript">
$(document).ready(function(){
$("#us a").click(function(){
$.post('../setCookie.php',{'region':'en-us'});
});
$("#uk a").click(function(){
$.post('../setCookie.php',{'region':'en-gb'});
});
});
</script>
<ul>
<li id="uk"><a href="http://www.example.com/uk">
<span>Enter UK site</span></a></li>
<li id="us"><a href="http://www.example.com/us">
<span>Enter US site</span></a></li>
</ul>
..it no longer sets a cookie! Even though the same code is called an executed in exactly the same way (I step through it fine, and see everything as it's supposed to be).
Repeat: The javascript is firing fine. I am stepping through setCookie.php and everything is the same... except no cookie at the end of it.
What's going on? I'm guessing it's browser security or something?
For anyone who's interested, here's how I solved it:
<script type="text/javascript">
$(document).ready(function(){
$("#us a").click(function(e){
e.preventDefault();
$.post('../setCookie.php',{'region':'en-us'},
function() {
window.location = "http://www.example.com/us";
}
);
});
$("#uk a").click(function(e){
e.preventDefault();
$.post('../setCookie.php',{'region':'en-gb'},
function() {
window.location = "http://www.example.com/uk";
}
);
});
});
</script>
I don't see anything stopping the normal link click going through? If you have nothing preventing the normal a href to go through, there won't be any time to do the $.post request before the page changed already.
Try the following:
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$.post('../setCookie.php',{'region':'test'});
});
});
It will stop the page change for links, but at least should pass the cookie. Now, if you want the page to be loaded as well, then add a onComplete method to the request, so that once the cookie data has been succesfully sent, you can then continue the page change.
Place this code where the < script > tags is at: (I assume the < head >)
$(document).ready(function(){
$("#us a").click(function(){
$.post('../setCookie.php',{'region':'en-us'});
});
$("#uk a").click(function(){
$.post('../setCookie.php',{'region':'en-gb'});
});
});
If it was a security issue , you will see an error on your console (firebug\webkit\IE dev tools)
I suppose what I would do in this situation is changing the click event and put it here:
<script type="text/javascript">
$(document).ready(function(){
$("#someid > li").click(function(){
$.post('../setCookie.php',{'region':$(this).attr("id")});
});
});
</script>
and then..:
<ul id="someID">
<li id="uk"><a href="http://www.example.com/uk">
<span>Enter UK site</span></a></li>
<li id="us"><a href="www.example.com/us">
<span>Enter US site</span></a></li>
</ul>
I advice not to use JavaScript \ jQuery inside your HTML , just use document.ready() and bind your events (if you use jQuery of course)
Most likely because it's trying to access jQuery ($) before it's created. It would be best to use document.ready from your first example for this.
I'm not brilliant with AJAX but could somebody please write me a quick code for switching a DIV tag with an external page.
For example:
<script type="text/javascript">
// Fun Stuff Here //
</script>
<div id="random">HIDDEN</div>
It would be AWESOME if the content could fade-in when it's loaded.
Ok, I have this so far (but it doesn't seem to be working):
<ul>
<li>ss3</li>
<li>ss4</li>
</ul>
<script type="text/javascript">
$(function(){
$("a.load").click(function (e) {
e.preventDefault();
$("#folioWrap").load($(this).attr("href"));
});
});
</script>
<div id="folioWrap"></div>
You may want to try this JavaScript AJAX loader jQuery plugin that can load page elements content via AJAX and it alters all the links in such way that when you click on the links of the AJAX loaded content, the new page element content is also loaded via AJAX.
I suppose you can hack it to add any fade transition effects when the new page element is loaded.
when I click on "Click Here" then a page must open inside
<script....>
$('yahoo').html('<a href=desc.php>');
</script>
<div id='yahoo'></div>
<div id='clickhere'>Click here</div>
Thanks
Dave
I think you're looking for AJAX to fetch the page for you. Something like this might work:
<script type="text/javascript">
$(function() {
$('#clickhere').click(function() {
$('#yahoo').load('desc.php');
});
});
</script>
<div id='yahoo'></div>
<div id='clickhere'>Click here</div>
First you need to wrap the script inside $(function() { ... }) to execute your code on page load. This is equivalent to $(document).ready(function() { ... }).
Next you have to bind a click event to the #clickhere element so you can actually do something when the user clicks on it.
When the user clicks on the #clickhere div, load() will fetch the contents of the given url inside the element you call it from. So, this snippet means that when the #clickhere div is clicked, desc.php is loaded inside #yahoo div.
ID selector is #ID, not just ID
Use jQuery AJAX load method to load desc.php page
You should execute your jQuery code after DOMContentLoaded event
Wrap your code in $(document).ready(function() { });, which will insure that the code executes after the DOM is available to your code. Otherwise, $('yahoo') will likely return no matched elements.
Why not try target_self ? I also fixed some code
<script....>
$('yahoo').html('<a href=desc.php target='>self'>Click here</a>');
</script>
<div id='yahoo'></div>
<div id='clickhere'>Click here</div>