We Keep Coding

Ajax links inside ajax loaded content

i am having trouble getting ajax loaded links to load other ajax content.
Basically this is my ajax code:
$(function () {
var api = $("#content").jScrollPane().data('jsp');
var reinitialiseScrollPane = function()
{
api.reinitialise();
}
// attaching click handler to links
$("#contentcontainer a[href]").click(function (e) {
// cancel the default behaviour
e.preventDefault();
// get the address of the link
var href = $(this).attr('href');
// getting the desired element for working with it later
var $wrap = $('#content');
$wrap
// removing old data
api.getContentPane()
// load the remote page
.load(href, reinitialiseScrollPane , function (){
}
);
});
});
Basically the links inside the navigation work fine since they are loaded when page is loaded, but links inside the ajax content (wich are supposed to load pages in the same place the navigation links load content) dont work, my understanding is that there needs some sort of ".live" function called as the js does not rescan the code once ajax loads content.
I found some solutions but none i could relate to the code im using.
The first part of the code is not ajax but for a scrollbar plugin, i did not remove it because id like to avoid it getting voided by a solution that dosent keep it into count.
Thanks.

Try using the .on() method (see jQuery documentation) when attaching the click handler:
$(document).on('click', '#contentcontainer a[href]', function (e) {
// Rest of your code here
});

JQuery Ajax Binding

Below is the simple code that should display Ajax loading animation when form is submitted:
var init = function() {
$("form").bind('ajax:beforeSend', function() {
$("#comments_loading").show();
});
$("form").bind('ajax:complete', function() {
$("#comments_loading").hide();
});
};
$(document).load(init);
It's purpose is to display the loading animation on Ajax request. It works perfectly, but... only for the first form submit!!! Any suggestions why/how can this be addressed can be much appreciated.
Thanks a lot.

Use jquery .on instead. Same syntax, different method name:
$("form").on('ajax:complete', function() {
$("#comments_loading").hide();
});
Because I am assuming that your ajax loaded form is not the exact same element as your original form

jquery/JavaScript - Delay until upload complete

My jQuery script looks something like (the form is submitting files to upload):
$("#addMore").click(function() {
$("#progForm").submit();
$("#upTar").css("display","block");
$("#title").val("");$("#obj").val("");$("#theory").val(""); $("#code").val("");$("#output").val("");$("#conc").val("");
});
I want to delay the execution of the code beginning from $("#upTar") until the form submission is completed (that is the files are uploaded and PHP script has responded).
Edit
#upTar is an iframe and the target of the form submission. I want #upTar to be displayed only after its content has been generated from the form action script.
Thanks!
Code after solution
$("#addMore").click(function() {
$("#progForm").submit();
$('#upTar').load(function() {
$("#upTar").css("display","block");
$("#title, #obj, #theory, #code, #output, #conc").val("");
});
});

There's no way to make JavaScript in a browser "wait" for anything. In this case, there are a couple things you could do:
You could put the CSS changes etc. in a "load" event handler for the target <iframe>
$('#upTar').load(function() {
$("#upTar").css("display","block");
$("#title, #obj, #theory, #code, #output, #conc").val("");
}
You could put code in the response to the form POST that executes from the <iframe> itself.
$(function() {
(function($) {
$("#upTar").css("display","block");
$("#title, #obj, #theory, #code, #output, #conc").val("");
})(window.parent.$);
});

What you are doing right now is submitting the HTML form and loading whatever page you have listed in the "action" attribute of the form. The lower part of the javascript function will never actually execute since the browser will be directed to the new page. Here's what you want, a form that submits via ajax and then clears the form:
$("#addMore").click(function() {
var formData = $("#progForm").serialize();
var url = $("#progForm").attr("action");
$.get(url, formData, function(){
$("#upTar").css("display","block");
$("#title").val("");
$("#obj").val("");
$("#theory").val("");
$("#code").val("");
$("#output").val("");
$("#conc").val("");
});
});
Were you looking for something like that?

If you load jQuery inside the iframe you could use the following function to control parent elements with this selector:
$("#myparentid", top.document);
In essence, you could run a function inside the iFrame that waits for a refresh at which point you can run any function you wish with the top.document selector.

jQuery Basic problem

I have a page that display some data. It is loaded from a database using php and mysql, I use zend framework to handle all this.
On this page I have two things that use jquery. one is a paginator and the other is a thumps up function.
the paginator works fine. It receives the data as json and applys it to the view. all the functions that I need to handle this are located in one js file. In this file I listen for clicks...
$(document).ready(function() {
$("a#next").click(getProgramms);
$("a#previous").click(getProgramms);
$("a#page").each(function() {
$(this).click(getProgramms);
});
});
Now I have a problem with the thumps up function. It is located in another js file. Everytime the thumbs up button is clicked the script should just alert "click". actually when you click before you use the paginator a "click" appears, but when you do it after nothing happens. but the html in the dom inspector appears to be the same.
in my thumpsup.js I just have
$(document).ready(function() {
$("a.tp").click(thumpsUp);
});
function thumpsUp() {
alert("click");
}
I do not know where the problem is. maybe the js files are interferring each other!?
function thumpsUp() {
var url = window.location.hostname + '/programme/thumpsup/id/'
+ $(this).attr('page');
$.post(url, {
"format" : "json"
}, function(data) {
alert(data);
}, 'html');
return false;
}

I'm guessing the paginator is rewriting your elements and they are losing their click event binding. Try using live() for event binding instead:
$(document).ready(function() {
$("a.tp").live('click',thumpsUp);
});
function thumpsUp() {
alert("click");
}

You might have the Script files (which are included in your mark up) the wrong way round. That's the only solution I can think of...
I'm pretty sure you can get away with two $(document).ready()'s (even if it is frowned upon).

jQuery Ajax Loader

Greetings,
I would like to know what should I do to make appear a ajax loader...
actually I am calling a function in ajax... everything is going well
here is how it's being done
$('#txtEmail').blur(function()
{
$.post("ajaxAvailability.aspx",{ email:$(this).val() } ,function(data)
{
if(data=='false')
...
Now I would like to have a loader so I done it like this:
$('#loader').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
This should be working? what is happening is that I am getting an exception inside the jquery.js....
-thanks in advance

I usually do this in my code:
$('#txtEmail').blur(function(){
var value = $(this).val();
//display loader image
$("#indicator").html("<img src='PATH/loading.gif' alt='' /> Sending...").show();
$.post(URL,
{ email:value },
function(data) {
$("#indicator").empty().hide();
//...
});
)};
In above code, the animated image will appear inside DOM element with id="indicator". After AJAX request completed, I emptied the container, then hide it. Adjust this according to your page element.
My another code use jQuery blockUI, usually when submitting form, to prevent double submit. Check the web for the usage example.

Greetings, for everyone
The solution for this issue is correct the jquery-1.3.2-vsdoc2.js file
on the ajax function there are f parameter, this should be replaced into callback