PHP bestand aanroepen met javascript
ik probeer een php bestand aan te roepen om exra informatie in een geladen html pagina te krijgen. Dit gaat prima met de volgende regel in mijn javascript funtie:
sizes.innerHTML = '<iframe src="/shop/script/ptpl_prod_overview_get_sizes.php?art=' + aid +'" style="width:210px;height:33px;margin:0;padding:0;background-color:#80d2d2;" scrolling="no" frameborder="0"></iframe>';
Maar het iframe is niet meer zo van deze tijd geloof ik en hij reageert nogal verschillend in IE ten opzichte van andere browsers. Wie heeft er voor mij een alternatief? Ik heb diverse voorbeelden gezien met AJAX echter ben ik daar niet zo in thuis.
Ik hoop dat iemand mij helpen kan.
Groet Marc
Marc Calis op 02/11/2012 12:38:27:
Ik heb diverse voorbeelden gezien met AJAX echter ben ik daar niet zo in thuis.
Om te beginnen, zie je het zitten om daar verandering in te brengen en er wel thuis in te geraken?
De code die je toont, is zonder jQuery (en daar is niets mis mee). jQuery maakt het wat gemakkelijker om met Ajax te werken. Geen bezwaar om toch met jQuery te werken?
Uiteindelijk zal je tot zoiets komen, als je met jQuery werkt.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
var sizes = ...; // geen idee hoe je aan sizes gekomen bent ...
$.ajax({
url: 'ptpl_prod_overview_get_sizes.php',
data: {
art: aid,
},
success: function(message) {
//
$(sizes).html(message);
}
})
$.ajax({
url: 'ptpl_prod_overview_get_sizes.php',
data: {
art: aid,
},
success: function(message) {
//
$(sizes).html(message);
}
})
Om een echt antwoord te geven, heb ik vooral deze vraag: Waar komt aid vandaan?
Is er op de pagina een overzicht van de items (iets met kunst, I presume); een klik op een 'lees meer knop' haalt dan de informatie van de server? Zoiets?
alvast heel erg bedankt dat je mij hier mee helpen wil.
Het idee achter mijn scriptje is dat div met id="sb1000" de javascript functies showSize() en hideSize(); De var sizes in het script is wat verwarrend gekozen ten opzichte van de class="sizes".
showSize() roept een iframe aan met welke een php script aanroept met url var aid [articleID]. Dit script haalt de maten uit een database. Het heeft niets met kunst te maken maar met kledingmaten ;).
Ik hoop dat mijn vraag nu iets duidelijker voor je is.
Ik ben zeer bereid om AJAX en jQuery te leren. Graag suggesties voor goede literatuur/sites.
<script type="text/javascript">
function showSize(id,aid)
{
var sizeBox = document.getElementById(id);
sizeBox.style.backgroundColor = '#80d2d2';
var sizes = document.getElementById(id+"_s");
sizes.innerHTML = '<iframe src="/shop/script/ptpl_prod_overview_get_sizes.php?art=' + aid +'" style="width:210px;height:33px;margin:0;padding:0;background-color:#80d2d2;" scrolling="no" frameborder="0"></iframe>';
}
function hideSize(id)
{
var sizeBox = document.getElementById(id);
sizeBox.style.backgroundColor = 'transparent';
var sizes = document.getElementById(id+"_s");
sizes.innerHTML = '';
}
<div class="sizes" id="sb1000">
<img src="/shop/tpl/img/po_i.png" width="32" height="32" class="sz-i" onmouseover="showSize('sb1000','305606');" onmouseout="hideSize('sb1000');" />
<div class="avail" id="sb1000_s"></div>
</div>
</script>
Ja, dat moest ik weten.
----
Om te beginnen: een iframe is een HTML document. Met alles er op en er aan (<!doctype ... <html ... <body...)
Met ajax is het anders; daar heb je enkel het deel nodig dat je effectief nodig hebt.
Dus, de nieuwe versie van 'ptpl_prod_overview_get_sizes.php' mag geen doctype, body, ... bevatten
----
jQuery werkt (over het algemeen) volgens deze structuur:
$(elementen).evenement(callback);
ofwel: Wanneer iets gebeurt met deze elementen, doe dan dit.
'elementen' kan je aanspreken zoals je css aanspreekt.
'evenement': bv. onclick wordt click; onmouseover wordt mouseover; de 'on' weg doen ...
'callback': hier geef je een functie. Ofwel schrijf je de definitie van de functie hier rechtstreeks, ofwel geef je (de naam van) een bestaande functie mee. Het eerste is meer gebruikelijk (Merk op dat het een groot verschil uitmaakt voor de scope. functies die gedefinieerd zijn binnen een andere functie kunnen de variabelen van die andere functie gebruiken).
Dat maakt dat je alles van javascript weg haalt uit de markup. Geen <div onclick="foo()"></div> meer. In plaats daarvan kan je alle elementen aanspreken met de zelfde logica waarmee je css aanspreekt. Dus: werk met class en id in de markup.
Wanneer je extra informatie aan een HTML-element wil meegeven, heb je een prachtig attribuut: data-... . Als volgt:
bv.
<div id="test" data-url="mijnsite.php"></div> => dit kan je lezen (en schrijven...) met
var url = $('#test').data('url'); // geeft dus mijnsite.php
Dit kan dus heel handig zijn voor elementen zoals jouw <img> . Je kan de target id meegeven in als <img data-target="sb1000" ...> (ik denk echter dat het hier niet nodig zal zijn)
----
over tot code. Dit kan je al stand alone testen. Zie dus dat 'ptpl_prod_overview_get_sizes.php' op de juiste plaats staat en dat ze geen doctype (en rest van de HTML hoofding...) bevat.
Ik denk dat dit al ongeveer doet wat moet gebeuren
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div class="sizes" id="sb1000">
<img src="/shop/tpl/img/po_i.png" width="32" height="32" class="sz-i">
<div class="avail" id="sb1000_s"></div>
</div>
<div class="sizes" id="sb1001">
<img src="/shop/tpl/img/po_i.png" width="32" height="32" class="sz-i">
<div class="avail" id="sb1001_s"></div>
</div>
<div class="sizes" id="sb1002">
<img src="/shop/tpl/img/po_i.png" width="32" height="32" class="sz-i">
<div class="avail" id="sb1002_s"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function($) { // binnen deze accolades: dit wordt uitgevoerd op het moment dat de pagina geladen is (de DOM is klaar...)
// we gaan de HTML-elementen die we nodig hebben cachen en in een variabele steken.
var sizes = $('.sizes'); // sizes wordt hiermee een array van alle HTML-elementen met class="sizes"
// We binden nu evenementen aan elementen (en zeggen wat er moet gebeuren)
sizes.hover( // .hover werkt als: eerst de mouseOver, dan de mouseOut
// mouseover
function(e) {
// $(this) is het aangesproken element ... dus de <div class="sizes">
var target_div = $(this).find('.avail'); // dus ... binnen de container (van de de aangesproken <img>) zoeken we naar iets met class="avail"
// Ajax verzoek sturen
$.ajax({
url: 'ptpl_prod_overview_get_sizes.php', // zie dat het pad juist is
data: {
art: $(this).attr('id'),
},
success: function(message) {
// dit wordt uitgevoerd op het moment dat het verzoek terug is met een succesvol antwoord. var message is de echo van de php-file
target_div.html(message);
}
});
},
// mouseout
function(e) {
var target_div = $(this).find('.avail');
target_div.empty() // target leeg maken
$(this).css({backgroundColor: 'transparent'});
}
);
});
</script>
<img src="/shop/tpl/img/po_i.png" width="32" height="32" class="sz-i">
<div class="avail" id="sb1000_s"></div>
</div>
<div class="sizes" id="sb1001">
<img src="/shop/tpl/img/po_i.png" width="32" height="32" class="sz-i">
<div class="avail" id="sb1001_s"></div>
</div>
<div class="sizes" id="sb1002">
<img src="/shop/tpl/img/po_i.png" width="32" height="32" class="sz-i">
<div class="avail" id="sb1002_s"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function($) { // binnen deze accolades: dit wordt uitgevoerd op het moment dat de pagina geladen is (de DOM is klaar...)
// we gaan de HTML-elementen die we nodig hebben cachen en in een variabele steken.
var sizes = $('.sizes'); // sizes wordt hiermee een array van alle HTML-elementen met class="sizes"
// We binden nu evenementen aan elementen (en zeggen wat er moet gebeuren)
sizes.hover( // .hover werkt als: eerst de mouseOver, dan de mouseOut
// mouseover
function(e) {
// $(this) is het aangesproken element ... dus de <div class="sizes">
var target_div = $(this).find('.avail'); // dus ... binnen de container (van de de aangesproken <img>) zoeken we naar iets met class="avail"
// Ajax verzoek sturen
$.ajax({
url: 'ptpl_prod_overview_get_sizes.php', // zie dat het pad juist is
data: {
art: $(this).attr('id'),
},
success: function(message) {
// dit wordt uitgevoerd op het moment dat het verzoek terug is met een succesvol antwoord. var message is de echo van de php-file
target_div.html(message);
}
});
},
// mouseout
function(e) {
var target_div = $(this).find('.avail');
target_div.empty() // target leeg maken
$(this).css({backgroundColor: 'transparent'});
}
);
});
</script>