www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Javascript reloading page, or crashing, don't know why

  1. #1
    Join Date
    Jul 2011
    Posts
    5

    resolved [RESOLVED] Javascript reloading page, or crashing, don't know why

    (warning long post, sorry)

    I'm pretty new at PHP-Ajax but I've worked my way way around it so far.. until now....

    I'm trying to display content dynamically in a DIV


    My Script is a merge of two other scripts I found online one function (showUser) uses a GET method and the other (funcionPost) uses a POST method independently they work like a charm, but combined in the same script they throw some issues.

    PHP Code:
    <script type="text/javascript">
    alert("Comienzo Script");
     
    function 
    getXMLObject()  //XML OBJECT
    {  alert("Comienzo ~ getXMLObject()");
       var 
    xmlHttp false;

       try { 
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); alert("FLAG ~ EXPLORER 6-"); /*For Old Microsoft Browsers*/ }
       catch (
    e) {     try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  alert("FLAG ~ EXPLORER 6+");/* For Microsoft IE 6.0+*/ }
                       catch (
    e2) { xmlHttp false;   /*No Browser accepts the XMLHTTP Object then false */ }
                 }
       if (!
    xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); alert("FLAG ~ FIREFOX,CHROME,OPERA");/*For Mozilla, Opera Browsers*/}
       return 
    xmlHttp;  // Mandatory Statement returning the ajax object created
       
    alert("FIN ~ getXMLObject()");
    }
    //getxmlobjects
     

    var xmlhttp = new getXMLObject();//xmlhttp holds the ajax object

     
    function handleServerResponse() {alert("Entra al server response");
                                      if (
    xmlhttp.readyState==&& xmlhttp.status==200)
                                        {
                                          
    alert("Server response ~ if (xmlhttp.readyState==4 && xmlhttp.status==200)");
                                          
    document.getElementById("txtVP").innerHTML=xmlhttp.responseText//Update the HTML Form element PROBLEM COULD BE HERE
                                          //break;            
                                        
    }
                                      else {
    alert("Error al llamado AJAX");}
                                      
    alert("Sale del server response");
                                    }
    //handleserverresponse

    function funcionPost(opcion) {
      var 
    getdate = new Date();  //Used to prevent caching during ajax call
      
      
    if(opcion == 1)
      {
        if(
    xmlhttp) { 
                     var 
    rut document.getElementById("rut");
                     var 
    nombre document.getElementById("nombre");
             var 
    apellido document.getElementById("apellido");
             var 
    telefono document.getElementById("telefono");
             var 
    email document.getElementById("email");
             
                           
                     
    xmlhttp.open("POST","vistapreliminarusuario.php",true); //calling testing.php using POST method
                     
    xmlhttp.onreadystatechange  handleServerResponse;
                     
    xmlhttp.setRequestHeader('Content-Type''application/x-www-form-urlencoded');
                     
             
    alert("Entro a funcionPost con cadena=  ""rut=" rut.value "&nombre=" nombre.value "&apellido=" apellido.value "&telefono=" telefono.value "&email=" email.value +" FECHA "getdate.value);
             
                     
    xmlhttp.send("rut=" rut.value "&nombre=" nombre.value "&apellido=" apellido.value "&telefono=" telefono.value "&email=" email.value); //Posting txtname to PHP File
                    
    }
      }
      if(
    opcion == 2)
      {
        if(
    xmlhttp) { 
                     var 
    txtname1 document.getElementById("txtname1");
                     var 
    txtname12 document.getElementById("txtname12");

                     
    xmlhttp.open("POST","testing2.php",true); //calling testing.php using POST method
                     
    xmlhttp.onreadystatechange  handleServerResponse;
                     
    xmlhttp.setRequestHeader('Content-Type''application/x-www-form-urlencoded');

                     
    xmlhttp.send("txtname1=" txtname1.value "&txtname12=" txtname12.value); //Posting txtname to PHP File
                    
    }
      }
      
      
    alert("Sale de funcionPost");
    }
    //funcionpost

    function showUser(str)
    {
      
    alert("Entro a showUser con str="+str);
     
    xmlhttp.onreadystatechange=function()
                               {
                                if (
    xmlhttp.readyState==&& xmlhttp.status==200)
                                {
                                 
    document.getElementById("txtSalida").innerHTML=xmlhttp.responseText//OR PROBLEM MIGHT BE HERE
                                 
    document.getElementById("selectusuario").value="";
                                 
    document.getElementById("selectviaje").value="";
                                 
    document.getElementById("selectconsulta").value="";
                                }
                               }
    xmlhttp.open("GET","getoption.php?q="+str,true);
    xmlhttp.send();

    alert("sale de showUser");

    }
    //showUser

    alert("Fin Script");
    </script> 
    There are lot's of alerts to keep track on things, but still can't determing whats wrong, perhaps due to my lack of experience with javascript...

    I'll run down the behavior of the script when using it...
    some alerts are in spanish since i'm Chilean.

    *loads the page creates object for FIREFOX*


    Comienzo Script // script start
    FLAG ~ FIREFOX,CHROME,OPERA
    Fin Script // script end

    *click on drop down menu and select option 1 that uses showUser function*

    Entro a showUser con str="+str // Enters to showUser function where str is the value selected from the drop down menu, in this case 1.
    Sale de showUser //exits showUser function, displays form in DIV with id "txtSalida"

    *I fill out the form and press the submit button, the idea is to show a preview of the input data for confirmation, the preview DIV is called "txtVP"*

    *once the submit button is pressed( onclick="funcionPost(1);" )*



    Entro a funcionPost con cadena= "+ "rut=" + rut.value + "&nombre=" + nombre.value + "&apellido=" + apellido.value + "&telefono=" + telefono.value + "&email=" + email.value +" FECHA "+ getdate.value // this alert show that it entered the funcionPost function and displays the data that was in the form.

    *HERE IS WHEN THINGS BECOME ODD TO ME*

    *It will enter the handleServerResponse function and loop 3 times between*


    Entra al server response // Enters server response
    Error al llamado AJAX // Error in ajax call
    Sale del server response // Exits server response

    *In the fourth iteration it will display the information correctly in the txtVP DIV, my gues is that it takes 4 times because of the readyState, but that's just my guess*

    Server response ~ if (xmlhttp.readyState==4 && xmlhttp.status==200)

    *So far I would be happy with the results, since it actually displays stuff in the way I like it... regardles of the 3 previous error iterations... but then... it iterates one more time..dunno why...*


    Entra al server response // Enters server response
    Server response ~ if (xmlhttp.readyState==4 && xmlhttp.status==200)
    Sale del server response // Exits server response

    *and...*

    Comienzo Script // script start
    FLAG ~ FIREFOX,CHROME,OPERA
    Fin Script // script end

    *which reloads the whole thing and i'm back at square 1*

    Without the alerts to track every move... everything happens in fractions of second.. due to tracking I was able to determine that it actually displays the info correctly, BUT then reloads the whole thing...

    I know it's a lot to ask..... but i'm feeling hopeless here and perhaps you can see the error more evidently than me....

    I would appreciate greatly your help...
    or even if you just took the time to read all this... I'm in gratitude...

    thank you in advance and looking forward to your questions, comments or replies

  2. #2
    Join Date
    Jul 2011
    Posts
    5
    PLAN B
    If my original post was TOO LONG...which I know it is... perhaps you can help me with some doubts I would appreciate that too!

    in
    PHP Code:
    xmlhttp.setRequestHeader('Content-Type''application/x-www-form-urlencoded'); 
    what's application/x-www-form-urlencoded for?

    or
    I understand that libraries like jquery do the ajax handling, POST and GET methods, do I need to install something on the server-side? should I go with this option? I feel i-m pretty close to get the results I want.. I just need to figure out why my page reloads at the end...

  3. #3
    Join Date
    Jul 2011
    Posts
    5
    the form is submited with this button button.. does type="submit" forces page reload??

    PHP Code:
    <div id="buttonDiv">
        <
    input type="submit" id="submitButton" name="submitButton" value="Ingresar" onclick="funcionPost(1);"/>
    </
    div

  4. #4
    Join Date
    Jul 2011
    Posts
    5
    PROGRESS!!!

    Changed the button type on the form to "type=button"

    now the page won't reload..

    BUT...

    It still alerts me 3 times of AJAX call error before displaying the correct response text.. perhaps I should just disable that else sentence.. but i-m afraid there's a deper meaning to that error... dont want to leave it just like that!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles