Met 1 option value meerdere php`s uitvoeren
UIT
schakelen.php?kanaal=a9&actie=uit&optie=0
schakelen.php?kanaal=a10&actie=uit&optie=0
schakelen.php?kanaal=a11&actie=uit&optie=0
AAN
schakelen.php?kanaal=a9&actie=aan&optie=0
schakelen.php?kanaal=a9&actie=aan&optie=0
schakelen.php?kanaal=a9&actie=aan&optie=0
<li>
<label for="slider"><font size="4px">Spot houtkast</font></label><br>
<select name="slider" id="houtkast" data-role="slider">
<option value="schakelen.php?kanaal=a9&actie=uit&optie=0">OFF</option>
<option value="schakelen.php?kanaal=a9&actie=aan&optie=0">ON</option>
</select>
</li>
Javascript
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
$('#spot, #led, #bank, #living, #boom, #houtkast, #stopcontact, #potten, #plafondspot, #haard').change(function(e) { // wanneer de gebruiker de select verandert, doen we dit:
// Ajax aanroepen
var url = $(this).val(); // this is de <select>. .val() haalt de value op
$.ajax({
url: url,
success: function(message) {
}
});
});
})
</script>
PHP
if (isset($_GET['actie']) && $_GET['actie'] === 'aan') {
echo 'lamp is aan!';
}
else {
echo 'lamp is uit!';
}
Je kan ook drie ajax requests doen ipv. 1.
Dat moet dan zoiets worden:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
// Ajax aanroepen
var aan_uit = $(this).val(); // this is de <select>. .val() haalt de value op
$.ajax({
url: 'schakelen.php?kanaal=a9&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a10&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a11&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
...
// Ajax aanroepen
var aan_uit = $(this).val(); // this is de <select>. .val() haalt de value op
$.ajax({
url: 'schakelen.php?kanaal=a9&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a10&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a11&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
...
Gewijzigd op 24/09/2012 11:30:40 door Kris Peeters
Anyway, wat werkt er niet aan? Je hebt jQuery wel geladen neem ik aan?
Gewijzigd op 24/09/2012 23:12:48 door - Ariën -
HTML
<label for="slider"><font size="4px">Spot houtkast</font></label><br>
<select name="slider" id="houtkast" data-role="slider">
<option value="schakelen.php?kanaal=a9&actie=uit&optie=0¦">OFF</option>
<option value="schakelen.php?kanaal=a9&actie=aan&optie=0¦">ON</option>
</select>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
$('#spot, #led, #bank, #living, #boom, #stopcontact, #potten, #plafondspot, #haard').change(function(e) { // wanneer de gebruiker de select verandert, doen we dit:
// Ajax aanroepen
var url = $(this).val(); // this is de <select>. .val() haalt de value op
$.ajax({
url: url,
success: function(message) {
}
});
});
})
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
<script>
$(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
$('#houtkast').change(function(e) { // wanneer de gebruiker de select verandert, doen we dit:
// Ajax aanroepen
var aan_uit = $(this).val(); // this is de <select>. .val() haalt de value op
$.ajax({
url: 'schakelen.php?kanaal=a9&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a10&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a11&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
</script>
<ul data-role="listview" data-inset="true">
<li style='background: -webkit-linear-gradient(top, #7e5098 0%,#72448b 50%,#6c3b87 50%,#683385 100%);'>
<h1><font color="white">Keuken</font></h1>
</li>
<li>
<label for="slider"><font size="4px">Plafondspot</font></label><br>
<select name="slider" id="spot" data-role="slider">
<option value="schakelen.php?kanaal=a4&actie=uit&optie=0">OFF</option>
<option value="schakelen.php?kanaal=a4&actie=aan&optie=0">ON</option>
</select>
</li>
<li>
<label for="slider"><font size="4px">Led koffiehoek</font></label><br>
<select name="slider" id="led" data-role="slider">
<option value="schakelen.php?kanaal=b1&actie=uit&optie=0">OFF</option>
<option value="schakelen.php?kanaal=b1&actie=aan&optie=0">ON</option>
</select>
</li>
</ul>
etc, etc....
Elke id roept een php link aan via ajax welke weer kastje aan mijn server aanstuurt.
Hoe kan ik overigens mijn scripts netjes in een venster zetten op het forum?
Tel ze eens bij jou ...
----
Een kleine aanpassing: ik haal de url uit de <option>. Juist value="aan" (ofwel uit).
Op die manier werkt dit: var aan_uit = $(this).val();
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
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
<body>
<label for="slider"><font size="4px">Spot houtkast</font></label><br>
<select name="slider" id="houtkast" data-role="slider">
<option value="uit">OFF</option>
<option value="aan">ON</option>
</select>
<div id="message"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
$('#houtkast').change(function(e) { // wanneer de gebruiker de select verandert, doen we dit:
// Ajax aanroepen
var aan_uit = $(this).val(); // this is de <select>. .val() haalt de value op
$.ajax({
url: 'schakelen.php?kanaal=a9&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a10&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a11&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
});
});
</script>
</body>
<label for="slider"><font size="4px">Spot houtkast</font></label><br>
<select name="slider" id="houtkast" data-role="slider">
<option value="uit">OFF</option>
<option value="aan">ON</option>
</select>
<div id="message"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
$('#houtkast').change(function(e) { // wanneer de gebruiker de select verandert, doen we dit:
// Ajax aanroepen
var aan_uit = $(this).val(); // this is de <select>. .val() haalt de value op
$.ajax({
url: 'schakelen.php?kanaal=a9&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a10&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a11&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
});
});
</script>
</body>
Als je extra gegevens in een html element wil steken, kan je trouwens werken met data-...
bv. <div id="mijn_div" data-url="http://phphulp.nl">
=>
var url = $("#mijn_div").data('url');
Gewijzigd op 25/09/2012 10:52:54 door Kris Peeters
Code (php)
1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
eruit heb gehaald werkt het super. Bedankt voor de tip ik zal de code nog nalopen en netter opmaken.
Toevoeging op 25/09/2012 22:47:25:
Kan ik die code intergreren in mijn huidige script?
Dus
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
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
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
$('#houtkast').change(function(e) { // wanneer de gebruiker de select verandert, doen we dit:
// Ajax aanroepen
var aan_uit = $(this).val(); // this is de <select>. .val() haalt de value op
$.ajax({
url: 'schakelen.php?kanaal=b1&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a4&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a2&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
});
});
</script>
<script>
$(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
$('#houtkast').change(function(e) { // wanneer de gebruiker de select verandert, doen we dit:
// Ajax aanroepen
var aan_uit = $(this).val(); // this is de <select>. .val() haalt de value op
$.ajax({
url: 'schakelen.php?kanaal=b1&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a4&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
$.ajax({
url: 'schakelen.php?kanaal=a2&actie=' + aan_uit + '&optie=0',
success: function(message) {
// boodschap tonen in de div
$('#message').html(message);
}
});
});
});
</script>
met
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
$('#spot, #led, #bank, #living, #boom, #stopcontact, #potten, #plafondspot, #haard').change(function(e) { // wanneer de gebruiker de select verandert, doen we dit:
// Ajax aanroepen
var url = $(this).val(); // this is de <select>. .val() haalt de value op
$.ajax({
url: url,
success: function(message) {
}
});
});
})
</script>
<script>
$(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
$('#spot, #led, #bank, #living, #boom, #stopcontact, #potten, #plafondspot, #haard').change(function(e) { // wanneer de gebruiker de select verandert, doen we dit:
// Ajax aanroepen
var url = $(this).val(); // this is de <select>. .val() haalt de value op
$.ajax({
url: url,
success: function(message) {
}
});
});
})
</script>