Avatar billede christian-BN Praktikant
27. januar 2011 - 20:53 Der er 5 kommentarer

Ajax php

Hej, jeg er begyndt at rode med ajax, og har i den forbindelse et spørgsmål.
Jeg har oprettet 2 formularer som har nogle input-felter. De felter har nogle værdier som bruges til at kalde en php-fil via ajax, men ligegyldigt hvad jeg gør, så er det samme formular som bliver kaldt? Det er altså kun den første form som bliver brugt af ajax ligegyldigt hvilken knap jeg trykker på. type = W og listetype = facebook

<form name='uge' id='uge'>
<input type='hidden' id='type' value='W' /> <br />
<input type='hidden' id='listtype' value='facebook' />
<input type='button' id='uge' onclick='ajaxFunction()' value='Ugescore' />
</form>

<form name='dage' id='dage'>
<input type='hidden' id='type' value='D' /> <br />
<input type='hidden' id='listtype' value='facebook' />
<input type='button' id='dage' onclick='ajaxFunction()' value='Dagsscore' />
</form>

Ajax-koden er:

<script type="text/javascript">
$(document).ready(function(){

    $(".pane .delete").click(function(){
      $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
    });

});

$(document).ready(function() {
//attach function to input and make text grayed out on page load
textReplacement($('#username').css("color", "#999"));
textReplacement($('#password').css("color", "#999"));
});

// the function:
    function textReplacement(input){ //input focus text function
    var originalvalue = input.val();
    input.focus( function(){
          if( $.trim(input.val()) == originalvalue ){ input.val('').css("color", "#4BAE4E"); }
    });
    input.blur( function(){
          if( $.trim(input.val()) == '' ){ input.val(originalvalue).css("color", "#999"); }
    });
}
</script>
Avatar billede christian-BN Praktikant
27. januar 2011 - 20:54 #1
Vrøvl

Fik indsat den forkerte ajax-kode. Her er den rigtige.

<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!
   
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var type = document.getElementById('type').value;
    var list = document.getElementById('listtype').value;

    var queryString = "?rank=true&type=" + type + "&list=" + list;
    ajaxRequest.open("GET", "ajaxHandler.php" + queryString, true);
    ajaxRequest.send(null);
}

//-->
</script>
Avatar billede heinzdmx Nybegynder
27. januar 2011 - 21:04 #2
Hvis det var mig ville jeg bruge jQuery til at lave en post, synes det gør det nemmere at arbejde med, da det er et 2 linjer i stedet for 13.

Desuden kan du ikke have flere felter med samme id. Det skal man bruge class til.

En god gennemgang af jquery og ajax:
http://articles.sitepoint.com/article/ajax-jquery

Og en anden guide:
http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/
Avatar billede ksoren Nybegynder
27. januar 2011 - 21:08 #3
Hvis du laver et par ændringer...

function ajaxFunction(f){
    ...
    var type = f.type.value;
    var list = f.listtype.value;
    ...
}

<form name='uge' id='uge'>
<input type='hidden' name='type' value='W' /> <br />
<input type='hidden' name='listtype' value='facebook' />
<input type='button' name='uge' onclick='ajaxFunction(this.form)' value='Ugescore' />
</form>

<form name='dage' id='dage'>
<input type='hidden' name='type' value='D' /> <br />
<input type='hidden' name='listtype' value='facebook' />
<input type='button' name='dage' onclick='ajaxFunction(this.form)' value='Dagsscore' />
</form>
Avatar billede christian-BN Praktikant
27. januar 2011 - 21:29 #4
Jeg var ikke klar over at man kunne bruge class' til det når man bruger ajax.

Men tak for linket, det ser overskueligt ud. Men måske du har en bedre ide til hvordan man kan gøre det.

Dit svar har givet mig et par enkelte flere spørgsmål, som jeg håber du kan hjælpe med.

1)
Det hele kommer ud på at det skal være 6 forskellige knapper, og hvor knap kalder en funktion som ligger i en php klasse. (classses.php). som det er ligenu bruger jeg en handler.php?foo=XX&bar=YY til at definere hvilken funktion der skal kaldes.. men er det overhovedet den bedste løsning?

2)
Hvis jeg bruger den løsningen dokumentationen du sendte:
<script type="text/JavaScript">
$(document).ready(function(){
  $("#generate").click(function(){
    $("#quote p").load("script.php");
  });
});
</script>

Så skal jeg vel stadig definere hvilken DIV outputtet skal i?

3)
Som jeg nævnte tidligere så skal der være 6 knapper som kalder en funktion, men som det er lige nu, så skal 3 af knapperne tilhører div_output1 og de resterende 3 tilhører div_output2. Er der nogen smart måde at gøre det på?

Tak for hjælpen.

ps. pointssatsen kan forhøjes hvis det er nødvendigt.
Avatar billede heinzdmx Nybegynder
27. januar 2011 - 21:52 #5
1) Det ved jeg ikke helt, kan ikke rigtig vurdere det.

2) Det gør du faktisk allerede.
Du starter med at vælge det element med id=quote og så den første p under den. Den p kalder du så .load funktionen på og derved erstatter den indholdet af <p> med det indhold som script.php returnere

3)
Ved ikke lige hvilken metode der vil være smartest, men evt. kan du lave en 3 parameter der afgøre hvilken div den skal tilføjes. Lav det som tal, dvs. 1, 2 eller 3 og så kan du lave en switch i din jQuery der kalder load med den rigtige selector.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester