Jeg har kastet mig ud i mit første lille Jquery forsøg (som en læreproces). Og det går ok, men er stødt på følgende problemer/spørgsmål:
(Koden kommer, længere nede)
Jeg starter med en side, med en række forms, hvor brugeren kan vælge en vare og et antal.
Hver form har en unik .class hvorfra JQuery kan kende forms'ene fra hinanden.
Via Jquery har jeg fået følgende til at fungere:
Når der klikkes på en vare (en submitknap), - så skifter Jquery fint knapperne ud, med en "afbestil"-knap og en "Gå til kassen"-knap.
Jquery skriver også en lille "du har bestilt denne vare"-sætning ind.
Jeg bruger denne metode til at udskifte og skrive via Jquery:
$("#you_ordered_"+Id).html('<div id="you_ordered_'+Id+'">det nye indhold</div>');
Spørgsmål 1:
Findes der en metode som ikke skifter hele det valgte element ud ( <div></div> ) men kun INDHOLDET af det valgte element. Sådan at jeg ikke behøver at skrive <div>"det nye indhold"</div> - men bare "det nye indhold" ?
Næste problematik:
Når så en bruger har valgt en vare og klikket på den, og Jquery har sat nye knapper ind, - og brugeren gerne vil afbstille igen, - så sker følgende:
Når der klikkes på "Afbestil"-knappen, så refreshes siden! (så min Jquery køres åbenbart ikke).
Hvis jeg refresher siden, - så vises de nye knapper via php - og SÅ kører mit Jquery. Php versionen og Jquery versionen af knappen er fuldstændig ens, så vidt jeg kan se. Men den ene virker og den anden gør ikke.
Spørgmsål 2:
Hvad sker (i ovenstående problematik)? :-)
Spørgsmål 3:
Jeg bemærker at der er uoverensstemmelser mellem kildekoden og resultatet på skærmen. Jquerys tekst-tilføjelser vises på skærmen, men ikke i kildekoden.
Hvordan kan jeg tjekke kildekoden til siden, MED Jquery resultaterne? Altså hvordan tjekker jeg Jquerys html-output?
Her er min Jquery kode: (shop_add filerne er bare en lille php-fil som sætter en session, så bestillingen huskes - Der skrives ikke noget ud, i disse.)
//Hvis der klikkes på "føj til indkøbskurv"
$(function() {
$(".koeb").click(function(){
var element = $(this);
var Id = element.attr("id");
var vare_vare = $('#vare_vare_'+Id).val();
var vare_antal = $('#vare_antal_'+Id).val();
var vare_strrlse = $('#vare_strrlse_'+Id).val();
var spr = $('#spr_'+Id).val();
var vare = $('#vare_'+Id).val();
var shop_remove_cart = $('#shop_remove_cart_' + Id).val();
var shop_pay = $('#shop_pay_' + Id).val();
var shop_you_ordered = $('#shop_you_ordered_' + Id).val();
var dataString = 'vare_antal='+vare_antal+'&vare_strrlse='+vare_strrlse+'&spr='+spr+'&vare='+vare;
if(isNaN(vare_antal) || (vare_antal==''))
{
alert("How many?");
}
else
{
$.ajax({
type: "POST",
url: "includes/shop_add.php",
data: dataString,
cache: false,
success: function(html){
$("#you_ordered_"+Id).html('<div id="you_ordered_'+Id+'"><br>' + shop_you_ordered + ' <b>' + vare_antal + ' ' + vare_vare + '.</b><br> </div>');
$("#shop_togglebox_1_"+Id).html('<div id="shop_togglebox_1_'+Id+'"><input type="submit" class="afbestil" value="'+shop_remove_cart+'" id="'+Id+'"></div>');
$("#shop_togglebox_2_"+Id).html('<div id="shop_togglebox_2_'+Id+'"> WHAT</div>');
}
});
}return false;});});
//
//Hvis der klikkes på "Afbestil"
$(function() {
$(".afbestil").click(function(){
var element = $(this);
var Id = element.attr("id");
var spr = $('#spr_'+Id).val();
var vare = $('#vare_'+Id).val();
var shop_items = $('#shop_items_' + Id).val();
var shop_add_cart = $('#shop_add_cart_' + Id).val();
var dataString = 'spr='+spr+'&vare='+vare;
if(isNaN(vare))
{
alert("ERROR!");
}
else
{
$.ajax({
type: "POST",
url: "includes/shop_unadd.php",
data: dataString,
cache: false,
success: function(html){
$("#you_ordered_"+Id).html('<div id="you_ordered_'+Id+'"></div>');
$("#shop_togglebox_1_"+Id).html('<div id="shop_togglebox_1_'+Id+'">'+shop_items+': <input type="text" name="vare_antal" size="2" value="1" class="vare_antal" id="vare_antal_' + Id + '"></div>');
$("#shop_togglebox_2_"+Id).html('<div id="shop_togglebox_2_'+Id+'"> <input type="submit" value="' + shop_add_cart + '" class="koeb" id="' + Id +'" ></div>');
}
});
}return false;});});
//
Og lidt kildekode, som generet af php, - altså FØR Jquery har ændret noget:
<!-- Artikel start -->
<div id="vare_container">
<div id="vare_container23">
<form method="post" action="?spr=dk&vis=shop2" >
<table border="0" cellspacing="0" width="530" class="default">
<tr>
<td colspan="2" class="topkasse" style="padding-left:5px; border-top:1px solid #303D3B; border-left:1px solid #303D3B; border-right:1px solid #303D3B;" ><b>Album - Christmastime </b></td>
</tr>
<tr>
<td valign="top" class="kasse_venstre" style="padding-left:5px; border-left:1px solid #303D3B; "><br>Album udgivet i 2005<br><br><b>100 kr.</b><br><br>fragt: 30 kr.<br></td>
<td valign="top" align="right" class="kasse_hojre" rowspan="2" style="border-bottom:1px solid #303D3B; border-right:1px solid #303D3B;"><div class="shop_billede"><a href="grafik/shop/coverchristmastime.jpg" target="_blank" title="" alt=""><img border="0" src="grafik/shop/coverchristmastime.jpg" style="margin:13px;"></a></div></td>
</tr>
<tr>
<td valign="bottom" class="kasse_bund" align="left" style="padding-left:5px; border-bottom:1px solid #303D3B; border-left:1px solid #303D3B; ">
<div id="you_ordered_3"></div>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="shop_togglebox_1_3">Antal: <input type="text" name="vare_antal" size="2" value="1" class="vare_antal" id="vare_antal_3"></div></td>
<td> </td>
<td><div id="shop_togglebox_2_3"><input type="submit" value="Føj til indkøbskurv" class="koeb" id="3" ></div></td>
</tr>
</table>
<input type="hidden" name="vare_antal" value="" id="vare_antal_3">
<input type="hidden" name="spr" value="dk" id="spr_3">
<input type="hidden" name="vare" value="3" id="vare_3">
<input type="hidden" name="no_java_koeb" value="1">
<input type="hidden" name="shop_remove_cart" id="shop_remove_cart_3" value="Fjern fra indkøbsvogn">
<input type="hidden" name="shop_pay" id="shop_pay_3" value="Gå til kassen">
<input type="hidden" name="shop_you_ordered" id="shop_you_ordered_3" value="Du har bestilt">
<input type="hidden" name="shop_pay" id="vare_vare_3" value="Album - Christmastime">
<input type="hidden" name="shop_items" id="shop_items_3" value="Antal">
<input type="hidden" name="shop_add_cart" id="shop_add_cart_3" value="Føj til indkøbskurv">
<input type="hidden" value=5 name="vare" ><br> </td>
</tr>
</table>
</div>
</div>
</form>
<!-- Artikel slut -->
Indlæg senest redigeret d. 13.07.2009 14:18 af Bruger #11668