We Keep Coding

Ajax loaded part of a page - how do I make links in the loaded content work?

I load a part of my basketpage inside an accordion div in my header. This works great and shows my basket in a nice dropdown.
The last problem I need to solve with this is to get the buttons in the loaded content to work. Is it possible to write an callback that make these works? Im not sure even what to google for this one..
This is how the buttons is setup in the loaded content:
checkout
Script Im using to load the content:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox');

use the callback function of .load().
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
checkout

You need to use a child selector for the event. You can attach an event to the .sub-menu element that will fire on the content loaded in through the ajax. Something like the following could work:
$(".dcjqg-accordion ul.sub-menu").on("click", ".action.actionbasket.checkout", function() {
if( UI.pb_boolean(this, 'click') ) {}
return false;
});
Notice the second parameter to the on method. It is a selector that will be used to look at the target of the click event. I used .action.actionbasket.checkout since that is what is on your a tag.
This code may not work exactly, but this should help get you in the right direction.
Here is the link to the jQuery documentation for the on method: https://api.jquery.com/on/

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

Why jquery on .html(data) with data='<script src >...' shows incorrect result?

Why jquery on .html(data) with
data='<sript src>...'
shows incorrect result?
For example:
http://dev.khartn.name/
Click on the "Full Text Search Programm Complex." in the right column.
function loadPage(link) {
$.get(link, function(data) {
$("#blogsss").fadeOut("200", function () {
$("#pleasewait").fadeIn("200", function() {
// alert(data);
$('#blogsss').html(data);
$("#pleasewait").fadeOut("200", function() {
$("#blogsss").fadeIn("200", function(){
SyntaxHighlighter.highlight();
return true;
});
});
});
});
}).error(function() {
alert("Error loading page, please check your Internet connection and try again.");
$("#pleasewait").fadeOut("slow");
$("#blogsss").fadeIn("slow");
return false;
});
}
If in the response will sent some html text, then all right.
But if in the response html text plus javascript, like
<script type="text/javascript" src="/ru/js/aHR0cDovL3d3dy5vaGxvaC5uZXQvcC80ODgxNTIvd2lkZ2V0cy9wcm9qZWN0X2xhbmd1YWdlcy5qcw==">
</script>
result will be show incorrectly - shows only the response from the script src.
How to fix this bug?
Sorry my bad English.

You can also try jQuery.load
$('#a').load('article.html');
http://api.jquery.com/load/

jQuery .html() strips out any script tags. Using the native .innerHTML can help you overcome this issue if you really want to inject scripts into the page like this.

You might want to use:
http://api.jquery.com/jQuery.getScript/

Because you aren't supposed to do that, it would expose security issues, see http://en.wikipedia.org/wiki/Cross-site_scripting.
You should rather ask the script content separately. You can use the method $.getScript for it, see http://api.jquery.com/jQuery.getScript/

show/hide loading message for html table

How can I show a "loading" message when clicked/checked to expand table column(s), and hide the message as soon as its expended. Here is demo of what I've got so far. I can make the message appear, but can't hide it once the job is done. It seems useful when I'm trying to expand a large table, and I think it would be nice to let the user know that it's working. Any help/suggestion will be greatly appreciated.
$(document).ready(function() {
$("#load").hide();
$("#check").live("click", function() {
$("#load").show();
if ($("#check").is(":checked")) {
$(".hidden").show();
} else {
$(".hidden").hide();
}
});
$("#load").hide();
});

Do you really need the loading message?
anyway, you could hide it like this:
$(document).ready(function() {
$("#load").hide();
$("#check").live("click", function() {
$("#load").show();
if ($("#check").is(":checked")) {
$(".hidden").show();
$("#load").hide();
} else {
$(".hidden").hide();
$("#load").hide();
}
});
$("#load").hide();
});

this is a bit unuseful thing to create a loading text because this need only one reflows to the DOM so you actually not see the "loading.." message.
but if you want to create an ajax call wich gets the data form the server, it would be useful, but in this usuage this is unuseful
but if you insist to this, you need to create a new "thread" to detect is the table shown. for example
$("#link").click(function() {
$("#text").html("loading...");
$("#table").show();
window.setTimeout(function() {while(true){if($("table").is(":visible")){$("#text").html("");break;}}},0);
});

It's a matter of the page lifecycle. You don't have any blocking events in your code and there is no callback for your code to know "hey the hidden elements are shown now, hide the loading bar." Take a look at this updated jsfiddle. Instead of a callback, I've told the code to wait .5 secs after showing or hiding before calling the method to the hide the loading message.
If you were doing something with a callback, like an AJAX post, then you could invoke this on success or fail of the request.

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).