Top Poster
#1 ramon fincken 396
#2 Site admin 3
#3 Ber|Art 2
#4 braddmark 1
#5 accentmedia 1
#6 Xarzu 1
#7 pEcosespedex 1
#8 khadish 1
#9 moxxx 1
#10 nistelrock 1
[snipplet] Prototype AJAX request with and without a return value in a div element ..



Rating : 3 / 5

 
Post new topic   Reply to topic    Ramonfincken.com Forum Index -> PHP coding
Beta
Want to be notified by email when this topic gets a reply?  
View previous topic :: View next topic  
Author Message
ramon fincken
Site's programmer

Get a free globally recognized avatar
It's free!


Joined: 03 Aug 2007
Posts: 396
Location: A'dam/Diemen, The Netherlands

PostPosted: Sat Aug 02, 2008 5:48 pm    Post subject: [snipplet] Prototype AJAX request with and without a return value in a div element .. Reply with quote

Allright ... now to make your AJAX request using Prototype?

Here are some steps, validation is up to you, always use serverside (PHP) validation ! Smile

In the default steps I presume you have some javascript knowledge, whereas in the Steps to make an AJAX request WITH a return value it should be a copy paste job, so scroll down if you want a working snipplet Smile

At the bottom I have placed a quick function call to "just" run an AJAX query without a return value in the case you don't need the output of that query to be shown anywhere ..


Default steps:

  1. Load prototype: ( of course in your javascript folder )
    <script type="text/javascript" src="js/prototype.js"></script>


    • Run updater
      Code:
         new Ajax.Updater
        (
         'my_output_id1', url_ajax + 'my_get_action='+ escape(inputvalue),
         {  }
         );


    • OR

    • Just sent a request without a need for a div id to be updated with any results returned by the AJAX request:
      Run the request:
      Code:
         var my_parameters = 'my_post_action=' + escape(inputvalue);
         var myAjax = new Ajax.Request(url_ajax, { method: 'post', parameters: my_parameters
         });


      • OR
      • If you need to trigger some functions when the request has been processed, lets run it like this: ( using the alert() function ):
        Code:
           var my_parameters = 'my_post_action=' + escape(inputvalue);
           var myAjax = new Ajax.Request(url_ajax, { method: 'post', parameters: my_parameters, onSuccess: function(transport) {
              alert('Done!');
              }
           });






Steps to make an AJAX request WITH a return value:

  1. Load prototype: ( of course in your javascript folder )
    <script type="text/javascript" src="js/prototype.js"></script>

  2. Load your AJAX definitions:
    <script type="text/javascript" src="js/ajax.js"></script>

  3. js/ajax.js contents:
    Code:
    var url_ajax = "./js/ajax.php?";

    function my_ajax_request1()
    {
       var inputvalue = document.getElementById('my_input_id1').value;

       if(!validateinput(inputvalue))
       {
          alert('No valid input');
          return;
       }

       // Optional
       document.getElementById('loading').innerHTML = 'Sending request ..';

       new Ajax.Updater
      (
       'my_output_id1', url_ajax + 'my_get_action='+ escape(inputvalue),
       {  }
       );

       // Optional
       document.getElementById('loading').innerHTML = '';
    }

    function validateinput(input)
    {
       // Validation is up to you, always use serverside (PHP) validation !
       return true;
    }


  4. HTML:
    Code:
    My first ajax request:
    <br/>
    <div id="loading"></div>
    <br/>
    <input type="text" id="my_input_id1" onChange="my_ajax_request1()">
    <br/>
    <div id="my_output_id1"></div>


  5. js/ajax.php contents:
    Code:
    <?php
    // KISS
    if(isset($_GET))
    {
       print_r($_GET);
    }
    else
    {
       echo 'No GET vars found';
    }
    ?>






Steps to make an AJAX request WITHOUT a return value:
See above, but use this one:

Note, the onSuccess is optional !

Code:
 new Ajax.Request(url_ajax + 'my_get_action='+ escape(inputvalue), {
     method: 'get',
   onSuccess: function(transport) {
     // Optional
      alert('Done !');
     }
   });
Back to top
View user's profile Send private message Visit poster's website
Google adsense
Advertisement





PostPosted: Sat Aug 02, 2008 5:48 pm    Post subject: [snipplet] Prototype AJAX request with and without a return value in a div element ..

Advertisement
Back to top
GravityForms
Advertisement





PostPosted: Sat Aug 02, 2008 5:48 pm    Post subject: [snipplet] Prototype AJAX request with and without a return value in a div element ..

Advertisement
Gravity Forms Plugin for WordPress
Back to top
Post new topic   Reply to topic    Ramonfincken.com Forum Index -> PHP coding All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
General forums
The world of freelance
Programming
Other projects
Poll
I love gifts

Yes goodies and presents! [3]
No but I love polls ! [1]

Related google ads