I have the following code to generate Jquery UI tabs:
<div id="tabs-loading-message" style="display:none">Loading, Please wait..</div>
<div id="fragment-2">
<ul>
<li><span>Animals</span></li>
<li><span>Birds</span></li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$("#tabs-loading-message").show();
$('#fragment-2').tabs(
{
cache:false, spinner:'', selected: 0 ,
select: function(event,ui) {
//show spinner
$("#tabs-loading-message").show();
},
load: function() {
// hide spinner
$("#tabs-loading-message").hide();
}
}
);
});
</script>
I am able to display the loading message, but how can I hide the contents of the tab panel, when it's selected and show the contents when loaded?
you can catch success event from ajax:
.tabs({ajaxOptions: {success: function() {
$("#tabs-loading-message").hide();
}}});
Related
I am having a working while loading a div, $(document).ready(function() { works well before div load, but it stop working after div loaded. Why is it happening?
Here is the sample of code I am working with:
<div id="abc0">
<div id="abc">
<script>
$(document).ready(function() {
alert("test");
});
</script>
</div>
</div>
And here is the load function I am using:
$("#abc0").load('mypage #abc');
Use callback function for alert.
$("#abc0").load("mypage #abc > *", function(){
alert("test");
});
$(function() {
alert("test me");
});
Some time you have to write jQuery instead of $
jQuery(document).ready(function($) {
//do jQuery stuff when DOM is ready
});
I'm working on a portfolio for someone who isn't very technically proficient at the moment. He is going to need to regularly add new content to his portfolio, which means that either he is going to need to learn how to hard code new buttons, text, and pictures into his website, or I'm going to need to regularly do this for him.
My current design for the website includes a php script that automatically populates a navigation bar based on the contents of a directory. My goal is that when a user clicks on one of the navigation buttons, it will trigger an ajax event that calls a php script to load all of the images from that particular event into my main content div. Here is the script for the nav bar:
<div id="eventsbar">
<div id="eventslistleft">
<?php
$eventlist = preg_grep('/^([^.])/', scandir('events'));
foreach($eventlist as $i => $event){
if($i == 0 || $i % 2 == 0){
echo '<div class="eventbutton" id='.$event.'><img src="/events/'.$event.'/0.jpg"></div>';
}
}
?>
</div>
<div id="infobutton">
</div>
<div id="eventslistright">
<?php
$eventlist = preg_grep('/^([^.])/', scandir('events'));
foreach($eventlist as $i => $event){
if($i != 0 && $i % 2 != 0){
echo '<div class="eventbutton" id='.$event.'><img src="/events/'.$event.'/0.jpg"></div>';
}
}
?>
</div>
</div>
The rendered HTML:
<div id="eventsbar">
<div id="eventslistleft">
<div class="eventbutton" id="fifth"><img src="/events/fifth/0.jpg"></div>
<div class="eventbutton" id="fourth"><img src="/events/fourth/0.jpg"></div>
<div class="eventbutton" id="third"><img src="/events/third/0.jpg"></div></div>
<div id="infobutton"></div>
<div id="eventslistright">
<div class="eventbutton" id="first"><img src="/events/first/0.jpg"></div>
<div class="eventbutton" id="second"><img src="/events/second/0.jpg"></div>
</div>
</div>
And here is the script to call the image load function:
<script>
$(".eventbutton").click(function(){
alert("clicked");
currentevent = this.id;
$.ajax({
type: "GET",
url: "scripts/load.php",
data: "cevt="+currentevent,
success: function(msg){
$('#Content').html(msg);
}
});
});
</script>
For whatever reason, though, the click event only triggers when I click on the last navigation button. I suspect that the click event is not triggering at all because I do not see the alert that says "clicked" when I click any navigation buttons except for the one which is rendered last. Does anyone have experience with a similar issue? Any suggestions for what I can do to correct this problem?
if($i != 0 && $i % 2 != 0){
echo '<div class="eventbutton" id='.$event.'><img src="/events/'.$event.'/0.jpg"></div>';
}
Because all the the buttons are dynamically added to the form so the event should be attached to the parent.
$("#eventslistright .eventbutton").on( "click", function() {});
or
$( "body" ).on( "click", ".eventbutton" ,function(){});
If you add navigation button dynamically in page you should use
.on() Read more ... or .live() Until version 1.7 Read more ...
$("#eventsbar .eventbutton").on( "click", function() {
alert("clicked");
currentevent = this.id;
$.ajax({
type: "GET",
url: "scripts/load.php",
data: "cevt="+currentevent,
success: function(msg){
$('#Content').html(msg);
}
});
});
DEMO
If your code loads elements dynamically then method .click wouldn't work because it is declared for elements already existing during js loading. To add some click event action for js loaded elements you must use .on with parameter 'click'. Example above:
<script>
$(function(){
$("html").on('click','.eventbutton', function(){
var currentevent = $(this).attr('id');
alert(currentevent);
$.ajax({
type: "GET",
url: "scripts/load.php?cevt=" + currentevent,
success: function(msg){
$('#Content').html(msg);
}
});
});
});
</script>
In my webpage I am using jquery tabs.
<script type="text/javascript">
$(document).ready(function()
{
$('#horizontalTab').responsiveTabs({
rotate: false,
startCollapsed: 'accordion',
collapsible: 'accordion',
setHash: true,
disabled: [3,4],
activate: function(e, tab) {
$('.info').html('Tab <strong>' + tab.id + '</strong> activated!');
}
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('#stop-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('stopRotation');
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('.select-tab').on('click', function() {
$('#horizontalTab').responsiveTabs('activate', $(this).val());
});
});
</script>
<div id="horizontalTab" style="margin-top:10px;">
<ul class="tabul">
<li class="tabli">
<?php echo lang('purchasedtickets');?>
</li>
<li class="tabli"><?php echo lang('gifted').' '.lang('tickets');?></li>
<li class="tabli"><?php echo lang('received').' '.lang('tickets');?></li>
</ul>
<div id="purchased"></div>
<div id="gifted"></div>
<div id="received"></div>
</div>
When I click on tab2 ie, #gifted tab, the corresponding result will be fetched from an ajax call and will be set to div with id gifted. In this sections I am using Codeigniter pagination. If I click on pagination link 2 of gifted section, the URL will come like http://domain.org/project/video/tickets/2#gifted where 2 in the URL is the page number.
After this, when I click on any other tab say tab1 ie, purchased tab, then the link of page will come like http://domain.org/project/teshot/video/tickets/2#purchased (instead of http://domain.org/project/teshot/video/tickets#purchased) which is appending the url of previous section.
I want to avoid this problem. How can I solve this?
Can ayone help me?
Thanks in advance.
I am using bootstrap for my project.
Two things I want to do.
Display the book records.
On clicking on any book show a pop-up and this pop-up will have the record list which can be edited(inline edit)
I have two set of jQuery files (one is for modal window and the other one is for inline editable).
<script src="jquery-2.0.3.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="js/bootstrap-modalmanager.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="bootstrap-editable.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="modal"]').click(function (e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function (data) {
$('<div class="modal hide fade">' + data + '</div>').modal();
}).success(function () {
$('input:text:visible:first').focus();
});
}
});
$('.bookname').editable({
type: 'text',
url: 'post.php',
title: 'Enter username',
validate: function (value) {
if ($.trim(value) == '') {
return 'This field is required';
}
}
});
});
</script>
Here is my html code:
<a data-target="#" class="bookname" id="bookname" href="pop1.php?id=<?php echo $row['book_id']; ?>" data-toggle="modal"> <?php echo $row['book_name']; ?></a>
When I run both the js files seperately I see no issues. When I try to integrate the inline edit inside a modal window there is problem with the modal window close button and also with the inline edit is not working.
Is the issue related to version(version problem)
Any one have faced such problems. Can someone help me out or guide me with an example.
Thanks
Kimz
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