Issue with .load
Issue with .load
Howdy,
I have an issue that I hope to get help with. At
www.okv.se/webbtvdetalj
(work in progress) I have a list of videos to the right. When clicking one, the #main_video div to the left is updated with jQuery, with a player and some tabs below. The tabs are created with the Tabs jQuery UI plugin.
When clicking the third tab, called "Kommentarer", a page called webbtv_comments is loaded into that div, by the Tabs plugin.
Now, my issue is that when the comments form (and list of comments) is loaded by jQuery, the page no longer knows the URL of the video (it does, however, work if I don't load the comments page with jQuery, but rather have the html of that page in a tabs div on the video player page). That means that the correct comments are not shown (all comments rather than the ones for that particular video) and I can't submit the form with AJAX.
I'd be really grateful if someone could point out to me what I'm doing wrong. I'll gladly gve you more info if needed, although I suppose the code could be seen easily at
www.okv.se/webbtvdetalj
The jQuery code looks like this (some of it may not be relevant):
-
<script type="text/javascript">
$(document).ready(function() {
var debug = new jQuery.debug();
// Tabs jQuery UI plugin
$('#tabs').tabs();
// OnClick for links with the ajaxlink class (videos and main tabs)
$('a.ajaxlink').live("click", function (e) {
e.preventDefault();
var that = this;
var tmp = this.href + "&showtemplate=false&ajax=true";
var tmp2 = tmp.replace(/amp;/g,'');
// Put an animated GIF image insight of content
$(this.rel).empty().html('<div style="padding: 20px;"><img src="http://www.okv.se/uploads/images/loading.gif" /> Laddar...</div>');
// Make AJAX call
$(this.rel).load(tmp2, {}, function () {
$('#tabs').tabs();
$("#stars-wrapper").stars({
captionEl: $("#stars-cap"),
callback: function(ui, type, value)
{
// Disable Stars while AJAX connection is active
ui.disable();
// Display message to the user at the begining of request
$("#messages").text("Sparar...").stop().css("opacity", 1).fadeIn(30);
$.post("http://www.okv.se/index.php", {rate: value}, function(db)
{
// Select stars from "Average rating" control to match the returned average rating value
$("#avg").stars("select", Math.round(db.avg));
// Update other text controls...
$("#all_votes").text(db.votes);
$("#all_avg").text(db.avg);
// Display confirmation message to the user
$("#messages").text("Rankning sparad (" + value + "). Tack för din röst!").stop().css("opacity", 1).fadeIn(30);
// Hide confirmation message and enable stars for "Rate this" control, after 2 sec...
setTimeout(function(){
$("#messages").fadeOut(1000, function(){ui.enable()})
}, 2000);
}, "json");
}
});
// Here's the stuff that I can't get to work properly
var tmp3 = that.href + "&showtemplate=false&ajax=true";
var tmp4 = tmp3.replace(/amp;/g,'');
$('. cgfeedback_addcoment').load(tmp4, {}, function () {
debug.dump(tmp4);
// Form validation plugin
$(".cgfeedback_addcoment form").validate({
rules: {
m2comment: "required"
},
messages: {
m2comment: "Fyll i en kommentar"
},
submitHandler: function(form) {
$(form).ajaxSubmit({
beforeSubmit: function () {
$('.cgfeedback_addcoment').load(tmp4);
console.log(tmp4)
},
success: function() {
$('.cgfeedback_addcoment').html("<div id='message'></div>");
$('#message').html("<p>Tack för din kommentar!</p>")
}
});
return false;
}
});
});
$('#sharethis').mouseover(function () {
return addthis_open(this, '', $(that).attr('href'), document.title); }).mouseout(function () { addthis_close(); }); }).fadeIn('slow');
});
});
</script>
Thanks!
/Daniel