Using JS "floats" and AJAX the right way
I am new to the jQuery framework - I used Mootools to my
blog work but I find that I am having trouble adapting to the jQuery mindset.
Anyway, I want to use
Boxy to create a simple "float" (a pop-up that is just a div ontop of the layout) that contains a form that sends a couple fields (via AJAX) to my server and then closes the float.
Boxy takes care of creating the float - but I am not sure about the best way to do somethings and I could use some help and/or ideas.
1) when the float loads (which isn't at domready) - disable the form method and make it AJAX.
2) when the form returns - display a "failed" or "OK" status as the float box fades away (auto-close).
Do you guys have any ideas about the right way to do this or things I could read to learn the jQuery style?
Here is some pseudo code I was playing with
-
<script type="text/javascript">
$(document).ready(function() {
// do stuff when DOM is ready
$('.boxy').boxy({title: 'Tag this Verse', afterShow: (function() {
alert('hello');
// add markup to container and apply click handlers to anchors
$("tag_form").submit(function() {
// stop normal link click
//e.preventDefault();
/*
// send request
$.post("done.html", {rating: $(this).html()}, function(xml) {
// format and output result
$("#output").html(
"Thanks for rating, current average: " +
$("average", xml).text() +
", number of votes: " +
$("count", xml).text()
);
});
*/
/*
$.ajax({
method: "get",
url: "boo.php",
data: "page="+content_show,
beforeSend: function(){$("#loading").show("fast");}, //show loading just when link is clicked
complete: function(){ $("#loading").hide("fast");}, //stop showing loading when the process is complete
success: function(html){ //so, if data is retrieved, store it in html
$("#output").html(html); //show the html inside .content div
}
}); //close $.ajax(
*/
alert('hello again');
return false;
});
})
});//aftershow
});
</script>