I have a main php file where i have a 'navbar' with links to various pages, on click of the 'navbar' item i want the content of the div replace with the respective page.
navbar.php:
<li id="nav-home"><a class="button" href="main.php">Home</a></li>
<li id="nav-attn"><a class="button" href="?nav=page1.php">Page1</a></li>
<li id="nav-tran"><a class="button" href="?nav=page2.php">Page2</a></li>
<li id="nav-mr"><a class="button" href="?nav=page3.php">Page3</a></li>
main.php:
<script>
$(document).ready(function() {
$('#content').load('<?php echo $_GET['nav'] ?>');
});
</script>
With this code am expecting that on click of the navbar item the div content has to change to respective page reference.
what i found is, for example when i click on page1 my url is being changed to main?nav=page1.php, but the script to change the div content is not triggered at all.
Please correct me however i don't want to change the link to '#'.
<script>
$(document).ready(function() {
$('uL#navbar a').click(function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
You may try this
$(document).ready(function() {
$('ul li a.button').on('click', function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
You need to use AJAX for it
<script>
$(function(){
$('.button').on('click', function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
});
})
</script>
<li id="nav-home"><a class="button" href="main.php">Home</a></li>
<li id="nav-attn"><a class="button" href="?nav=page1.php">Page1</a></li>
<li id="nav-tran"><a class="button" href="?nav=page2.php">Page2</a></li>
<li id="nav-mr"><a class="button" href="?nav=page3.php">Page3</a></li>
<div id="content"></div>
Try;
$(document).ready(function() {
$('.button').on('click', function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
in your php, change code so that the echo look like;
<li id="nav-attn"><a class="button" href="yourpage.php?nav=page1.php">Page1</a></li>
Related
I have a list of items on my page from a DB table
I am trying to change the glyphicon when checked
<div class="div1">
<span id=".<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-eye-open"> </span>
</div>
this is the script on the top of my page:
<script>
$(document).ready(function(){
$(".div1").click(function(){
$(".div1").load("clicked.php");
});
});
</script>
clicked.php looks like:
<span id="<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-ok"> </span>
The problom is the when I click on one item - all the items change there glyphicons
What am I doing wrong?
You just have to remove & add new class:
$(document).ready(function(){
$(".div1").click(function(){
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
//Here you can add ajax call
});
});
There is no need to go all the way to the server to get a new span when all you are doing is removing a class and adding a new class to a span.
Also using the right scope, $(this) will stop it effecting all your div1 elements.
<script>
$(document).ready(function(){
$(".div1").click(function(){
//$(".div1").load("clicked.php");
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
});
});
</script>
And to make the code toggle from one to another on each click
<script>
$(document).ready(function(){
$(".div1").click(function(){
if ( $(this).children('span').hasClass('glyphicon-ok') ) {
$(this).children('span').removeClass('glyphicon-ok');
$(this).children('span').addClass('glyphicon-eye-open');
} else {
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
}
});
});
</script>
i have a php view and i want to change the class after clicked
<ul>
<li> Home</li>
<li>Messages</li>
</ul>
<script src="<?=base_url()?>js/libs/jquery-1.7.2.min.js"></script>
<script type="application/javascript">
function select_class(id){
if(id=='mesg'){
$('#'+id).addClass('current');
$('#home').removeClass('current');
}
else{
$('#home').addClass('current');
$('#mesg').removeClass('current');
}
}
</script>
how can i select the selected value to make this visible and remove previous one
I was also facing this problem but I just change the selected class and place it to
<a class='current'>
from css then it works for me try yourself then your problem will solve and also do this
$(document).ready(function(){
$('#shortcuts li a').each(function(index) {
if(this.href.trim() == window.location)
$(this).addClass("current");
});
});
</script>
You should use .toggleClass() instead.
http://api.jquery.com/toggleClass
Please change js type
<script type="application/javascript">
to
<script type="text/javascript">
<ul id="example">
<li>Test</li>
<li>test 2</li>
</ul>
$('#example li').click(function(e){
$('#example li').removeClass('current');
$(this).addClass('current');
e.preventDefault();
});
Fiddle here http://jsfiddle.net/mRKC6/
I have this javascript :
<script type="text/javascript">
$(document).ready(function($) {
$('#target-share ul li').click(function() {
$('input#shareto').val($(this).data('val'));
});
});
</script>
and it really works as I expected. but when I add this another javascript to do drop-down animation, that javascript not working anymore :
<script type="text/javascript">
$(document).ready(function() {
$("#select-shareto a").click(function () {
var newClass = $(this).find("span").attr('class');
var newText = $(this).find("span").text();
$("#select-shareto a").removeClass("selected");
$(this).addClass("selected");
$("a#to-chosen span").removeClass().addClass(newClass).text(newText);
$("a#to-chosen").toggleClass("opened");
$('#select-shareto').slideToggle('fast');
return false;
});
$('a#to-chosen').click(function() {
$(this).toggleClass("opened");
$('#select-shareto').slideToggle('fast', function() {
// Animation complete.
});
});
});
</script>
those javascript actually affected on this HTML code :
<div id="target-share">
<span class="to-admin">Admin</span>
<ul id="select-shareto">
<li data-val="0-1">
<span class="to-Finance">Finance</span>
</li>
<li data-val="1-1">
<span class="to-admin-private">Admin Private</span>
</li>
<li data-val="1-0">
<span class="to-ceo">CEO</span>
</li>
<li data-val="0-0">
<span class="to-ceo-private">CEO Private</span>
</li>
</ul>
<input id="shareto" type="text" value="0-1" name="shareto">
</div><!-- #target-share -->
any idea how to make those 2 javascript works side-by-side? thanks.
$("#select-shareto a").click(function () {
...
return false;
});
Hereby, you stop the further propagation of this event - other handlers for this click event won't be called any more. Instead, use this:
$("#select-shareto a").click(function (e) {
e.preventDefault();
...
});
(Demo at jsfiddle.net)
I'm assuming you tried to insert the code where the comment animation complete is and if so you just need to put the code:$('#target-share ul li').click(function() { $('input#shareto').val($(this).data('val'));});
Your code is already wrapped in a $(document).ready so you don't need another one.
I have this link:
<a id='delete' href='/add/delete.php?iid=XXXXX'>#</a>
And I want to pass it on through Jquery so the page doesn't refresh. However, I'm having a difficult time making that happen. All of the click events and ajax I've tried with Jquery have been unsuccessful.
Basically, I want the ajax to send delete.php the value in the iid parameter.
Here try this the href='1' is the id you want to delete, also to replace the text it finds the id="d1":
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$(".delete").click(function(e){
var del_id = $(this).attr('href');
e.preventDefault();
$.post("/add/delete.php", { iid: del_id } ,function(data){
//change the link to deleted
$('#d'+del_id).replaceWith('Deleted');
});
});
});
</script>
</head>
<body>
<a class='delete' id="d1" href='1'>Delete</a>
<a class='delete' id="d2" href='2'>Delete</a>
<a class='delete' id="d3" href='3'>Delete</a>
<a class='delete' id="d4" href='4'>Delete</a>
</body>
</html>
$(function(){
$("#delete").click(function(e){
e.preventDefault();
$.post("../add/delete.php", { iid: "xxx" } ,function(data){
//do whatever with the result which is in the variable data.
alert(data)
});
});
});
Since it is a delete, use POST. Otherwise some crawlers will crawl your delete page and you will see your tables are empty one fine morning.
EDIT : You can associate the value to be passed with the anchor tag in someway. Ex :Change your id tag to be in this format del-YouIdTobe deleted ( Ex : del-1,del-2 etc..)
<a id='delete' href='#' id="del-1>Delte 1 </a>
<a id='delete' href='#' id="del-2>Delte 2 </a>
<a id='delete' href='#' id="del-3>Delte 3 </a>
Script
$(function(){
$("#delete").click(function(e){
e.preventDefault();
var val=$(this).attr("id").split("-")[0];
$.post("../add/delete.php", { iid: val } ,function(data){
//do whatever with the result which is in the variable data.
alert(data)
});
});
});
I am using jQuery to load a page by AJAX using $.ajax (suppose test.html).Its a simple HTML document with a few buttons and associated animations upon clicking them (also using jQuery).The .click() properties associated are working fine when I load the page directly but the buttons fail to respond when I click them in the AJAX loaded version.Since I am too tires to actually explain all the glum that I am doing, I am simply writing all the code below, apologies for this. Here are the required codes in the files.
<!-- p11.php -->
<!DOCTYPE html">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="c/js/jquery.js"></script>
<script type="text/javascript" src="c/js/jtry11.js"></script>
<link rel='stylesheet' type='text/css' href='c/css/css11.css'>
</head>
<body>
<button id="go1">Load Something Using AJAX</button>
<div id="msg"></div>
<div id="showButton">
<button id="showLoadedPage">Show the Page</button>
</div>
<div id="results"></div>
</body>
</html>
and the next
$(document).ready(function()
{
$('#results').hide();
$('#msg').hide();
$('#showButton').hide();
$('#loading').hide();
$('#loaded').hide();
$('#load').live('click', function()
{
$('#load').hide();
$('#loading').show();
$('#msg').show('fast');
$.ajax({
url: 'test.html',
cache: false,
success: function(html) {
$('#results').append(html);
}
});
$('#msg').ajaxSuccess(function(evt, request, settings){
$(this).append('Click the Button Below to View the Page');
$('#showButton').show('slow');
$('#hideLoadedPage').hide();
$('#loading').hide();
$('#loaded').show();
});
});
$('#showLoadedPage').live('click', function() {
$('#loaded').hide('slow');
$('#msg').hide('slow');
$('#results').show('fast');
$('.shower').hide();
$(this).hide();
$('#hideLoadedPage').show();
});
$('#hideLoadedPage').live('click', function() {
$('#results').hide('fast');
$('.shower').hide();
$(this).hide();
$('#showLoadedPage').show();
});
$('.hider').live('click', function() {
$('.shower').show();
$(this).hide();
$('p.one').hide('slow');
$('p.two').hide('medium');
$('p.three').hide('fast');
});
$('.shower').live('click', function() {
$('.hider').show();
$(this).hide();
$('p.one').show('slow');
$('p.two').show('medium');
$('p.three').show('fast');
});
$('p.*').live('click', function() {
$(this).hide('slow');
if( $('p').is(':hidden') ) {
$('.shower').show();
}
if( $('p.*').is(':hidden') ) {
$('.hider').show();
}
});
});
and the last
<!-- test.html -->
Page Loaded by Ajax.
Not the original Page
<center>
<button class="hider">
<img src="c/images/zoom_out.png" alt="zoom_out" />
Hide 'em
</button>
<button class="shower">
<img src="c/images/zoom_in.png" alt="zoom_out" />
Show it
</button>
<p class="one">Hiya</p>
<p class="two">Such interesting text, eh?</p>
<p class="three">The third Paragraph</p>
</center>
I hope I am not making some big time mistake?
Sounds like you need
$('#go1').live('click', function() {});
$.fn.live, as event handlers are only registered on initial dom creation, and you're repopulating the DOM and those aren't attached.
More info # http://docs.jquery.com/Events/live
If i'm reading that right you are adding the click handlers at the beginning. These only affect current buttons. You may just need to change that to a Live event.
$("#peopleResult_list").on('click','a', function(event){
//do you code here
});
on event work for current dom in your page and any dom loaded by ajax in the future