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

Door Yoop Overmaat op 07-02-2015 12:58 gewijzigd op 09-02-2015 23:46

2.300 views

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?


<!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....

Yoop Overmaat

09-02-2015 23:33 gewijzigd op 09-02-2015 23:47

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.


<!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>

[size=xsmall]Toevoeging op 10/02/2015 00:53:45:[/size]

Sorry, -Aar-. Zal er in het vervolg op letten.

Reageren

Inloggen om te reageren