I'm building a site utilising Bootstrap tabs and AJAX. I've set it up so that when a link with the class of .load is clicked the content of that html document is loaded into the active tab, in this case #tab2.
This is done using the following:
$(function(){
$("#tab2").delegate('.load', 'click', function (e) {
e.preventDefault();
$("#tab2").load($(this).attr("href"));
});
});
I also need some links in #tab2, those with the class of .load-tab1 to load content into #tab1, which I have achieved with the following code.
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"));
});
});
The problem is I can't work out how to make it so that when .load-tab1 links are clicked the active tab is also switched from #tab2 to #tab1.
Any help would be greatly appreciated!
UPDATE:
I was able to get it working with the following code but still thinking there is a better solution.
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"));
$(".tab2").removeClass("active");
$(".tab1").addClass("active");
$(".tab-content #tab2").removeClass("active");
$(".tab-content #tab1").addClass("active");
});
});
You should select the tab in the .load() callback:
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"), function(response, status, xhr){
$( theFirstTabAnchorSelector ).tab('show');
});
});
});
Related
i have the next code
$(document).ready(function () {
$("#productfilter").validate({
submitHandler: function (form) {
$.ajax({
type: "POST",
url: "listproresult_core.php",
data: $("#productfilter").serialize(),
beforeSend: function () {
$("#contentincore").html("<img src='../loading_core/loading animated/loader.gif'class='clock' border='0' />");
},
success: function (result) {
$("#contentincore").html(result);
}
});
}
});
});
and i wish add the next functions inside and that the results of the form, the links are implemented inside the load function results
$('#contentincore a').click(function (e) {
("#contentincore").on("click", "a:not(.minlink)", function (e) {
("#contentincore").load($(this).attr("href"));
e.preventDefault();
});
});
To bind functions to content that is loaded in with ajax, you have to use .on(). Here's a live example: http://jsfiddle.net/GMDah/ (check the console) When pressing the top link, "pressed" will be printed in the console. When the bottom link with class .minlink is pressed, the code in here is not executed.
The code being:
$("#contentincore a:not(.minlink)").on("click", function (e) {
console.log("pressed");
});
Also, don't forget putting the $-sign or jQuery before your brackets, you seem to have missed a few.
I'm using jQuery UI Vertical Tabs and the content is loaded via AJAX. I tried almost everything from posts around here, and nothing helped me so far .. :/
I want to display a css3 loading animation placed in <div id="loading-image">...</div>. So far almost nothing is happening.
My code
$(function() {
$( "#messages_tabs_div" ).tabs({
beforeLoad: function( event, ui ) {
console.log(ui);
ui.jqXHR.error(function() {
ui.panel.html("Couldn't load your messages. Try refreshing your page."+
" If you think this is bug you can help us by submitting it at bugs#go-out-sport.com " );
});
ui.jqXHR.complete(function(response){
console.log(response);
});
},
disabled: [6],
select: function(event, ui) {
alert('ASDAD');
}
}).addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#messages_tabs_div li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});
//jQuery MINE
$(document).ready(function(){
$('#loading-image').hide();
//Set loading bar for all ajax requests
$('#loading-image').bind('ajaxStart', function(){
alert('AJAXXX');
$(this).show();
}).bind('ajaxStop', function(){
$(this).hide();
});
$('#loading-image').bind('tabsselect', function(event, ui) {
alert('TABSSSSS');
$(this).show();
}).bind('tabsload', function(event, ui) {
$(this).hide();
});
});
The only thing I get is the AJAX alert. I tried removing $('#loading-image').hide(); and the loading was always there.
Please help ....
Thank you in advance
I recommend to use a global ajax loading..
$(document).ajaxStart(function() {
$("#loading").fadeIn(200);
}).ajaxStop(function() {
$("#loading").fadeOut(300);
}).ajaxSuccess(function() {
});
but, if you want personalize for multiple events, see this questions:
How to call .ajaxStart() on specific ajax calls
jQuery should I use multiple ajaxStart/ajaxStop handling
I am using the following code for ajax page loading
<script type="text/javascript">
jQuery('.filter-menu a').live('click', function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#gallery-ajax').fadeIn(200, function() {
jQuery('#gallery-ajax').animate({ opacity:0.1 }, 500);
}).load(link + ' #gallery-ajax', function(){
jQuery('#gallery-ajax').fadeIn(200, function() {
jQuery('#gallery-ajax').animate({opacity:1});
});
});
});
</script>
This is working fine but loads newer contents with very low speed. Can anyone please tell me how to improve its speed of loading newer contents or provide me some alternate jQuery AJAX.
You could try to take away some of the additional fade functions:
<script type="text/javascript">
jQuery('.filter-menu a').live('click', function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#gallery-ajax').hide().load(link + ' #gallery-ajax', function(){
jQuery('#gallery-ajax').fadeIn(200);
});
});
</script>
Of course this is not exactly the same behaviour but it will surely appear faster.
I use the modal window a fair bit in joomla and just found out that it doesn't work with ajax added links. What is the code I need to have the modal window work with those links?
I'm better at jquery than moo tools ...
Thanks,
Mat
I found this code but can't get it to work.
<script type="text/javascript">
window.addEvent('domready', function() {
SqueezeBox.initialize({
ajaxOptions: {
evalScripts: true
}
});
//SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
window.addEvent('domready', function() {
window.addEvent('load', function(){
//alert('clicked!');
SqueezeBox.fromElement($('a.modal'));
});
});
</script>
I use Rokbox (Mootools) from Rockettheme available for free here : http://www.rockettheme.com/extensions-downloads/club/1005-rokbox
A must have :)
I have the following code working nicely:
$field2.on("change", "#selector", function(){
$field2.load("./index.php?show-options=true", { value: $(this).val() }, function() {
$("#options").buttonset();
});
});
It loads the #options div and applies button to anchor tags within it.
Is there a way to declare
$("#options").buttonset();
BEFORE the #options div is loaded?
I looked through jQuery docs with no success, and also found this answer:
Apply jQuery UI widgets to ajax loaded elements
which I think might be on track, but haven't understood it fully nor managed to implement.
Help appreciated, thanks.
Doing the following:
$field2.on("change", "#selector", function(){
$field2.load("./index.php?show-options=true", { value: $(this).val() }, function() {
$field2.find("#options").buttonset();
});
});
Will make all option elements within $field2 into a button set (once the content has been updated).
Or alternatively you could make the button set on dom ready:
$(function() { $("#options").buttonset(); });
Update
jQuery selectors work on elements in the DOM (unless given a context), if the element is not in the DOM then unfortunately jQuery will not be able to affect it directly. If the load then call to buttonset is causing a FOUC (flash of unstyled content), you could try the following:
$field2.on("change", "#selector", function() {
$field2.empty();
$.get("./index.php?show-options=true", { value: $(this).val() }, function(data) {
var newContent = $(data);
$("#options", newContent).buttonset();
$field2.empty().append(newContent);
});
});