Hoe een variabele uit Jquery te halen
Ik weet dat dit een PHP forum is maar aangezien er hier genoeg 'wizz-kids' rondlopen die overal verstand van hebben, wil ik hier graag even een vraag stellen over JQuery ....... ;-)
Ik heb in een website een datapicker welke goed werkt en waarbij je diverse dagen kan selecteren op de kalender : http://multidatespickr.sourceforge.net/
Een mooie eigenschap is dat je de geselecteerde datums dus ook kunt tonen in een tekstveld d.m.v. gebruik te maken van altField. De code van de datepicker is :
<script type="text/javascript">
$(function() {
$('#pre-select-dates').multiDatesPicker({
addDates: [],
altField: '#altOutput',
altFormat: 'yyyy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: false,
multiSelect: 999,
multiSeparator: ',\n'});
});
</script>
Je kan dan de output laten zien in een tekstveld door onderstaande code erin te zetten :
<input id="altOutput" type="text" readonly="readonly" name="altOutput" />
Dit zorgt ervoor dat alle geselecteerde data, gescheiden door een komma, realtime in het tekstveld gezet wordt.
Maar ik wil eigenlijk dat deze data onder elkaar gezet wordt en ook zonder komma.
Is het mogelijk om deze variabele #altOutput uit javascript zo te maken dat ik daar een PHP variabele $altOutput van kan maken?
Want dan kan ik alle data wel m.b.v. explode uit elkaar halen en in een array zetten zodat ik ze onder elkaar kan plaatsen.
Iemand een suggestie?
Met vriendelijke groeten,
Arie
Gewijzigd op 24/12/2012 14:43:39 door Erik Rijk
Quote:
Is het mogelijk om deze variabele #altOutput uit javascript zo te maken dat ik daar een PHP variabele $altOutput van kan maken?
Arie:
Php draait op de server, javascript in de browser van de gebruiker.
Dus dit is wat er normaliter gebeurd:
-gebruiker vraag pagina op van de server
-php knutselt een pagina in elkaar welke teruggestuurd wordt naar de browser van de gebruiker
-als de pagina geladen is wordt javascript gestart. (simpel gezegd).
Dus: om een waarde terug naar de server te sturen zal er data meegestuurd moeten worden met het opvragen van een nieuwe pagina. Dit kan op een aantal manieren.
1. GET (via de url zoals bijv http://www.mijnsite.nl/index.php?date=11-12-2012&id=5)
2. POST: variabelen die meegestuurd worden in de header van de request (request is het opvragen van een pagina)
Normaal gebeurd dit door een formulier te verzenden. Vast wel bekend, maar het kan ook met AJAX. AJAX methodes zijn standaard in JQUERY meegeleverd en er zijn talloze voorbeelden te vinden. het verschil is dat normaal je pagina ververst wordt en met ajax niet.
Wat betreft jouw verhaal over de regels onder elkaar zetten: dit is totaal niet nodig om de gegevens met explode() in een array te krijgen. het kan gewoon met $arr = explode(',', $_POST['naam_van_het_inputveld']);
Bedankt voor je reactie en uitleg!
Het PHP / javascript verhaal is mij wel duidelijk maar ik hoopte dat er dus een manier zou zijn om de waarde welke in een tekstveld gezet wordt door Jquery, direct weer uit te lezen en daar een php variabele van te maken maar ik kan deze dus blijkbaar alleen gebruiken wanneer de pagina refrest.
Het was mij inderdaad wel gelukt om de hele string vanuit jQuery in een PHP variabele te krijgen na een submit d.m.v. $output = $_POST['altOutput']; maar dat betekent dat ik een submit moet doen na elke datum die toegevoegd wordt, dat lijkt mij ook niet erg gebruikersvriendelijk ;-)
Dus rest mij waarschijnlijk niet anders dan AJAX ...................
Kan iemand mij als grote onbekende in de AJAX wereld een beetje op weg helpen met AJAX en dit probleem?
Het lijkt er dus op dat binnen AJAX de variabele #altOutput met de voorbeelddata
12/21/2012,12/22/2012,12/23/2012
omgezet moet worden naar
12/21/2012
12/22/2012
12/23/2012
Met vriendelijke groeten,
Arie
Het zijn wel meerdere vragen tegelijk; ik beantwoord er een aantal, maar kijk vooral naar de code (en commentaar).
Van daaruit kan dit gefine tuned worden tot wat je nodig hebt.
Het eerste wat ik doe, is om die "\n" (= nieuwe lijn) weg te halen. In dit geval is dit nergens goed voor. Dus je laatste vraag vervalt.
In een <textarea> zou het wel passen, in een <input> niet.
- Ik toon je een stuk Ajax. Je ziet de extra code (zie naar het verschil met jouw code).
Wat ik doe: bij elke datum die geselecteerd wordt, stuur ik die waarde naar de server.
Je moet eens uitleggen hoe jij het ziet? Wanneer (op basis van welke user event) sturen we die datum? Sturen we die laatste datum? Sturen we de volledige string, met alle datums? of beide?
- Datum formaat: kwestie van geen gezever met php en mySQL, enkel formaat "YYYY-mm-dd" (in hun code YY). En niets anders.
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
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
<?php
$datums = '"2012-12-07","2012-12-16","2012-12-24","2012-12-28"';
?>
<!-- (ik laad alles vanaf multidatespickr.sourceforge.net; enkel in developper fase...) -->
<!-- loads some utilities (not needed for your developments) -->
<link rel="stylesheet" type="text/css" href="http://multidatespickr.sourceforge.net/css/mdp.css">
<link rel="stylesheet" type="text/css" href="http://multidatespickr.sourceforge.net/css/prettify.css">
<!-- loads jquery and jquery ui -->
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/js/jquery.ui.datepicker.js"></script>
<!-- loads mdp -->
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<script>
$(function() {
$('#pre-select-dates').multiDatesPicker({
addDates: [
<?php echo $datums; ?>
],
altField: '#altOutput',
dateFormat: 'yy-mm-dd', // het staat me niet aan als een datum passeert met ander formaat...
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: false,
multiSelect: 999,
multiSeparator: ',', // we laten die \n (= een nieuwe lijn) weg. Nergens goed voor, zo lijkt me. ',\n'
onSelect : function(dateText, inst) {
// ajax request starten.
// Bij elke datum die gekozen wordt, sturen we die waarde naar de server.
$.ajax({
url: 'ajax.php',
type: 'post',
data: {
'new_date': dateText
},
success: function(message) {
// we gaan een bericht (van de server) tonen aan de gebruiker
$('#message').html(message);
}
});
}
});
});
</script>
<div id="message"></div>
<input id="pre-select-dates">
$datums = '"2012-12-07","2012-12-16","2012-12-24","2012-12-28"';
?>
<!-- (ik laad alles vanaf multidatespickr.sourceforge.net; enkel in developper fase...) -->
<!-- loads some utilities (not needed for your developments) -->
<link rel="stylesheet" type="text/css" href="http://multidatespickr.sourceforge.net/css/mdp.css">
<link rel="stylesheet" type="text/css" href="http://multidatespickr.sourceforge.net/css/prettify.css">
<!-- loads jquery and jquery ui -->
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/js/jquery.ui.datepicker.js"></script>
<!-- loads mdp -->
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<script>
$(function() {
$('#pre-select-dates').multiDatesPicker({
addDates: [
<?php echo $datums; ?>
],
altField: '#altOutput',
dateFormat: 'yy-mm-dd', // het staat me niet aan als een datum passeert met ander formaat...
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: false,
multiSelect: 999,
multiSeparator: ',', // we laten die \n (= een nieuwe lijn) weg. Nergens goed voor, zo lijkt me. ',\n'
onSelect : function(dateText, inst) {
// ajax request starten.
// Bij elke datum die gekozen wordt, sturen we die waarde naar de server.
$.ajax({
url: 'ajax.php',
type: 'post',
data: {
'new_date': dateText
},
success: function(message) {
// we gaan een bericht (van de server) tonen aan de gebruiker
$('#message').html(message);
}
});
}
});
});
</script>
<div id="message"></div>
<input id="pre-select-dates">
Je kan dit copy/pasten in een leeg .php bestand en zo, zonder meer, testen.
Dan heb je nog een bestand nodig waar Ajax de request naar stuurt. In dit geval: sla dit op als "ajax.php"
Code (php)
1
2
3
4
5
2
3
4
5
<?php
// dit document verwacht een ajax request, alwaar $_POST['new_date'] ter beschikking is.
// als voorbeeld gaan we een simpel berichtje teruggeven aan javascript.
echo 'bericht van de server: "' . $_POST['new_date'] .'" ontvangen. dank je' ; // dit wordt als string terug gestuurd naar de
?>
// dit document verwacht een ajax request, alwaar $_POST['new_date'] ter beschikking is.
// als voorbeeld gaan we een simpel berichtje teruggeven aan javascript.
echo 'bericht van de server: "' . $_POST['new_date'] .'" ontvangen. dank je' ; // dit wordt als string terug gestuurd naar de
?>
Gewijzigd op 21/12/2012 16:36:47 door Kris Peeters
Bedankt voor de uiterst nuttige uitleg!
Op zich werkt het prima, zolang ik maar 1 extra dag kies. Als ik daarna weer een andere dag kies, kom dan weer die nieuwe dag te staan. Dat is logisch want na elke keuze van een dag wordt het ajax.php bestand aangeroepen waardoor elke keer de datum wijzigt die in de echo getoond wordt.
Dus uitdaging 1 (en realtime tonen van gekozen data op het scherm zonder refresh of submit) is gelukt ...... ;-)
Maar nu nog de grote vraag hoe ik elke keer deze variabele datum kan opvangen zodat ik dus tekstueel onder elkaar alle gekozen datums laat zien?
Het is dus voor dit voorbeeld eigenlijk niet van belang dat er al wat data getoond wordt ($datums), deze kan ook leeg zijn.
Het lukt mij niet om deze gekozen datums in ajax.php op te slaan als variabele omdat na elke keuze dit bestand opnieuw opgeroepen wordt.
Heb je nog een suggestie hoe ik dat het beste kan doen? Ben aan het rommelen geweest om de waarden in een SESSION te stoppen maar ook nog zonder succes (als dat al de juiste insteek was ....... ;-)
Met vriendelijke groeten en alvast fijne feestdagen,
Arie
Gewijzigd op 24/12/2012 14:36:08 door Arie Kant
Ik heb een testomgeving gemaakt op http://www.familiekant.nl/toernooimaker/club/test4.php
De code ziet er zo uit :
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
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
<link rel="stylesheet" type="text/css" href="http://multidatespickr.sourceforge.net/css/mdp.css">
<link rel="stylesheet" type="text/css" href="http://multidatespickr.sourceforge.net/css/prettify.css">
<!-- loads jquery and jquery ui -->
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/js/jquery.ui.datepicker.js"></script>
<!-- loads mdp -->
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<script>
$(function() {
$('#pre-select-dates').multiDatesPicker({
altField: '#altOutput',
dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: false,
multiSelect: 999,
multiSeparator: ',',
onSelect : function(dateText, inst) {
$.ajax({
url: 'toernooi-onderdelen-dagen.php',
type: 'post',
data: {
'new_date': dateText
},
success: function(message) {
$('#message').html(message);
}
});
}
});
});
</script>
<div id="message" style="color:#FFF; font-size: 14px;"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><input id="pre-select-dates">
<link rel="stylesheet" type="text/css" href="http://multidatespickr.sourceforge.net/css/prettify.css">
<!-- loads jquery and jquery ui -->
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/js/jquery.ui.datepicker.js"></script>
<!-- loads mdp -->
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<script>
$(function() {
$('#pre-select-dates').multiDatesPicker({
altField: '#altOutput',
dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: false,
multiSelect: 999,
multiSeparator: ',',
onSelect : function(dateText, inst) {
$.ajax({
url: 'toernooi-onderdelen-dagen.php',
type: 'post',
data: {
'new_date': dateText
},
success: function(message) {
$('#message').html(message);
}
});
}
});
});
</script>
<div id="message" style="color:#FFF; font-size: 14px;"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><input id="pre-select-dates">
En het bestand toernooi-onderdelen-dagen.php bestaat uit :
Ik krijg dus in test4.php nu wel te zien welke datum zojuist in de kalender geselecteerd is maar als ik een tweede of derde datum selecteert, zou ik deze data graag onder elkaar willen zien.
Iemand een idee of suggestie?
Met vriendelijke groeten,
Arie
Gewijzigd op 28/12/2012 13:14:30 door Arie Kant
[ c o d e ] en [ / c o d e ] maar dan zonder spaties
Gewijzigd op 28/12/2012 12:58:46 door Frank Nietbelangrijk
Kijk, ik geef je iets waarmee je zowel de laatst geklikte datum als de value van de input op de server krijgt. Dan kan je ermee doen wat je wil.
Ook een voorbeeldje van de request gemaakt. Met explode(',', ...) krijg je de waarden in een array
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
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
<script>
$(function() {
// cache objects
var pre_select_dates = $('#pre-select-dates');
// MD picker
pre_select_dates.multiDatesPicker({
altField: '#altOutput',
dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: false,
multiSelect: 999,
multiSeparator: ',',
onSelect : function(dateText, inst) {
$.ajax({
url: 'toernooi-onderdelen-dagen.php',
type: 'post',
data: {
'new_date': dateText,
'all_dates': pre_select_dates.val()
},
success: function(message) {
$('#message').html(message);
}
});
}
});
});
</script>
$(function() {
// cache objects
var pre_select_dates = $('#pre-select-dates');
// MD picker
pre_select_dates.multiDatesPicker({
altField: '#altOutput',
dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: false,
multiSelect: 999,
multiSeparator: ',',
onSelect : function(dateText, inst) {
$.ajax({
url: 'toernooi-onderdelen-dagen.php',
type: 'post',
data: {
'new_date': dateText,
'all_dates': pre_select_dates.val()
},
success: function(message) {
$('#message').html(message);
}
});
}
});
});
</script>
toernooi-onderdelen-dagen.php
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
// dit document verwacht een ajax request, alwaar $_POST['new_date'] en $_POST['all_dates'] ter beschikking staan.
$content = '';
$dates = explode(',', $_POST['all_dates']);
foreach ($dates as $date) {
$content .= $date . '<br>';
}
echo 'bericht van de server. alle ontvangen data: <br>' . $content ; // dit wordt als string terug gestuurd naar de
?>
// dit document verwacht een ajax request, alwaar $_POST['new_date'] en $_POST['all_dates'] ter beschikking staan.
$content = '';
$dates = explode(',', $_POST['all_dates']);
foreach ($dates as $date) {
$content .= $date . '<br>';
}
echo 'bericht van de server. alle ontvangen data: <br>' . $content ; // dit wordt als string terug gestuurd naar de
?>
Frank Nietbelangrijk op 28/12/2012 12:58:07:
Arie kun je even code tags gebruiken? dus
[ c o d e ] en [ / c o d e ] maar dan zonder spaties
[ c o d e ] en [ / c o d e ] maar dan zonder spaties
Jobs done .......... ;-)
Ik zocht deze al tijdens het typen maar kon ze niet vinden. Ik dacht toen dat het <code> was maar dat werkte ook niet maar het was dus
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
........... ;-)
[size=xsmall][i]Toevoeging op 28/12/2012 13:59:58:[/i][/size]
Hoi Kris,
Helemaal geweldig! Bedankt!
Ik ben helaas niet zo'n Jquery specialist dus kwam er niet achter hoe ik de vorige waarde kon opslaan in een variabele ( var pre_select_dates = $('#pre-select-dates'); ) maar dat gaat zo een stuk beter ;-)
Nogmaals bedankt voor het meedenken, ik kan weer verder gaan stoeien.
Groeten,
Arie
[size=xsmall][i]Toevoeging op 28/12/2012 13:59:58:[/i][/size]
Hoi Kris,
Helemaal geweldig! Bedankt!
Ik ben helaas niet zo'n Jquery specialist dus kwam er niet achter hoe ik de vorige waarde kon opslaan in een variabele ( var pre_select_dates = $('#pre-select-dates'); ) maar dat gaat zo een stuk beter ;-)
Nogmaals bedankt voor het meedenken, ik kan weer verder gaan stoeien.
Groeten,
Arie