Archief - Enkele Ajax/jQuery probleempjes/vraagjes

MiniJeffrey · 11 jun 2012

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{
        [B]//er ging iets mis met de request, de href moet uitgevoerd worden[/B]
    }
}

function displayDetails(){
    if(request.readyState == 4){
        if(request.status == 200){
           resp = request.responseText;
           if(resp == 1){
               [B]// De ajax werkte, de href moet niet uitgevoerd worden[/B]
           }
           else{
               [B]// de ajax werkte niet, de href moet wel uitgevoerd worden[/B]
           }
         }
     }
}

adrianhates · 11 jun 2012

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 - [email protected]
 * @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

Archief - Enkele Ajax/jQuery probleempjes/vraagjes

MiniJeffrey

Legacy Member

adrianhates

Legacy Member