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
Related
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');
});
});
});
I have following js code:
window.addEvent('domready', function() {
var trigger = $('sendme');
trigger.addEvent( 'click', function(event){
event.preventDefault()
var sendform = new Form.Request($('newform'), {
onSend: function(){
console.log('sending');
},
onComplete: function(){
console.log('sent');
}
});
sendform.send();
});
});
and form with data:
<form action="index.php?option=com_mycomp&layout=edit&id=1" method="post" name="newform" id="newform" class="form-validate">...
the form submits just fine and I can see changes but I get no logs,
thus cant execute actions that I need
form action is not supposed to give me any response back , it is simple post but shouldn't this work? Do I need to send the form to another file that will give me responses like json and submit my form like that ?
what am I doing wrong ?
Any help is appreciated. Thnx!
small update since post ,
I change the form to send data and receive response via json file but still no response messages. everything is being updated so submit works 100%.
right way is new Form.Request($('newform'),console.log(),{
window.addEvent('domready', function() {
var trigger = $('sendme');
trigger.addEvent( 'click', function(event){
event.preventDefault()
var sendform = new Form.Request($('newform'),console.log(), {
onSend: function(){
console.log('sending');
},
onComplete: function(){
console.log('sent');
}
});
sendform.send();
});
});
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);
});
});
I am loading AJAX content into jquery UI dialogue by clicking on a link, but it doesn't seem to work. Problem is with the popup, the link returns ajax content fine. Trying to implement this example
$.fx.speeds._default = 1000;
$(document).ready(function(){
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$('#<url_id>').live('click', function(evt) {
//evt.preventDefault();
$.ajaxSetup({
async: false,
"error":function() {
alert("error");
}});
$.getJSON("<url>",
function(data) {
if(data[0][0] != null){
var html = '';
html += '<div id="dialog" title="Basic dialog">';
//concatenating html
html += '</div>';
}
});
$( "#dialog" ).dialog( "open" );
return false;
});
});
You havent added the element with that ID to the page yet, so your selector gets no results. You need to do something like this:
var element = $(html);
$('body').append(element);
$('#dialog').dialog();
Also:
You really shouldnt set ajax defaults on every click event (it's a global setting). If you need to specify additional parameters that $.getJSON doesnt provide, you should just call $.ajax directly.