[jquery] manage ajaxStart and AjaxStop with two calls

[eluser]davidino86[/eluser]
hi,

i'm tryng to make an application with jquery.ajax the concept is:
send a form selized (first ajax call)with a click event when it started make a loading layer displayed and clear html of the form layer, when stopped make the loading layer hidden and append to form layer, through the $.get() function, another page.but the problem is that every each get function the ajaxStart event is called going into a loop that load the next pages.

this is the function:

Code:

$(document).ready(function ()
    {
        
       var urlProcessData = 'step/saveResult';

        $('.btn_submit').click(function(x)
        {
            // al click del bottone faccio partire la prima chiamata ajax

         var x = $.ajax({
               url:     urlProcessData,
               type:    'post',
               data:    $('#Form').serializeArray(),
               cache:   false

            });



        });


                $().ajaxStart(function (event, request, settings)
                {

                    
                    $('#loading').fadeIn();   //  faccio comparire il div con la gif di loading
                    $('#box_test').fadeOut(function(){
                        $(this).html(" ");      //svuoto il contenuto del div box test
                    });
  
                    
                });

                $().ajaxStop(function()
                
                  { $('#loading').hide();
                   var y = $.get('ajax/'   + ajaxpage +    '.php', 'html', function(data)
                           {
                               $('#box_test').fadeIn(function()
                               {
                                   $(this).append(data);

                               });
                               //alert(y);
                           });
                   });






    });

for each next page to append i put this javascript on top all of page.
I hope in a help

[eluser]rogierb[/eluser]
Why are you using to calls?

Why not just use the post to:
1: post the result
2: get the html required for your page.

[eluser]davidino86[/eluser]
because just append the html is not safe, it's visible on source and a dirty method.
the application is an entry test divided in steps each step is write in a php file in a separate directory and i want to load the needed page and not a html code. Or i don't understand your suggest

i mean:

Code:

$('#box_test').fadeIn(function()
                               {
                                   $(this).append("<b>html code</b>\n\
<b>nothe string</b>\n\
<p>etc etc</p>");

                               });

the function worf but is not semantic and is not safe.

[eluser]rogierb[/eluser]
Indeed not really what I was suggesting.

Code:

$.ajax({
    type: "POST",
       url: urlProcessData,
       data: $('#Form').serializeArray(),
       success: function(data){
           $("#where_ever_you_want_to_load_it").append(data)
       },
       async: false
});

[eluser]davidino86[/eluser]
ok i understand...i think is correct but i don't know how to change the url dinamically every each calls

this is the php code called from ajax function

Code:

function saveResult()
    {
        
        
        foreach($_POST['answer'] as $row)
        {
          $this->db->where('step', $_POST['step']);
          $this->db->where('answer', $row);
          $rightAnswers = $this->db->count_all_results('answers');

        }

        if (isset($this->session->userdata['rightAnswer']))
        {
            $rightAnswers =  $rightAnswers + $this->session->userdata['rightAnswer'];
        }

        $newdata = array
                (
                   'rightAnswer'  => $rightAnswers,
                );

         $this->session->set_userdata($newdata);
         //echo $this->session->userdata['rightAnswer'];
        
      
        
    }

[eluser]rogierb[/eluser]

i think is correct but i don’t know how to change the url dinamically every each calls

I do not understand what you are trying to accomplish. Can you give me an example of what you want?

[eluser]davidino86[/eluser]
I've solved with a hidden input in all of next pages with the name of the next one page to call by include in php.


thank you 1000 rogier!!

[eluser]rogierb[/eluser]
you are most welcome ;-)