Tuesday, September 29, 2009

[jQuery] Re: Simple Jquery AJAX post

this is how you do a post with loading at the top middle ish
<html>
<head>
<style>
.loading {
display: none;
position: absolute;
top: 0px;
left: 50%;
}
</style>
<script src="jquery.js" language="Javascript" type="text/javascript"></
script>

</head>
<body>
<script language="Javascript" type="text/javascript">
$(document).ready(function(){
$(document).ajaxStart(function(){
$('.loading').show();
});

$(document).ajaxStop(function(){
$('.loading').hide();
});
$('.clickme').click(function(){

//i have trouble with the post permiters so i always do it the {}
way but you can just pass a array
$.post('example.cfm',{peram1 : 'hello',peram2 : 'world', myval : $
('.myinput').val()},function(data){
alert($(data).find('result').text());
});
return false;
});

});
</script>
<div class="loading">loading</div>
<a href="#" class="clickme">Click me</a>
<input class="myinput" name="text_input" type="text" value="Enter
Something here">
</body>
</html>

On Sep 29, 11:15 am, mattastic <mharris...@yahoo.co.uk> wrote:
> Thanks very much for your replies.
>
> Could you please post the whole page code?
>
> So I can see how the javascript, html and ajax works together
>
> I'mn struggling to understand how the whole page is layed out.
>
> Thanks in advance
>
> On Sep 28, 2:18 pm, Mark Gorman <dayg...@gmail.com> wrote:
>
> >http://docs.jquery.com/Ajaxhaseverything you need but a simple
> > example would be...
>
> > $(document).ready(function(){
> > $.ajaxStart(function(){
> >   $('.loading').show();});
>
> > $.ajaxStop(function(){
> >   $('.loading').hide();});
>
> > //i have trouble with the post permiters so i always do it the {} way
> > but you can just pass a array
> > $.post('example.php',{peram1 : 'hello',peram2 : 'world', myval : $
> > ('.myinput').val()},function(data){
> >  alert($(data).find('result').text());
>
> > });
> > });
>
> > if the return was xml ie <message><result>it saved</result></message>
> > then you would get it saved in a alert watch some of the functions
> > though if you tell it to expect something as it will just
> > brake. .loading i am useing as your loading graphic or a div
> > containing it etc using css to absolutely position it or putting it
> > wherever you want it. you can do better things if you want but if you
> > just trying things for the first time this will do :P
>
> > On Sep 28, 10:58 am, mattastic <mharris...@yahoo.co.uk> wrote:
>
> > > Could soneone please show me an example of a simple ajax post to a
> > > coldfusion page, with a loading graphic?
>
> > > I cant find an appropriate example in the documentation.
>
> > > Thankyou
>
>

No comments: