Kom er niet uit (Engels is o.a. het probleem)
Ik wil op mijn site een jQuery gebruiken en wel de Confirm.
Nu heb ik op http://jqueryui.com/dialog/#modal-confirmation de benodigde code gevonden. Maar mijn Engels is duidelijk onvoldoende om deze routine aan te passen naar mijn situatie.
Mijn code is inmiddels:
In de <head>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Verder winkelen": function() {
$( this ).dialog( "close" );
},
"Afrekenen": function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Verder winkelen": function() {
$( this ).dialog( "close" );
},
"Afrekenen": function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
In mijn <body>
Code (php)
1
2
3
2
3
<div id="dialog-confirm" title="Wat wilt u nu doen?">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>U kunt kiezen tussen verder winkelen en afrekenen.</p>
</div>
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>U kunt kiezen tussen verder winkelen en afrekenen.</p>
</div>
en bij de knop
Code (php)
Op zich lijkt dit allemaal wel goed te gaan,maar:
1. Bij het openen van de pagina komt gelijk al de Confirmbox in beeld. Dat wil ik niet, die moet pas komen als er op de knop wordt gedrukt
2. Bij de actie "Afrekenen" wil ik dat shop_winkelwagen.php wordt aangeroepen.
Omdat dus mijn Engels onvoldoende is vraag ik jullie hulp in deze.
George
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('#winkelwagen').on('click',function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Verder winkelen": function() {
$( this ).dialog( "close" );
},
"Afrekenen": function() {
var url = "http://google.com";
$(location).attr('href',url);
}
}
});
});
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Verder winkelen": function() {
$( this ).dialog( "close" );
},
"Afrekenen": function() {
var url = "http://google.com";
$(location).attr('href',url);
}
}
});
});
Het lijkt er op dat er in jouw code nog een foutje zit. Het werkt niet naar behoren.
Als ik regel 1 en regel 16 weghaal, werkt de jQuery wel maar zonder dee regelskomt de confirmbox direct na het aanroepen van de pagina.
Het doorlinken naar een volgende pagina werkt nu goed.
Wil je nog eens kijken voor mij?
P.S.: Waarom heb je het id #winkelwagen daar gebruikt op regel 1??
George
Gewijzigd op 19/06/2013 19:06:46 door George van Baasbank
Ik denk dat het voorkomen kan worden door er een preventDefault in te zetten..
probeer dit is
http://jsfiddle.net/88mvP/
Reshad F op 19/06/2013 20:49:30:
...Ik denk dat het voorkomen kan worden door er een preventDefault in te zetten..
Ja, klopt.
Trouwens, je kan ook van die knop een <input id="winkelwagen" type="button"> maken; dan zal het sowieso niet submitten.
Even op de jsfiddle-pagina gekeken. Zie ook hier dat bij de eerste keer aanroepen van de pagina de tekst "U kunt kiezen tussen verder winkelen en afrekenen." al op het scherm staat. Dat is op mijn site ook.
De Confirm-box wordt op mijn site niet getoond etrwijl dit wel het geval is bij jouw voorbeeld.
Voor een indruk: ga naar: http://jqz.vanbaasbank.nl/shop_index.php en klik op een knop "In winkelwagen"
Gewijzigd op 20/06/2013 10:52:03 door George van Baasbank
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$('#winkelwagen').on('click',function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Verder winkelen": function() {
$( this ).dialog( "close" );
},
"Afronden": function() {
var url = "shop_winkelwagen.php";
$(location).attr('href',url);
}
}
});
});
</script>
$('#winkelwagen').on('click',function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Verder winkelen": function() {
$( this ).dialog( "close" );
},
"Afronden": function() {
var url = "shop_winkelwagen.php";
$(location).attr('href',url);
}
}
});
});
</script>
Ik krijg het gevoel dat de oorzaak ergens anders aan moet liggen want bovenstaande code werkt op de site van Reshad wel
