1. #1
    MiniJeffrey's Avatar
    Registered
    24/10/07
    Location
    Harelbeke
    Posts
    7,758
    iTrader
    0
    Mentioned
    2 Post(s)
    Reputation
    1/446

    Enkele Ajax/jQuery probleempjes/vraagjes

    Jow mede-webdevelopers.

    Ik ben momenteel bezig aan een groot project, waarbij een site beheerd wordt door een backend (die we in team van 0 zelf schrijven). Nu willen we natuurlijk dat alles zo vlot en goed mogelijk werkt, dus willen we niet altijd volledige page-reloads wanneer we een kleine setting in de backend veranderen. Een ajax-request en een dynmaische aanpassing van de backend zoner reload met andere woorden dus.

    Nu, ajax etc. werkend krijgen is geen probleem, maar dan kwamen enkele vragen/problemen opduiken:

    1: Wat doe je wanneer javascript disabled is?
    Kan je dit opvangen op één of andere manier en een alternatieve methode laten uitvoeren ( ?action=xxx), waarbij er dus wel een page-reload gebeurt. Het mag namelijk niet de bedoeling zijn dat de backend compleet onbruikbaar wordt wanneer een gebruiker javascript (om welke reden dan ook) uitgeschakeld heeft.

    2: Gelijkaardig als vraag 1, hoe kan je de alternatieve methode laten uitvoeren wanneer de ajax-request failt?. Ik heb bijvoorbeeld een anchor met een onclick-action die ajax oproept om een setting in de database te gaan aanpassen. Dit verloopt asynchronous, belangrijk! Hoe kan ik nu op een of andere manier laten weten aan mijn browser dat de javascript failde (request kan niet gemaakt worden, het antwoord van de server komt niet of is fout, ...)? Door het feit dat het asynchronous is wacht de browser namelijk niet om de code verder uit te voeren. Dus als plots het antwoord van de server binnenkomt via ajax, en dan blijkt fout te zijn, kan ik niet meer de href aanroepen?

    Onderstaand een versimpeld voorbeeld:

    HTML
    Code:
    <a onclick="doeIets()" href="?action=doeIets" > Klik mij! </a>
    <!-- De href mag dus enkel uitgevoerd worden als de onclick faalt of niet uitgevoerd kan worden -->
    Ajax
    Code:
    function createRequest(){
        try{
            request = new XHTMLHttpRequest();
        }
        catch(tryMS){
            try{
                request = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(otherMS){
                try{
                    request = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(failed){
                    request = null
                }
            }
            
        }
        return request;
    
    }
    
     function doeIets(){
        request = createRequest(); //functie die een request aanmaakt en teruggooit
        if(request != null){
            var url = 'ajax_actions.php?goal=doeIets';
            request.open("GET", url, true);
            request.onreadystatechange = displayDetails;
            request.send(null);
        }
        else{
            //er ging iets mis met de request, de href moet uitgevoerd worden
        }
    }
    
    function displayDetails(){
        if(request.readyState == 4){
            if(request.status == 200){
               resp = request.responseText;
               if(resp == 1){
                   // De ajax werkte, de href moet niet uitgevoerd worden
               }
               else{
                   // de ajax werkte niet, de href moet wel uitgevoerd worden
               }
             }
         }
    }
    Last edited by MiniJeffrey; 11-06-2012 at 11:50.
    Let us pray for all the fools that be
    no votes  

  2. #2
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    Hoe ik het doe is steeds dezelfde naam geven in men AJAX script aan de POST variabelen als dat gebeurd in de HTML.

    In mijn callback ( serverside ) gebruik ik dan dezelfde function($_POST) om de functionaliteit af te handelen alsof dat zou gebeuren indien de pagina gewoon gepost zou worden. Daarbij kan je bvb ook uw methode om via PHP in uw HTML errors te tonen , afstemmen op de Javascript methode zodat dit ongeveer hetzelfde verloopt.

    De button waarop geklikt wordt om de actie uit te voeren moet in uw javascript een preventDefault doen of een return false teruggeven. Hierdoor zal de button niet uw pagina posten.

    Als javascript wel afstaat zal deze gewoon de pagina posten. En dan moet je zien dat je via diezelfde methode dus uw POST kan verwerken

    Code:
    PHP:
    <?php        
    if($_SERVER["REQUEST_METHOD"] == "POST" && $_POST['action'] == "contact") 
        $result = sendContactEmails($_POST);
    
    if($result['success']){
    ?>
    <p class="box box-success">
        Wij hebben uw vraag goed ontvangen en komen hier zo snel mogelijk op terug!
    </p>
    <?php
    }else{
    ?>
    
    <form method="POST" action="" class="form contactform">
    
        <section class="errors" <?php if(is_array($result['errors']) && $_POST['action'] == 'contact') echo ' style="display:block"'; ?>>
    
            <div class="box box-error">
                Er zijn enkele fouten opgetreden:
            </div>
            <div class="box box-error-msg">
                <ul>
                    <?php
                    if(is_array($result["errors"])){
                        foreach($result['errors'] as $error){
                            echo '<li>'.$error.'</li>';
                        }  
                    }
                    ?>
                </ul>
            </div>
        </section>
    
        <p>
            <input type="hidden" name="action" value="contact" />
            <input type="submit" value="Verzend bericht" class="button" id="submit" title="Verzend bericht"/>
        </p>
        
        <?php
        // reset values
        if(is_array($result['errors']) && $_POST['action'] == 'contact'){
            $result = null;
            $_POST = null;
        }
        ?>
    
    </form>
    
    <?php
    }
    ?>
    In uw AJAX callback zou dan zo iets kunnen staan:
    Code:
    <?php
    /**
     * Contact callback
     *
     * @author Sam @ Innovatus BVBA - sam@innovatus.be
     * @copyright Innovatus BVBA - http://www.innovatus.be
     *
     */
    
    // set content type to json
    header("Content-type: text/json");
    
    // try
    try{
    
        // require config
        require_once '../../config.php';
        
        // require session
        require_once '../includes/session.inc.php';
        
        // post actions
        if($_SERVER['REQUEST_METHOD'] == 'POST'){
    
            // sanitize POST vars
            $clean = sanitize($_POST);
    
            // switch action
            switch($_POST['action']){
    
                case 'contact':
    
                    try{
                        
                        $result = sendContactEmails($_POST);
                        die(json_encode($result));
    
    
                    }
                    catch(Exception $e){
                        $val = array(
                            "error" => "1",
                            "message" => $e->getMessage()
                        );
                        die(json_encode($val));
                    }
    
                    break;
    
    
                default:
                    // throw unvalid action exception
                    throw new Exception('Unvalid action!');
                    break;
    
            }
    
        }
    
        // get actions
        elseif($_SERVER['REQUEST_METHOD'] == 'GET'){
    
            // sanitize GET vars
            $clean = sanitize($_GET);
    
            // switch action
            switch($_GET['action']){
    
                case '':
    
                    break;
    
                default:
                    // throw unvalid action exception
                    throw new Exception('Unvalid action!');
                    break;
    
            }
    
        }
    
        else{
    
            // throw unvalid request exception
            throw new Exception('Unvalid request!');
    
        }
    
    
    }
    
    // catch exception
    catch(Exception $e){
    
        $val = array(
            "error" => "1",
            "message" => $e->getMessage()
        );
        die(json_encode($val));
    
    }
    Voorbeeld:
    Contact - Beursprognoses - Blijf aan de juiste kant van de markt! ( hier wel niet met AJAX afhandeling , maar enkel JS controle )
    Als je javascript gebruikt zal de javascript de errors tonen.
    Als je javascript afzet zal de PHP de errors tonen

    In een backend/beheersysteem zou ik u daar ni teveel van aantrekken..
    Daar zijn uw gebruikers beperkt en kan je ze het gebruik van Javascript opleggen.

    De frontend is uiteraard iets anders.

    Ik heb daar in't verleden ook is hard over nagedacht en kwil u daar gerust wel is mijn gedacht over vertellen. Voeg me maar toe op skype indien interesse ( sam.vloeberghs )

    en ahja: gebruik jQuery voor uw Ajax functionaliteit.
    ahja2: zorg voor authenticatie in uw ajax callbacks!!! is een veel vergeten probleem
    ahja3: misschien gebruik ik de term "callbacks" verkeerd maar hierbij bedoel ik het serverside script dat je aanroept via ajax
    Last edited by adrianhates; 11-06-2012 at 12:09.
    no votes  

Posting Permissions

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

Log in

Log in