PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
M

tutorial popup pagina tonen

Door Michael Visser op 29-09-2017 17:58 gewijzigd op 30-09-2017 11:33
6.578 views
Hallo allemaal,

ik ben bezig met een tutorial popup systeempje alleen vroeg ik me af hoe ik nu precies een extern scriptje kan inladen

<?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>";
		}
?>

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
- SanThe -
01-10-2017 16:11
Die query's zijn precies hetzelfde dus hoeven ze niet in een if() else te staan.

Bouw nette foutafhandeling in i.p.v. die(...).
De mysql_ functions zijn zeer antiek. Gebruik mysqli_ of PDO.
M
Michael Visser
01-10-2017 16:35
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 :)

maar include 'popup.php'; werkt niet heb jij toevallig een idee ??
Ariën
01-10-2017 17:21
Ik raad aan om mysql_error() gebruiken. Die vertelt prima wat er fout is. Uiteraard raad ik aan om deze meldingen niet zomaar voor het publiek te tonen, dus een mooie functie zou wel handig zijn waarmee je met een configuratie-setting een debug-modus aanzet.

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.
M
Michael Visser
01-10-2017 18:06
ik ben blij dat er iemand reageerd zoals jullie maar dit is niet het andwoord wat ik verwacht had , overschakelen naar php7 zal niet kunnen het is mijn eigen server , dus scripts blijven werken , dan maar geen popup krijg het niet werken en aangezien er geen correct antwoord gegeven kan worden kan ik niet verder helaas...
Frank Nietbelangrijk
01-10-2017 18:21
Voeg dit toe onder je andere css
<?php
if ($showmodal == true)
echo "<style>.modal {display:block;}</style>"
M
Michael Visser
01-10-2017 21:38 

<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">&times;</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

[size=xsmall]Toevoeging op 01/10/2017 21:47:01:[/size]

ik zie zeg maar een witte achtergrond met het script wat normaal inlaad na het inloggen
Frank Nietbelangrijk
01-10-2017 22:34
In je jquery.ready() functie deze php regel invoegen. afhankelijk van $showmodal true/false wordt de modal wel of niet getoond. Ik heb het getest met de html die je hierboven gaf.


$(document).ready(function(){
<?php if($showmodal == true) echo "$('#modalForm').modal('show');"; ?>
M
Michael Visser
02-10-2017 14:00
normaal heb ik een image als background op de website en als ik dan in wil loggen voor de eerste keer zie ik dat er iets is verandert maar de popup komt niet te voorschijn ook met

$(document).ready(function(){
<?php if($showmodal == true) echo "$('#modalForm').modal('show');"; ?>


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.
Frank Nietbelangrijk
02-10-2017 15:13 gewijzigd op 02-10-2017 15:14 

<?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">&times;</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>
Thomas van den Heuvel
02-10-2017 17:05
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...

Reageren

Inloggen om te reageren