Pagina aanroepen met JQuery

[Thomasv6]

Dag Tweakers,

Ik zit met het volgende probleem, ik was bezig met een script te bouwen die doormiddel van de edit() functie in JavaScript een pagina aanroept. Dit werkt heel mooi, totdat je IE gebruikt.
Het rara is dat ik in IE helemaal niks krijg, geen foutmeldingen e.d. en in FireFox en Chrome werkt het probleemloos.

Nu is het wel zo, dat als ik het 2e stuk code alles binnen de php tags hou, en de "<option>" ertussen uit haal, dan werkt het perfect. Maar de bedoeling is natuurlijk wel dat ik een select menu houd.

Javascript (incl. JQuery):

JavaScript:

function edit(ID){
    var options = {};
    $("#bewerk").load("includes/page/admin.php?edit&id=" + ID, function(response, status, xhr){
        if (status == "error"){
            var msg = "Sorry, deze pagina kan niet gevonden worden. Probeer het later opnieuw";
            $("#error_mes").html(msg);
            $('#error').removeClass('green'); $('#error').addClass('red'); 
            runEffect("show", "error");
        }
    });
    $("#bewerk").show('clip',options,1000);
}

En de code die aangeroepen word:

PHP:

 
<?php

if (isset($_GET['edit']) && empty($_GET['edit'])){
        $usr -> groupi(true, '', mysql_real_escape_string($_GET['id']));
        $ui =   $usr -> info['this'];
        ?>
        <div id="aedit">
            <div style="float: left; width: 50%; padding-top: 8px;"> Gebruikersnaam </div>
            <div style="float: left; padding-top: 2px;"><input id="user" onkeyup="check('name')" type="text" value="<?= $ui['name'] ?>" class="loginform black" /><input id="userN" type="text" value="<?= $ui['name'] ?>" style="display: none"; /></div>
            <div style="float: left; width: 50%; padding-top: 8px;"> Wachtwoord </div>
            <div style="float: left; padding-top: 2px;"><input id="pass1" type="password" class="loginform black" /></div>
            <div style="float: left; width: 50%; padding-top: 8px;"> Wachtwoord (herhaal)</div>
            <div style="float: left; padding-top: 2px; margin-bottom: 5px;"><input onkeyup="check('ww')" id="pass2" type="password" class="loginform black" /></div>            
            <div class="orange padding" style="font-style: italic; clear: both; margin-bottom: 5px;"><b>Let op:</b> Als je beide wachtwoord velden leeg laat, veranderd het wachtwoord niet.</div>
            <div style="clear: both; float: left; width: 50%; padding-top: 8px;"> Gebruikersgroep</div>
            <div style="float: left; padding-top: 2px; padding-bottom: 10px;">
                <select id="group" class="loginform black" style="width: 150px;">
                    <?php
                    $p      =   $usr -> info['group']['name'];
                    $aantal =   count($p);
                    
                    for ($i=0; $i < $aantal; $i++){
                        echo '<option ';
                        if ($ui['group'] == $p[$i])
                            echo 'selected="selected" ';
                        echo 'value="'.$p[$i].'">'.$p[$i].'</option>';
                    }
                    
                    ?>
                </select>
            </div>
            <div onclick="editu();" style="clear: both; cursor: pointer; padding-left: 50%;">Bijwerken</div>
        </div>  
        
        <?php
    }
?>

Wie weet wat hier fout aan is, of is het IE wat mij zit te pesten?

Edit: Iets te fanatiek de titel getypt, maar ik kan het niet wijzigen?

[Kiphaas7]

Offtopic en geen oplossing voor je probleem, maar op dit moment maak je geen gebruik van dat waar jquery juist zo handig voor is: chaining.

JavaScript:

function edit(ID){ 
    var options = {}; 
    $("#bewerk").load("includes/page/admin.php?edit&id=" + ID, function(response, status, xhr){ 
        if (status == "error"){ 
            var msg = "Sorry, deze pagina kan niet gevonden worden. Probeer het later opnieuw"; 
            $("#error_mes").html(msg); 
            $('#error').removeClass('green'); $('#error').addClass('red');  
            runEffect("show", "error"); 
        } 
    }); 
    $("#bewerk").show('clip',options,1000); 
}

Kan je omschrijven naar:

JavaScript:

function edit(ID){ 
    var options = {}; 
    $("#bewerk")
        // Chaining!
        .load("includes/page/admin.php?edit&id=" + ID, function(response, status, xhr){ 
            if (status == "error"){ 
                var msg = "Sorry, deze pagina kan niet gevonden worden. Probeer het later opnieuw"; 
                $("#error_mes").html(msg);
                // Chaining!
                $('#error').removeClass('green').addClass('red');  
                runEffect("show", "error"); 
            } 
        })
        // Chaining!
        .show('clip',options,1000); 
}

Nog verder offtopic, maar de classes doe je hebt (red/green) zijn niet echt semantisch. Natuurlijk is het heel gebruikelijk voor error messages om rood te zijn, en confirmation messages groen, maar stel dat je ze paars en geel wil maken? Natuurlijk verander je dat dan even in je css, maar dan slaat de classname nergens meer op. Je kan ze beter meer semantische namen geven zoals bijvoorbeeld 'error' en 'confirmation'. Alhoewel je al een id '#error' hebt, maar die is ook niet zo gelukkig gekozen (is het altijd een error die je laat zien?), '#message' zou bijvoorbeeld beter zijn.

Misschien iets meer ontopic, maar wat doet runEffect eigenlijk? Is volgens mij geen jquery code, en er bestaan genoeg effect mogelijkheden in jquery...

[ Voor 4% gewijzigd door Kiphaas7 op 31-03-2010 09:50 ]

[MueR]

Thomasv6 schreef op woensdag 31 maart 2010 @ 09:13:
Edit: Iets te fanatiek de titel getypt, maar ik kan het niet wijzigen?

Ik wel Maak de volgende keer maar een topicreport () aan, daar kan je dergelijke titelfixrequests inzetten

Je zal iets meer moeten debuggen. Bijvoorbeeld, zorg met wat alerts (of netter, console.log icm IE's developer tools) dat je weet wat er op welk moment gebeurt. welke informatie je terug krijgt en meer van dat spul. Momenteel tasten mensen hier net zo goed in het duister.

[ Voor 55% gewijzigd door MueR op 31-03-2010 09:56 ]

[Bosmonster]

Zonder voorbeeld is het inderdaad een beetje koffiedik kijken. Klopt je PHP-output? Geeft ie geen errors in de code? Werkt het misschien wel als je de options op 1 regel schrijft opv 3? IE valt soms over rare dingen.

[ Voor 7% gewijzigd door Bosmonster op 31-03-2010 10:29 ]

[Thomasv6]

Kiphaas7 schreef op woensdag 31 maart 2010 @ 09:47:
Offtopic en geen oplossing voor je probleem, maar op dit moment maak je geen gebruik van dat waar jquery juist zo handig voor is: chaining.

JavaScript:

..

Kan je omschrijven naar:

JavaScript:

..

Nog verder offtopic, maar de classes doe je hebt (red/green) zijn niet echt semantisch. Natuurlijk is het heel gebruikelijk voor error messages om rood te zijn, en confirmation messages groen, maar stel dat je ze paars en geel wil maken? Natuurlijk verander je dat dan even in je css, maar dan slaat de classname nergens meer op. Je kan ze beter meer semantische namen geven zoals bijvoorbeeld 'error' en 'confirmation'. Alhoewel je al een id '#error' hebt, maar die is ook niet zo gelukkig gekozen (is het altijd een error die je laat zien?), '#message' zou bijvoorbeeld beter zijn.

Misschien iets meer ontopic, maar wat doet runEffect eigenlijk? Is volgens mij geen jquery code, en er bestaan genoeg effect mogelijkheden in jquery...

Oke, bedankt voor de tips! Ik ben nog maar een beginner met JQuery en zal het iig zo aanpassen zoals jij het zegt. Ziet er een stuk netter uit.
Over hoe ik de div's heb genoemd heb je opzich ook wel gelijk en ga dit ook zeker veranderen.

runEffect is trouwens wel een JQuery effect, maar valt onder de UI

MueR schreef op woensdag 31 maart 2010 @ 09:51:
[...]

Ik wel Maak de volgende keer maar een topicreport ([afbeelding]) aan, daar kan je dergelijke titelfixrequests inzetten

Je zal iets meer moeten debuggen. Bijvoorbeeld, zorg met wat alerts (of netter, console.log icm IE's developer tools) dat je weet wat er op welk moment gebeurt. welke informatie je terug krijgt en meer van dat spul. Momenteel tasten mensen hier net zo goed in het duister.

Oke, handig voor de volgende keer!
Hoebedoel je dat trouwens? Dat ik overal in me JavaScript zeg maar alerts naar boven laat komen wat die op dat moment doet?
En wat bedoel je precies met een console.log? Ik ben namelijk vrij onbekent met dit soort dingen. Al helemaal in IE.

Bosmonster schreef op woensdag 31 maart 2010 @ 10:28:
Zonder voorbeeld is het inderdaad een beetje koffiedik kijken. Klopt je PHP-output? Geeft ie geen errors in de code? Werkt het misschien wel als je de options op 1 regel schrijft opv 3? IE valt soms over rare dingen.

De php-output klopt wel, tenminste daar ga ik vanuit. Php is server-side en aangezien die het in andere browsers wel doet, zou die in IE precies hetzelfde moeten geven.

Over de options, als ik em compleet weglaat werkt het wel. Als ik <select></select> erneer zet werkt het ook nog, met dat ik er een <option> tussenzet laat die direct niks meer zien..

Als een online voorbeeld echt noodzakelijk is, zal ik kijken als dat mogelijk word. Het draait nu namelijk op USBWebserver.

Edit: 22:17
Ik ben er door de response in een alert te zetten achter gekomen dat hij gewoon een html pagina teruggeeft, dus het waarschijnlijk puur aan het html gedeelte ligt.

Dit is de pagina die ik terugkrijg:

HTML:

        <div id="aedit">
            <div style="float: left; width: 50%; padding-top: 8px;"> Gebruikersnaam </div>
            <div style="float: left; padding-top: 2px;"><input id="user" onkeyup="check('name')" type="text" value="Henk" class="loginform black" /><input id="userN" type="text" value="Henk" style="display: none" /></div>
            <div style="float: left; width: 50%; padding-top: 8px;"> Wachtwoord </div>
            <div style="float: left; padding-top: 2px;"><input id="pass1" type="password" class="loginform black" /></div>
            <div style="float: left; width: 50%; padding-top: 8px;"> Wachtwoord (herhaal)</div>
            <div style="float: left; padding-top: 2px; margin-bottom: 5px;"><input onkeyup="check('ww')" id="pass2" type="password" class="loginform black" /></div>            
            <div class="orange padding" style="font-style: italic; clear: both; margin-bottom: 5px;"><b>Let op:</b> Als je beide wachtwoord velden leeg laat, veranderd het wachtwoord niet.</div>
            <div style="clear: both; float: left; width: 50%; padding-top: 8px;"> Gebruikersgroep</div>
            <div style="float: left; padding-top: 2px; padding-bottom: 10px;">
                <select id="group" class="loginform black" style="width: 150px;">
                    <option value="Beheerders">Beheerders</option><option selected="selected" value="Monteurs">Monteurs</option>                </select>
            </div>
            <div onclick="editu();" style="clear: both; cursor: pointer; padding-left: 50%;">Bijwerken</div>
        </div>  
        
        </div>

[ Voor 21% gewijzigd door Thomasv6 op 31-03-2010 22:19 ]