[AJAX / JQuery] JQuery werkt niet in door Ajax geladen page

[Storm90]

Hallo,

Ik ben nu bezig met een pagina die om de 30 seconden ZONDER refresh data uit een database leest, nu heb ik dit al voor elkaar met onderstaande code.
Even kort hoe het werkt:
Ik heb nu één pagina waarop een div genaamd "resultatenDiv" staat waarin een php pagina (faq.php) wordt gedropt, het ajax script leest de faq.php steeds uit en dropt deze dus opnieuw in de div. Echter als ik in de faq.php pagina JQuery ga gebruiken gaat het fout, de JQuery code werkt niet. Dit is mijn ajax code:

JavaScript:

function createRequestObject() {
    var req;

    if(window.XMLHttpRequest){
        req = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert('Problem creating the XMLHttpRequest object');
    }

    return req;
}

var http = createRequestObject();

function getPhp() {
    http.open('post','http://192.168.1.249/Betterlook%20good/websites/Ticket%20service/IT-staff/get_tickets.php',true);
    http.onreadystatechange = getPhpResponse;
    http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    http.send(null);
}

function getPhpResponse() {
    if(http.readyState == 4 && http.status == 200) {
    document.getElementById('resultatenDiv').innerHTML = http.responseText;
    }
}

setInterval(function (nTimeInterval) {
    getPhp();
    nTimeInterval = nTimeInterval || 0;
},30000);

Dit is mijn php pagina:

PHP:

<?php
$Domain = '192.168.1.249/Betterlook good/websites/Ticket service';
$Domaincookie = '192.168.1.249';

$database = mysql_connect('localhost', 'root');
mysql_select_db('ticketservice',$database);
    //Tabel berichten weergeven:
    echo '<h1 style="color: #2498BE;
    font-size:2.0em;
    font-family:"Arial";
    font-weight:bold;">FAQ</h1><br/>';
    $i=1;
    echo '<input type="text"><input type="submit" value="search"><br/><br/>';
    echo '<table class="faq_table" cellpadding="0px" cellspacing="0px" align="center">';
    $query = ("SELECT * FROM faq INNER JOIN users ON faq.user_id = users.user_id ORDER BY ticket_id DESC");
    $resultaat = mysql_query($query) or die ("FOUT: " .mysql_error()); // query uitvoeren
    $bg = 0;
    $i=0;
    while($record = mysql_fetch_object($resultaat))
     {
        echo  "<tr class='faq_table_tr'>";
        echo  "<td valign='top' width='83%'><div class='faq_h1$i'><h1>";
        echo  "What to do with a blue screen?</h1></div></td><td width='25%'class='post'>";
        echo  "<img class='plus' src='../images/plus.png' /><img class='min' src='../images/minus.png' />posted on $record->date</td></tr>";
        echo  "<tr><td valign='top'><div class='faq_table_text$i'";
        echo  "$record->text</div></td></tr>";
        $i++;
     }  
echo '</table>';
?>

En mijn JQuery code:

JavaScript:

$(document).ready(function(){
    $(".faq_h10").click(function(){
           $(".faq_table_text0").toggle("slow");
           return false;
    });
});

Ik zal even verder uitleggen hoe mijn pagina's in elkaar zitten:
In de head tags van mijn Index.php (hoofdpagina) heb ik verwezen naar de pagina met de JQuery code en naar de pagina met de AJAX code. Op mijn Index.php bevind zich een div waarin de subpagina's worden geladen mbv include (functioneert dus als het ware als IFRAME). Nu werkt alles perfect, als ik de home.php inlaad in de Index.php werken de JQuery functies op de home.php erg goed, maarrrr... Zodra ik de pagina met de div "resultatenDiv" aanroep wordt netjes door AJAX de php pagina in de div gedropt, alleen de JQuery code wordt niet meegenomen!

Ik heb al vanalles geprobeerd en ben erachter gekomen dat javascript wel werkt als ik bv. naar een functie verwijs die zich bv. in de Index.php bevindt, maar zodra ik in de JQuery code verwijs naar een div OP de php pagina die wordt uitgelezen door Ajax, werkt het niet meer. Ik heb alleen nog voor elkaar gekregen dat de div die uit hoort te klappen mbv toggle, 1 px uitklapt, maar dan stopt hij ermee. Iemand een oplossing?

[disjfa]

Als je met ajax wat inlaad laad je een string (tekst) in. Dus je kan niet in de aangeroepen pagina iets zetten wat doe moet uitvoeren. Dat moet je op de pagina die de ajax inlaad regelen.

[Storm90]

Als je met ajax wat inlaad laad je een string (tekst) in. Dus je kan niet in de aangeroepen pagina iets zetten wat doe moet uitvoeren. Dat moet je op de pagina die de ajax inlaad regelen.

Daar was ik later achter gekomen dat dit wel werkte, dan kon ik in de faq.php een link zetten naar een javascript functie die zich op de pagina met de div bevindt en dan voert hij deze netjes uit. Echter als ik er JQuery code plaats voert hij deze niet netjes uit, als ik dit plaats

JavaScript:

$(document).ready(function() {

werkt hij helemaal niet. En als ik bovenstaande weghaal beweegt de div die uit moet klappen mbv Toggle, hooguit 1 of 2 pixels. Het grootste probleem is denk ik dat ik zeg dat een div met een bepaalde class uit moet klappen, maar waarom werkt dit niet? Neemt ajax de class namen niet mee ofzo?

[_Thanatos_]

Is niet echt ajax he, als je niet met xml werkt

Maar waarom gebruik je niet gewoon jQuery's eigen XHR-functionaliteit?

JavaScript:

$.get(url, [data], [callback], [type]);

Zie ook de documentatie

In de callback kun je dan gewoon jQuery op de geretourneerde data loslaten. En het hoeft niet per se ajax te zijn, je mag vanaf je server ook gewoon html of platte tekst geven

[CH4OS]

http.open en dan iets er naar gaan posten lijkt me ook wat vreemd als er slechts een pagina opgehaald moet worden (en dus GET).

[Bosmonster]

_Thanatos_ schreef op zaterdag 04 april 2009 @ 23:09:
Is niet echt ajax he, als je niet met xml werkt

Maar waarom gebruik je niet gewoon jQuery's eigen XHR-functionaliteit?

JavaScript:

$.get(url, [data], [callback], [type]);

Zie ook de documentatie

In de callback kun je dan gewoon jQuery op de geretourneerde data loslaten. En het hoeft niet per se ajax te zijn, je mag vanaf je server ook gewoon html of platte tekst geven

Idd.. je gebruikt jquery en gebruikt vervolgens een eigen custom scriptje voor je AJAX calls.

http://docs.jquery.com/Ajax

Wat je nu doet is overigens niet aan te raden. Wat je beter kunt doen is je data ophalen in een XML of JSON format en vervolgens met jQuery je DOM-structuur samenstellen. Zo hou je je frontend en backend netjes gescheiden en kun je je data ook op andere plekken gebruiken.

[ Voor 16% gewijzigd door Bosmonster op 05-04-2009 14:26 ]

[Storm90]

Bedankt voor jullie reacties,

Het is nu inderdaad gelukt mbv jQuery:

JavaScript:

setInterval(function (nTimeInterval) {
    $('#faqdiv').load('http://192.168.1.249/Betterlook%20good/websites/Ticket%20service/IT-staff/get_tickets.php');
    nTimeInterval = nTimeInterval || 0;
    },10000);

Het enigste probleem is nu weer dat ik nu weer het probleem heb dat onderstaande code niet werkt:

JavaScript:

<script type="text/javascript">
    <!--
    $(document).ready(function(){
        AjaxReady();
    });
    function AjaxReady(){
        jQuery.noConflict();
        document.observe('dom:loaded', function () {
            $$('.faq_h1').each(function(item) {
                $('faq_table_text_'+item.id).hide();
                //item.update('<img src="../images/get.gif" alt="Show comments" /> Show comments');

                Event.observe(item, 'click', function(event){
                    $('faq_table_text_'+item.id).toggle();
                    if($('faq_table_text_'+item.id).visible()){
                        var sId = item.id;
                        var oOptions = {
                            method: "get",
                            parameters: "id=" + sId
                        };
                        var oRequest = new Ajax.Updater({success: "faq_table_text_"+item.id}, "IT-staff/getTickets.php", oOptions);
                        //item.update('<img src="../images/lose.gif" alt="Hide comments" /> Hide comments');
                    } else {
                        //item.update('<img src="../images/get.gif" alt="Show comments" /> Show comments');
                    }
                });
            });
        });
    };
    //-->
    </script>

Bovenstaande code staat tussen de <head> tags op de index pagina, op de index pagina worden overige pagina's ingeladen mbv include.

Het probleem is dat (zoals je waarschijnlijk wel ziet) wordt gekeken naar classes en id's... Indien er op de class "faq_h1" wordt geklikt, wordt er een div "getoggled". Het probleem is echter dat de code de id's en classes volgens mij niet kan lezen want het werkt niet. Indien ik de pagina niet laat inladen door ajax, dan doet hij het wel gewoon. Ik heb geprobeert de DOM te reloaden, zodra er op de class "faq_h1" wordt geklikt, maar dit wil niet helpen. Het werkt alleen als ik in de pagina die wordt ingeladen door ajax iets plaats als

HTML:

<a href="javascript:melding()" >

en dan tussen de <head> tags op de index.php dit plaats:

JavaScript:

function melding(){
  alert('test');
}

Als ik de code op deze manier zou doen, zou het wel werken, het probleem is echter dat ik mijn code dynamisch wil laten werken mbv een database, ik weet dat alleen werkend te krijgen op de manier van "indien er op die class wordt geklikt, doe dan..." en niet met <a href="javascript:doeIets()">
Iemand een idee?

Alvast bedankt!

[_Thanatos_]

Het lijkt erop dat je nu op een hele vreemde manier jQuery en prototype door elkaar gebruikt. Je gebruikt de event handling van prototype, maar daarin nog de functionaliteit van jQuery... Niet zo gek dat er dingen niet werken, zou ik zeggen

[Storm90]

Oke het is gelukt, ik heb het gedeelte van prototype proberen over te zetten naar jquery en alles werkt nu, perfect. Nog bedankt voor jullie hulp.