tutorial popup pagina tonen
ik ben bezig met een tutorial popup systeempje alleen vroeg ik me af hoe ik nu precies een extern scriptje kan inladen
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
<?php
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql="select Value from tabletest where uid='" . $uid. "' ";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$result=$result->fetch_assoc()["Value"];
}
print($result);
if($result==1)
{
echo "<script> loadModal()</script>";
}
?>
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql="select Value from tabletest where uid='" . $uid. "' ";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$result=$result->fetch_assoc()["Value"];
}
print($result);
if($result==1)
{
echo "<script> loadModal()</script>";
}
?>
Het gaat om het gedeelte echo "<script> loadModal()</script>"; , dit komt in mijn index als iemand inlogt komt er een popup maar het externe scriptje heet popup.php hoe krijg ik die in de echo hierboven ? alvast bedankt
- Ariën -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 30/09/2017 11:33:56 door - Ariën -
Als je wilt dat de popup $uid kent zul je deze op een of andere manier moeten doorgeven, bijvoorbeeld via de querystring ($_GET). Het is mij uit het bovenstaande voorbeeld ook niet duidelijk waar $uid in eerste instantie vandaan zou moeten komen.
Als je wilt dat de popup loadModal() kent zul je in deze popup (het HTML-document) JavaScript-code moeten includen (via script-tags of in uitgeschreven vorm) waar deze functie in aanwezig is.
Het feit dat je niet het gewenste resultaat krijgt ($result verschilt blijkbaar van "1"?) zou je al terug kunnen redeneren. Mogelijk ging je query fout (heb je foutafhandeling?) of deze had geen resultaten. Ook is het niet erg handig dat je $result gebruikt voor zowel een resultaat-resource of -object alsook de waarde van een specifieke kolom hiervan. Of de oorsprong lag dus inderdaad bij de ongedefinieerde variabele $uid.
Zorg dat je in ieder geval bij ontwikkeling van code deze mondig is in het melden+weergeven van fouten.
Dit doe je bijvoorbeeld door aan het begin van de code deze magische incantatie te zetten:
Code (php)
1
2
3
4
2
3
4
<?php
error_reporting(E_ALL); // welke fouten gemeld moeten worden
ini_set('display_errors', 'stdout'); // waar deze fouten gemeld moeten worden
?>
error_reporting(E_ALL); // welke fouten gemeld moeten worden
ini_set('display_errors', 'stdout'); // waar deze fouten gemeld moeten worden
?>
Mijn geld zet ik voorlopig op een undefined variable $uid, tenzij deze al ergens eerder gedeclareerd was, in welk geval je codefragment onvolledig was, in welk geval het verdomd lastig wordt om af te leiden wat er precies fout gaat.
echo "<script> loadModal(popup.php)</script>"; zal niet werken lijkt me
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<script type="text/javascript">
function loadModal(){
$('#modalForm').modal({backdrop: 'static', keyboard: false})
$('#modalForm').modal('show');
}
$(document).ready(function(){
$("#2").css("display","none");
$("#3").css("display","none");
$("#4").css("display","none");
$("#5").css("display","none");
$(".close").css("display","none");
$("#btn1").on("click",function(){
$(".hideclass").css("display","none");
$("#1").css("display","block");
});
$("#btn2").on("click",function(){
$(".hideclass").css("display","none");
$("#2").css("display","block");
});
$("#btn3").on("click",function(){
$(".hideclass").css("display","none");
$("#3").css("display","block");
});
$("#btn4").on("click",function(){
$(".hideclass").css("display","none");
$("#4").css("display","block");
});
$("#btn5").on("click",function(){
$(".hideclass").css("display","none");
$("#5").css("display","block");
$(".close").css("display","block");
});
$("#btnPrevious").on("click", function(){
var btn="";
if($("#1").is(':visible'))
{
$(this).addClass('ui-state-focus');
btn="#1";
}
else if($("#2").is(':visible'))
{
$(this).addClass('ui-state-focus');
btn="#1";
}
else if($("#3").is(':visible'))
{
btn="#2";
}
else if($("#4").is(':visible'))
{
btn="#3";
}
else if($("#5").is(':visible'))
{
btn="#4";
}
$(".hideclass").css("display","none");
$(btn).css("display","block");
});
$("#btnNext").on("click", function(){
var btn="";
if($("#1").is(':visible'))
{
btn="#2";
}
else if($("#2").is(':visible'))
{
btn="#3";
}
else if($("#3").is(':visible'))
{
btn="#4";
}
else if($("#4").is(':visible'))
{
btn="#5";
$(".close").css("display","block");
}
else if($("#5").is(':visible'))
{
btn="#5";
}
$(".hideclass").css("display","none");
$(btn).css("display","block");
});
})
</script>
function loadModal(){
$('#modalForm').modal({backdrop: 'static', keyboard: false})
$('#modalForm').modal('show');
}
$(document).ready(function(){
$("#2").css("display","none");
$("#3").css("display","none");
$("#4").css("display","none");
$("#5").css("display","none");
$(".close").css("display","none");
$("#btn1").on("click",function(){
$(".hideclass").css("display","none");
$("#1").css("display","block");
});
$("#btn2").on("click",function(){
$(".hideclass").css("display","none");
$("#2").css("display","block");
});
$("#btn3").on("click",function(){
$(".hideclass").css("display","none");
$("#3").css("display","block");
});
$("#btn4").on("click",function(){
$(".hideclass").css("display","none");
$("#4").css("display","block");
});
$("#btn5").on("click",function(){
$(".hideclass").css("display","none");
$("#5").css("display","block");
$(".close").css("display","block");
});
$("#btnPrevious").on("click", function(){
var btn="";
if($("#1").is(':visible'))
{
$(this).addClass('ui-state-focus');
btn="#1";
}
else if($("#2").is(':visible'))
{
$(this).addClass('ui-state-focus');
btn="#1";
}
else if($("#3").is(':visible'))
{
btn="#2";
}
else if($("#4").is(':visible'))
{
btn="#3";
}
else if($("#5").is(':visible'))
{
btn="#4";
}
$(".hideclass").css("display","none");
$(btn).css("display","block");
});
$("#btnNext").on("click", function(){
var btn="";
if($("#1").is(':visible'))
{
btn="#2";
}
else if($("#2").is(':visible'))
{
btn="#3";
}
else if($("#3").is(':visible'))
{
btn="#4";
}
else if($("#4").is(':visible'))
{
btn="#5";
$(".close").css("display","block");
}
else if($("#5").is(':visible'))
{
btn="#5";
}
$(".hideclass").css("display","none");
$(btn).css("display","block");
});
})
</script>
hoe moet hij aangeroepen worden dan vanaf mijn index weer iemand dit toevallig ? echo "<script> loadModal()</script>";
- Ariën -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 30/09/2017 11:34:14 door - Ariën -
De trucs die toegepast worden zijn de volgende
- er wordt een extra div opgenomen die de popup vormt. Deze div krijgt de css regel position:fixed; (of position:relative; tov een ander element)
- vervolgens wordt de div verborgen met display:none;
- Met javascript zorgen we er voor dat als er op bijv een knop geduwd wordt de css regel display:none wordt veranderd in display:block etc
Gewijzigd op 30/09/2017 11:28:25 door Frank Nietbelangrijk
Code (php)
1
echo "<script> loadModal()</script>";
jQeury word ook gebruikt alleen weet ik niet hoe je dan een extern script aanroept er moet op geen enkele button worden geklikt hij moet gewoon op poppen
Gewijzigd op 30/09/2017 17:27:44 door Michael Visser
Wie kan mij vertellen hoe een popup automatisch zichbaar kan worden als een gebruiker zich inlogt ?
if ($data['value'] < 1)
{
include 'popup.php';
mysql_query('UPDATE users SET value=value+1 WHERE id=' . $data['id'])or die('Error, update query 1 failed');
}
else
{
mysql_query('UPDATE users SET value=value+1 WHERE id=' . $data['id'])or die('Error, update query 2 failed');
}
ik krijg als output Error, update query 1 failed
Bouw nette foutafhandeling in i.p.v. die(...).
De mysql_ functions zijn zeer antiek. Gebruik mysqli_ of PDO.
maar include 'popup.php'; werkt niet heb jij toevallig een idee ??
Eigenlijk raad ik zelfs aan om direct maar te beginnen naar de ombouw naar mysqli, want als je hosting overschakelt op PHP7, dan zal je script direct niet meer werken.
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<html>
<head>
<!-- Latest minified bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest minified bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="modal fade" id="modalForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Tutorials</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div id="1" class="hideclass">Page1</div>
<div id="2" class="hideclass">Page2</div>
<div id="3" class="hideclass">Page3</div>
<div id="4" class="hideclass">Page4</div>
<div id="5" class="hideclass">Page5</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button class="btn btn-default" id="btnPrevious"> << </button>
<button class="btn btn-default" id="btn1">1</button>
<button class="btn btn-default" id="btn2">2</button>
<button class="btn btn-default" id="btn3">3</button>
<button class="btn btn-default" id="btn4">4</button>
<button class="btn btn-default" id="btn5">5</button>
<button class="btn btn-default" id="btnNext"> >> </button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function loadModal(){
$('#modalForm').modal({backdrop: 'static', keyboard: false})
$('#modalForm').modal('show');
}
$(document).ready(function(){
$("#2").css("display","none");
$("#3").css("display","none");
$("#4").css("display","none");
$("#5").css("display","none");
$(".close").css("display","none");
$("#btn1").on("click",function(){
$(".hideclass").css("display","none");
$("#1").css("display","block");
});
$("#btn2").on("click",function(){
$(".hideclass").css("display","none");
$("#2").css("display","block");
});
$("#btn3").on("click",function(){
$(".hideclass").css("display","none");
$("#3").css("display","block");
});
$("#btn4").on("click",function(){
$(".hideclass").css("display","none");
$("#4").css("display","block");
});
$("#btn5").on("click",function(){
$(".hideclass").css("display","none");
$("#5").css("display","block");
$(".close").css("display","block");
});
$("#btnPrevious").on("click", function(){
var btn="";
if($("#1").is(':visible'))
{
$(this).addClass('ui-state-focus');
btn="#1";
}
else if($("#2").is(':visible'))
{
$(this).addClass('ui-state-focus');
btn="#1";
}
else if($("#3").is(':visible'))
{
btn="#2";
}
else if($("#4").is(':visible'))
{
btn="#3";
}
else if($("#5").is(':visible'))
{
btn="#4";
}
$(".hideclass").css("display","none");
$(btn).css("display","block");
});
$("#btnNext").on("click", function(){
var btn="";
if($("#1").is(':visible'))
{
btn="#2";
}
else if($("#2").is(':visible'))
{
btn="#3";
}
else if($("#3").is(':visible'))
{
btn="#4";
}
else if($("#4").is(':visible'))
{
btn="#5";
$(".close").css("display","block");
}
else if($("#5").is(':visible'))
{
btn="#5";
}
$(".hideclass").css("display","none");
$(btn).css("display","block");
});
})
</script>
</body>
</html>
<head>
<!-- Latest minified bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest minified bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="modal fade" id="modalForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Tutorials</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div id="1" class="hideclass">Page1</div>
<div id="2" class="hideclass">Page2</div>
<div id="3" class="hideclass">Page3</div>
<div id="4" class="hideclass">Page4</div>
<div id="5" class="hideclass">Page5</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button class="btn btn-default" id="btnPrevious"> << </button>
<button class="btn btn-default" id="btn1">1</button>
<button class="btn btn-default" id="btn2">2</button>
<button class="btn btn-default" id="btn3">3</button>
<button class="btn btn-default" id="btn4">4</button>
<button class="btn btn-default" id="btn5">5</button>
<button class="btn btn-default" id="btnNext"> >> </button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function loadModal(){
$('#modalForm').modal({backdrop: 'static', keyboard: false})
$('#modalForm').modal('show');
}
$(document).ready(function(){
$("#2").css("display","none");
$("#3").css("display","none");
$("#4").css("display","none");
$("#5").css("display","none");
$(".close").css("display","none");
$("#btn1").on("click",function(){
$(".hideclass").css("display","none");
$("#1").css("display","block");
});
$("#btn2").on("click",function(){
$(".hideclass").css("display","none");
$("#2").css("display","block");
});
$("#btn3").on("click",function(){
$(".hideclass").css("display","none");
$("#3").css("display","block");
});
$("#btn4").on("click",function(){
$(".hideclass").css("display","none");
$("#4").css("display","block");
});
$("#btn5").on("click",function(){
$(".hideclass").css("display","none");
$("#5").css("display","block");
$(".close").css("display","block");
});
$("#btnPrevious").on("click", function(){
var btn="";
if($("#1").is(':visible'))
{
$(this).addClass('ui-state-focus');
btn="#1";
}
else if($("#2").is(':visible'))
{
$(this).addClass('ui-state-focus');
btn="#1";
}
else if($("#3").is(':visible'))
{
btn="#2";
}
else if($("#4").is(':visible'))
{
btn="#3";
}
else if($("#5").is(':visible'))
{
btn="#4";
}
$(".hideclass").css("display","none");
$(btn).css("display","block");
});
$("#btnNext").on("click", function(){
var btn="";
if($("#1").is(':visible'))
{
btn="#2";
}
else if($("#2").is(':visible'))
{
btn="#3";
}
else if($("#3").is(':visible'))
{
btn="#4";
}
else if($("#4").is(':visible'))
{
btn="#5";
$(".close").css("display","block");
}
else if($("#5").is(':visible'))
{
btn="#5";
}
$(".hideclass").css("display","none");
$(btn).css("display","block");
});
})
</script>
</body>
</html>
ik heb de code toegevoegd maar nog steeds zie ik niets net zoals net , in de bron zie ik wel dat hij popup.php inlaad maar er is niets zichtbaar code hierboven zie ik in de broncode
Toevoeging op 01/10/2017 21:47:01:
ik zie zeg maar een witte achtergrond met het script wat normaal inlaad na het inloggen
Code (php)
Zie ik het niet , zou je mij anders jou code willen geven aangezien je het getest heb misschien houd nog iets anders het tegen maar dan weet ik wel 100% zeker dat die van jou werkt.
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<?php $showmodal = true; ?>
<html>
<head>
<!-- Latest minified bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest minified bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="modal fade" id="modalForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Tutorials</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div id="1" class="hideclass">Page1</div>
<div id="2" class="hideclass">Page2</div>
<div id="3" class="hideclass">Page3</div>
<div id="4" class="hideclass">Page4</div>
<div id="5" class="hideclass">Page5</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button class="btn btn-default" id="btnPrevious"> << </button>
<button class="btn btn-default" id="btn1">1</button>
<button class="btn btn-default" id="btn2">2</button>
<button class="btn btn-default" id="btn3">3</button>
<button class="btn btn-default" id="btn4">4</button>
<button class="btn btn-default" id="btn5">5</button>
<button class="btn btn-default" id="btnNext"> >> </button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function loadModal(){
$('#modalForm').modal({backdrop: 'static', keyboard: false})
$('#modalForm').modal('show');
}
$(document).ready(function(){
<?php if($showmodal == true) echo "$('#modalForm').modal('show');"; ?>
$("#2").css("display","none");
$("#3").css("display","none");
$("#4").css("display","none");
$("#5").css("display","none");
$(".close").css("display","none");
$("#btn1").on("click",function(){
$(".hideclass").css("display","none");
$("#1").css("display","block");
});
$("#btn2").on("click",function(){
$(".hideclass").css("display","none");
$("#2").css("display","block");
});
$("#btn3").on("click",function(){
$(".hideclass").css("display","none");
$("#3").css("display","block");
});
$("#btn4").on("click",function(){
$(".hideclass").css("display","none");
$("#4").css("display","block");
});
$("#btn5").on("click",function(){
$(".hideclass").css("display","none");
$("#5").css("display","block");
$(".close").css("display","block");
});
$("#btnPrevious").on("click", function(){
var btn="";
if($("#1").is(':visible'))
{
$(this).addClass('ui-state-focus');
btn="#1";
}
else if($("#2").is(':visible'))
{
$(this).addClass('ui-state-focus');
btn="#1";
}
else if($("#3").is(':visible'))
{
btn="#2";
}
else if($("#4").is(':visible'))
{
btn="#3";
}
else if($("#5").is(':visible'))
{
btn="#4";
}
$(".hideclass").css("display","none");
$(btn).css("display","block");
});
$("#btnNext").on("click", function(){
var btn="";
if($("#1").is(':visible'))
{
btn="#2";
}
else if($("#2").is(':visible'))
{
btn="#3";
}
else if($("#3").is(':visible'))
{
btn="#4";
}
else if($("#4").is(':visible'))
{
btn="#5";
$(".close").css("display","block");
}
else if($("#5").is(':visible'))
{
btn="#5";
}
$(".hideclass").css("display","none");
$(btn).css("display","block");
});
})
</script>
</body>
</html>
<html>
<head>
<!-- Latest minified bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest minified bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="modal fade" id="modalForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Tutorials</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div id="1" class="hideclass">Page1</div>
<div id="2" class="hideclass">Page2</div>
<div id="3" class="hideclass">Page3</div>
<div id="4" class="hideclass">Page4</div>
<div id="5" class="hideclass">Page5</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button class="btn btn-default" id="btnPrevious"> << </button>
<button class="btn btn-default" id="btn1">1</button>
<button class="btn btn-default" id="btn2">2</button>
<button class="btn btn-default" id="btn3">3</button>
<button class="btn btn-default" id="btn4">4</button>
<button class="btn btn-default" id="btn5">5</button>
<button class="btn btn-default" id="btnNext"> >> </button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function loadModal(){
$('#modalForm').modal({backdrop: 'static', keyboard: false})
$('#modalForm').modal('show');
}
$(document).ready(function(){
<?php if($showmodal == true) echo "$('#modalForm').modal('show');"; ?>
$("#2").css("display","none");
$("#3").css("display","none");
$("#4").css("display","none");
$("#5").css("display","none");
$(".close").css("display","none");
$("#btn1").on("click",function(){
$(".hideclass").css("display","none");
$("#1").css("display","block");
});
$("#btn2").on("click",function(){
$(".hideclass").css("display","none");
$("#2").css("display","block");
});
$("#btn3").on("click",function(){
$(".hideclass").css("display","none");
$("#3").css("display","block");
});
$("#btn4").on("click",function(){
$(".hideclass").css("display","none");
$("#4").css("display","block");
});
$("#btn5").on("click",function(){
$(".hideclass").css("display","none");
$("#5").css("display","block");
$(".close").css("display","block");
});
$("#btnPrevious").on("click", function(){
var btn="";
if($("#1").is(':visible'))
{
$(this).addClass('ui-state-focus');
btn="#1";
}
else if($("#2").is(':visible'))
{
$(this).addClass('ui-state-focus');
btn="#1";
}
else if($("#3").is(':visible'))
{
btn="#2";
}
else if($("#4").is(':visible'))
{
btn="#3";
}
else if($("#5").is(':visible'))
{
btn="#4";
}
$(".hideclass").css("display","none");
$(btn).css("display","block");
});
$("#btnNext").on("click", function(){
var btn="";
if($("#1").is(':visible'))
{
btn="#2";
}
else if($("#2").is(':visible'))
{
btn="#3";
}
else if($("#3").is(':visible'))
{
btn="#4";
}
else if($("#4").is(':visible'))
{
btn="#5";
$(".close").css("display","block");
}
else if($("#5").is(':visible'))
{
btn="#5";
}
$(".hideclass").css("display","none");
$(btn).css("display","block");
});
})
</script>
</body>
</html>
Gewijzigd op 02/10/2017 15:14:06 door Frank Nietbelangrijk
Michael Visser op 01/10/2017 16:35:07:
als ik mysqli wil gebruiken moet ik alles gaan ombouwen wat ik zeer zeker wil gaan doen maar heb nu niet de tijd om 400 scriptjes om te bouwen :)
Reden te meer om functies/methoden die met een database communiceren niet te hardcoden in code. Je doet er verstandig aan om op zijn minst een soort van wrapper(-class) te gebruiken om zo indirect met een databasetype te communiceren zodat als de functies/methoden die je gebruikt ooit veranderen (mysql --> mysqli) dat je dan enkel de implementatie van de wrapper(-class) hoeft te wijzigen, en niet 400 scripts door hoef te ploegen.
Ik zou hier eigenlijk vandaag nog mee beginnen, en ja, dat zul je dan dus wel eenmalig moeten doen. En tegelijkertijd zou je het ontwerp van je website/applicatie wellicht nog eens onder de loep kunnen nemen.
BTW als je een modal (een inline popup) gebruikt voor het geven van een boodschap over het ingelogd zijn van iemand zou je misschien het hele loginproces via AJAX-calls kunnen laten verlopen zodat de pagina nooit ververst hoeft te worden.
Of eens gaan nadenken over een andere oplossing. Op het moment dat je inlogt vindt er immers een toestandsovergang plaats (niet ingelogd --> wel ingelogd). Vaak verdient het dan de voorkeur om op een of andere manier een pagina-refresh uit te voeren. In welk geval je niet echt een (inline) popup nodig hebt. Ook zou je eigenlijk gebruik moeten maken van het POST/redirect/GET principe zodat alle stappen netjes gescheiden worden:
---GET (de loginpagina wordt opgevraagd)---
1. het formulier wordt verzonden naar een verwerkstap
---POST---
2. hier vindt de verwerking van het formulier plaats
is de login correct: log iemand in + extra acties (zoals ophogen teller), REDIRECT na afloop naar stap 3
is de login incorrect: REDIRECT naar stap 1 met foutboodschap
---GET---
ingeval stap 2 succesvol was, toon landingspagina voor ingelogd persoon
Zo zijn alle acties netjes apart gecompartimenteerd en voorkom je dus situaties waarin dubbelposts mogelijk zijn, wat mogelijk ongewenste gevolgen heeft voor het ophogen van een teller...
Dit topic is gesloten.