DHTML, AJAX, and PHP - can it be done?

Discussion in 'OT Technology' started by jdw, Mar 5, 2007.

  1. jdw

    jdw New Member

    Joined:
    Dec 31, 2005
    Messages:
    4,429
    Likes Received:
    0
    Location:
    ND
    I'm fairl sure this can be done but I haven't read enough to figure it out for sure. I guess if it can't be done, I'll save the time working on it and go about it a different direction.



    I've got a site and I need a user to log in. The 'login' button makes a DIV visible (through DHTML) with inputs for username and password. On submit I want to run a PHP program in that DIV only that will check the login against database info and either reload the entire page if successful or show the login DIV again if failed.

    So, can a click/submit load a program into a div (which I guess is the idea behind AJAX isn't it?) that will run through and perform the desired tasks?




    I'm not looking for code, just a yes/no an dmaybe some resources if you have them handy.
     
  2. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    php is executed on the server... not client. There are two ways to do this, imho:

    1: have a second div that is hidden. This div would have the "login failed, please try again." message. Through ajax, run the script and display that div on failure, or load the next page on success.

    2: use an object/iframe in leu of the div. the iframe/object appears just as the div would, but actually hosts the login page within. You can then do all your login loads just like a normal page would, and re-direct to the success page when neccessary.
     
  3. Peyomp

    Peyomp New Member

    Joined:
    Jan 11, 2002
    Messages:
    14,017
    Likes Received:
    0
    You need to dynamically update the contents of a div, with a PHP controller that spits the contents to it.

    Here is a real world example of how you do that in javascript. This code will dynamically update the contents of a div that looks like this: <div id="report_summary"></div>

    Set an onClick="startRequests()" action on your button, and you can have it initiate as many AJAX requests as you have in startRequests().

    What data you return depends on what controllers you build on your server. They simply return HTML as normal. This is called AHAH, since we are returning HTML.

    PHP:
    // Calls XMLHttpRequests to fill the map and the summary table
    function startRequests()
    {
        
    startRequest1();
        ...
    }

    // Grabs our parameters from the DOM and returns a query string for the POST
    function createQueryString() 
    {
        
    // Grab our parameters from the DOM.  Should also evaluate these.
        
    var start_date document.getElementById("start_date").value;
        var 
    start_time document.getElementById("start_time").value;
        var 
    start_ampm document.getElementById("start_ampm").value;
        var 
    end_date document.getElementById("end_date").value;
        var 
    end_time document.getElementById("end_time").value;
        var 
    end_ampm document.getElementById("end_ampm").value;
        var 
    group_by "zone";
        var 
    filter document.getElementById("zone").value;
        
        
    // Compose our query string
        
    var QueryString "start_date=" start_date "&start_time=" start_time "&start_ampm=" start_ampm "&end_date=" end_date "&end_time=" end_time "&end_ampm=" 
        
    end_ampm "&group_by=" group_by "&filter=" filter;
        
        
    // Return our query string
        
    return QueryString;
    }

    function 
    startSummaryRequest() 
    {
        var 
    xmlHttp createXMLHttpRequest();
        
    xmlHttp.onreadystatechange = function() {
            if(
    xmlHttp.readyState == 4
            {
                if(
    xmlHttp.status == 200)
                {
                    
    document.getElementById("report_summary").innerHTML xmlHttp.responseText;
                }
            }
        };
        
    xmlHttp.open("POST""/my/php/controller"true);
        
    xmlHttp.setRequestHeader("Content-Type""application/x-www-form-urlencoded");
        
    xmlHttp.send(createQueryString());
    }
     
  4. Peyomp

    Peyomp New Member

    Joined:
    Jan 11, 2002
    Messages:
    14,017
    Likes Received:
    0
    No, Dump, that is wrong. WRONG! WRONG! WRONG!
     
  5. Peyomp

    Peyomp New Member

    Joined:
    Jan 11, 2002
    Messages:
    14,017
    Likes Received:
    0
    I knew you'd say that. PATHETIC!
     
  6. jdw

    jdw New Member

    Joined:
    Dec 31, 2005
    Messages:
    4,429
    Likes Received:
    0
    Location:
    ND
    :bigthumb:

    No, like I say I just wanted to know if it could be done the way I had in mind or if I was going to waste time trying to figure out something that couldn't be done. I really don't like using code someone else has written even if it is something open source - I don't like having a chunk of code I don't know top to bottom (re-inventing the wheel?).

    The Netvibes login is very similar to what I am going to be doing, now I just need time to knock something out.
     
  7. Peyomp

    Peyomp New Member

    Joined:
    Jan 11, 2002
    Messages:
    14,017
    Likes Received:
    0
    If you don't reuse the code in startSummaryRequest(), you will be doing it wrong. That is how you create an xmlHttpRequest sensibly. I used to do it non-sensibly. You can too, if you want.
     
  8. Slid.

    Slid. I'm a guy.

    Joined:
    Oct 25, 2001
    Messages:
    1,928
    Likes Received:
    0
    Location:
    NH
    Yes, you can do this.

    You'd likely need to make a change to whatever you use to process the response from PHP through Ajax -- you'd basically want the option of looking for a flag (a 0 or a 1) or even a reference to the DIV to load based off the result.

    Basically:

    If login success:
    reload entire page for user interface

    If login failure:
    load myErrorDiv with failure details
     

Share This Page