Jquery dynamisch/statische div, navigatie van statisch naar dynamisch werkt niet?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Yoop Overmaat

Yoop Overmaat

07/02/2015 12:58:58
Quote Anchor link
Ik ben hier al een paar dagen mee aan het klieren, heb van alles geprobeerd om dit geheel aan het slieren te krijgen. Dit ging van php div - nagatie tot sjax navigatie die tot mijn grote verbazing niet meer ondersteund wordt vanwege de4 gebruikers ervaring Het kan zijn dat ik vanuit een compleet verkeerde insteek hieraan begonnen ben?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!doctype html>

<html>

<head>

<meta charset="utf-8">


<style>

h1,h2,h3,p {
color: white;
text-align: center;
font-family: "Comic Sans MS", cursive, sans-serif;
}

#geenid {
position: absolute;
top: 60px;
left: 5px;
width: 555px;
height: 530px;
border: 1px solid #008800;
}

.spellen {
position: absolute;
top: 2px;
left: 2px;
width: 549px;
height: 524px;
overflow-y: auto;
border: 1px solid red;
}

/* class foei = een hidden shown div bij jquery dynamisch/statisch */

.foei {
position: relative;
top: 2px;
left: 2px;
width: 549px;
height: 524px;
overflow-y: auto;
border:1px solid yellow;
}

/* div aansturing jquery */

#spelknopjes {
position: absolute;
top: 600px;
left: 5px;
width: 555px;
height: 50px;
border: 1px solid #008800;
}

/* knopjes erbij  */
 
.optie1 {
position: absolute;
top: 10px;
left: 55px;
font-size: 18px;
}
.optie2 {
position: absolute;
top: 10px;
left: 225px;
font-size: 18px;
}
.optie3 {
position: absolute;
top: 10px;
left: 410px;
font-size: 18px;
}
.optie1,.optie2,.optie3 {
font-family: "Comic Sans MS", cursive, sans-serif;
color: #006400;
background-color: #008800;
}


</style>



<title>Free 2 501</title>

<script src="/js/jquery-1.11.2.js"></script>

<script>

$(document).ready(function(){
//alert("Jquery Domain Object Model geladen");

function reload($elem, url, interval) {
    (function doReload() {
        $elem.load(url, function() {
            setTimeout(doReload, interval);
      });
  })();
}

reload ($('.foei'), 'gamelist.phtml', 8000);
reload ($('#spelers'), 'playlist.phtml', 6000);
reload ($('#roomchat'),'/php/output501.php', 3000);

$('#mainform').submit(function(event) {
event.preventDefault();
$.ajax({
       type: "POST",
       url: "/php/input.php",
       data: $('#mainform').serialize(),
       success: function(data){
       $('.msge').val('');
       $('.msge').focus();
       }
     });
   });      

$('.optie1').click(function() {
$('.foei').hide();
$('.spellen').load('page1.phtml');
   });

$('.optie2').click(function() {
$('.foei').hide();
$('.spellen').load('page2.phtml');
   });

$('.optie3').click(function() {
$('.foei').hide();
$('.spellen').load('page3.phtml');
   });

/* rest van de functies op page html */

});
</script>

</head>
<body>

<div id="geenid">
<div class="spellen"></div>
<div class="foei"></div>
</div>

<div id="spelknopjes">
<input type="button" class="optie1" value="Oefenen">
<input type="button" class="optie2" value="Overzicht">
<input type="button" class="optie3" value="Spelen">
</div>

<div id="spelers"></div>

<div id="roomchat"></div>

<form id="mainform" method="post" action="">
<input type="text" class="msge" name="message" maxlenght="100" size="34" autofocus autocomplete="off">
<input type="submit" class="onzin" name="submit" value="Beeldbuisvervuiling">
</form>

</body>
</html>

Tot zover werkt het verhaal. Maar in het onderstaande verhaal gaat het gruwelijk mis, de opgevraagde pagina verschijnt niet & het geheel loopt vast,,,,


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
<!--
$('.vaag5').click(function() {
//alert("functie vaag5 doet het");
$('.spellen').hide();
$('.foei').load('gamelist.phtml');
});

//-->
</script>
</head>
<body>
<div id="huh"><h3>Open spellen</h3></div>

<input type="button" class="vaag5" value="Stop">

</body>
</html>


Ik heb zo het idee dat ik hier ergens zwaar een flater bega, maar waar? Ik zie het even niet meer....
Gewijzigd op 09/02/2015 23:46:32 door - Ariën -
 
PHP hulp

PHP hulp

12/08/2020 06:22:05
 
Yoop Overmaat

Yoop Overmaat

09/02/2015 23:33:42
Quote Anchor link
Na een hoop geprobeerd te hebben is het eindelijk voor elkaar, 3 divs met een auto refresh jquery waarbij een der divs ook nog eens een paar statische pagina's weer kan geven indien nodig.

Het probleem is het load verhaal jquery, dit kan slechts eenmaal op een div daarna gaat het mis. Na wat tests bleek dat een div-navigatie op een php basis niet werkte, deze springt na een refresh weer terug naar de begin pagina uit een array.

Het probleem is dat bij een jquery show wel de border van de div verscheen maar niet de inhoud van deze pagina, deze kun je ankeren met een include via php. Er zat alleen een probleem in het click & submit jquery verhaal. De functies zullen allen een click functie moeten hebben. Zo niet krijg je rare neveneffecten(bug?) zoals een chat die 3x de tekst verzendt & alerts die 3x weggeklikt moeten worden. event.prefendDefault doet, in dit geval, wonderen.

Het is een beetje een 1/2 om 1/2 jquery - php verhaal geworden maar het werkt zonder problemen, dus voor degenen die dit verhaal in de toekomst nog tegen gaan komen zet ik oplossing hier neer. Het scheelt een hoop geklooi, frustraties & tijd.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/css/site.css">

<title>Free 2 501</title>
<script src="/js/jquery-1.11.2.js"></script>

<script>

$(document).ready(function(){

$('.spel1, .spel2, .spel3, .spel4').hide();

function reload($elem, url, interval) {
    (function doReload() {
        $elem.load(url, function() {
            setTimeout(doReload, interval);
      });
  })();
}
                      
reload ($('.spel'), 'gamelist.phtml', 8000);
reload ($('#spelers'), 'playlist.phtml', 6000);
reload ($('#roomchat'),'/php/output501.php', 3000);

/* $('#mainform').submit(function(event){ // Formulier verzendt 4 keer, waarom 4 keer? */

$('.onzin').click(function(event){ // formulier verzendt normaal
event.preventDefault();
$.ajax({
       type: "POST",
       url: "/php/input.php",
       data: $('#mainform').serialize(),
       success: function(data){
       $('#mainform')[0].reset();
       $('.msge').focus();
       }
     });
   });

/* Dit kan misschien sneller, maar de
hoveelheid css die ervoor nodig qua
positioneren maakt het geheel trager */

$('.optie1').click(function(){
$('.spel, .spel3, .spel4').hide();
$('.spel2').show();
   });

$('.optie2').click(function(){
$('.spel, .spel2, .spel4').hide();
$('.spel3').show();
   });

$('.optie3').click(function(){
$('.spel, .spel2, .spel3').hide();
$('.spel4').show();
   });

/*  page1.phtml */

$('.vaag1').click(function(){
$('.spel2, .spel3, .spel4').hide();
$('.spel').show();
   });

/*  page2.phtml */

$('.vaag5').click(function(){
$('.spel2, .spel3, .spel4').hide();
$('.spel').show();
    });

/* page  3.phtml  */

$('.vaag3').click(function(){
alert("hoi hoi hoi");

    });

$('.vaag4').click(function(){
$('.spel2, .spel3, .spel4').hide();
$('.spel').show();  
    });

});


</script>

</head>
<body>

<div id="geenid">
<div class="spel"></div>
<div class="spel2"><?php include("page1.phtml"):?></div>
<div class="spel3"><?php include("page2.phtml");?></div>
<div class="spel4"><?php include("page3.phtml");?></div>

</div>

<div id="spelknopjes">
<input type="button" class="optie1" value="Oefenen">
<input type="button" class="optie2" value="Overzicht">
<input type="button" class="optie3" value="Spelen">
</div>

<div id="spelers"></div>

<div id="roomchat"></div>

<form id="mainform" method="post"> <!-- action="" verwijderd //-->
<input type="text" class="msge" name="message" maxlenght="100" size="34" autofocus autocomplete="off">
<input type="submit" class="onzin" value="Beeldbuisvervuiling"> <!--  name=submit" verwijderd //-->
</form>

</body>
</html>

Dat was dus het hele verhaal.



[size=xsmall][i]Toevoeging op 09/02/2015 23:42:50:[/i][/size]

En page2.phtml binnen de div, is uitbreidbaar maar meer om het idee achter het geheel te laten zien. Het geheel is gewoon uitbreidbaar indien nodig.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="/js/room501.js"></script>

</head>
<body>
<div id="huh"><h3>Open spellen</h3></div>

<input type="button" class="vaag5" value="Stop">

</body>
</html>

- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken. Graag ook relevante code gebruiken tot +/- 20 regels.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!


Toevoeging op 10/02/2015 00:53:45:

Sorry, -Aar-. Zal er in het vervolg op letten.
Gewijzigd op 09/02/2015 23:47:18 door - Ariën -
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.