Popup script

jc79 · July 4, 2014, 12:17am

Hello,

I’m building a script to create a popup with javascript.
The popup should display the result from a query.

The script is almost ready. The popup is showing, but it is still empty. The query is ok and works without the javascript.

I hope you guys can help me.

producten.php


$main .="
<form action='' method='post' id='zoekproduct'>
		<span class='formInput'>zoek:</span>
		<input type='text' name='zoekproduct' />
		<input id='select-button' type='submit' name='searchBtn' value='zoek!' />
    </form>";
	
$qry ="
		SELECT
			bk_producten.product_id,
			bk_producten.aantal,
			producten.productlink
		FROM
			jcslnl_admin.bk_producten
		INNER JOIN
			jcslnl_webshop.producten
		ON
			bk_producten.product_id=producten.idproduct
		WHERE
			boeking_id		= ?
	";
	
	$statement = $connection->prepare($qry);
	$statement->error;
	$statement->bind_param('s', $kenmerk);
	$statement->execute();
	$result = $statement->get_result();

		if(($result->num_rows)>=1)
		{
			while ($row = $result->fetch_assoc())
			{
			$main .= $row['productlink'].'<br/>';
			}
		}
	$statement->close();
		

	$main .='
	<div id="dialog" title="Resultaten selecteren" style="display: none">
	<script type="text/javascript">
	$(document).ready(function() {
		$("#dialog").dialog({

			autoOpen: false,
			show: {
				effect: "scale",
				duration: 1000
			},
			hide: {
				effect: "scale",
				duration: 1000
			}
		});

		$("#select-button").click(function(e) {
			e.preventDefault();
			$.ajax({
				url: "includes/search.php",
				data: $("#form").serialize(),
				type: "POST",
				dataType: "html"
			})
			.done(function(html) {
					$("#dialog").html(html);
					$("#dialog").dialog("open");
			})
			.fail(function(){
            alert("failed");
			});
		});
	});
	</script>';
	
	$main .='</div>';

search.php

   if(isset($_POST['searchBtn']))
	{
	// Zoekfunctie:
	$statement = $connectionwebshop->prepare("
	SELECT
		producten.idproduct,
		producten.productlink,
		prod_omschrijving.producttitel
	FROM
		producten
	INNER JOIN
		prod_omschrijving
	ON
		producten.idproduct=prod_omschrijving.idproduct
	INNER JOIN
		prod_categorie
	ON
		producten.idproduct=prod_categorie.idproduct
	WHERE
		(producten.productlink LIKE ?
	OR
		prod_omschrijving.producttitel like ?
	OR
		producten.productcode like ?)
	AND
		prod_categorie.idcategorieen != 8001
	GROUP BY
		idproduct
	ORDER BY
		prod_omschrijving.producttitel
	");
	$statement->error;
	$zoekproductresult ='%'.$_POST['zoekproduct'].'%';
	
	$statement->bind_param('sss', $zoekproductresult, $zoekproductresult, $zoekproductresult);
	$statement->execute();
	$result = $statement->get_result();

		if(($result->num_rows)>=1)
		{
		$resultaten = 'Er zijn '.($result->num_rows).' producten gevonden.<br/>
		';
			while ($row = $result->fetch_assoc())
			{
			$resultaten.= '<a href="?pagina=bw-boeking&amp;do=producten&amp;kenmerk='.$kenmerk.'&amp;addproduct='.$row['idproduct'].'">'.$row['producttitel'].'</a>';
			$resultaten.='<br/>
			';
			}
		}
		else
		{
		$resultaten	='Er zijn geen resultaten gevonden';
		}
	$statement->close();
	}
	
	echo $resultaten;

James_Hibbard · July 4, 2014, 7:27am

Hi there,

Welcome to the forums

Maybe. Would it be possible to post a link to a page where we can see this not working?

jc79 · July 4, 2014, 6:39pm

Sorry it’s in en restricted part of the website, would it help to post this source?

 			<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
<base href="http://www.jcsl.nl/medewerkers/index.php"/><meta name="robots" content="index, follow" />
<meta name="lang" content="nl" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="google-site-verification" content="Hulfoz_qKKp_b0v4xpOGzzFkwyB_LjaVGzprtMEPhFo" />
<meta name="websitejudge-verify" content="fb1f951e0cddb8ebac5c34b2c4727678" />

<link rel="stylesheet" href="/medewerkers/css/containers.css" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


<link rel="stylesheet" href="/medewerkers/css/boekingen.css" type="text/css" />


<script type="text/javascript" src="/medewerkers/js/script.js"></script>

<link rel="stylesheet" href="/medewerkers/css/opmaak.css" type="text/css" />
<title>J.C. Sound &amp; Light - Producten Singravenstraat - 14070755</title>

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->

<!--[if IE8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css">
<![endif]-->
 
</head>
<body>

<!--start container-->
<div id="container">
	<!--start header-->
	<div id="header">
		<div id="headerpvh"></div>
		<div id="headerjcsl"></div>
		<div id="headeraccount">
		<!--Wie ben ik-->
		<center>
		JasperCoolen <br/> <a href="?logout" title="Log uit" class="menu">Uitloggen</a><br/><br/><a href="http://www.jcsl.nl/medewerkers/images/medewerkers/195.jpg"  rel="lightbox[Jasper]" title="Jasper">
		<img src="http://www.jcsl.nl/medewerkers/images/medewerkers/tmb/195.jpg" alt="195" height="100"/></a><br/>		</center>
		</div>
	</div>
	<!--navigatie-->
	<div id="nav">
		
<ul>
				<li><a href="?pagina=home">Home</a>
				</li>			
				<li><a href="#">Medewerkers</a><br/>
					<ul>
						<li><a href="?pagina=medewerker-overzicht">Alle Medewerkers</a></li>
						<li><a href="?pagina=profiel">Profielsite's</a></li>
						<li><a href="?pagina=mw-foto">Foto's</a></li>
						<li><a href="?pagina=rechten-overzicht">Rechten</a></li>
						<li><a href="?pagina=cursussen">Cursussen</a></li>
						<li><a href="?pagina=salaris-overzicht">Salaris</a></li>
						<li><a href="?pagina=uren-administratie">Uren administratie</a></li>
						<li><a href="?pagina=vakanties">Vakanties</a></li>
						<li><a href="?pagina=berichten">Alle berichten</a></li>
					</ul>
				</li>
				<li><a href="#">Boekingen</a><br/>
					<ul>
						<li><a href="?pagina=boekingen">Alle Boekingen</a></li>
						<li><a href="?pagina=nw-boeking">Nieuwe Boeking</a></li>
						<li><a href="?pagina=boekingen&amp;persnr=195">Mijn Boekingen</a></li>
						<li><a href="?pagina=boekingen&amp;invoerpersnr=195">Mijn Ingevoerde Boekingen</a></li>
						<li><a href="?pagina=boekingen&amp;do=geschiedenis">Geschiedenis</a></li>
						<li><a href="?pagina=podiumoverzicht">Podium</a></li>
					</ul>
				</li>
				<li><a href="#">Discussies</a><br/>
					<ul>
						<li><a href="?pagina=topic-overzicht">Discussies</a></li>
						<li><a href="?pagina=nieuw-topic&amp;topic">Nieuw Topic</a></li>
						<li><a href="?pagina=nieuw-topic&amp;evenement">Nieuw evenement</a></li>
						<li><a href="?pagina=topic-overzicht&amp;overzicht=gesloten">Gesloten topics</a></li>
					</ul>
				</li>
				<li><a href="#">Verhuur</a><br/>
					<ul>
						<li><a href="?pagina=verhuur">Verhuurlijst</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=geluid">Geluid</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=verlichting">Verlichting</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=rigging">Rigging</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=podiumdelen">Podiumdelen</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=bekabeling">Bekabeling</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=overige">Overige</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=personeel">Personeel</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=transport">transport</a></li>
						<li><a href="?pagina=nieuw-product">Nieuw Product</a></li>
						<li><a href="?pagina=nieuw-merk">Nieuw Merk</a></li>
					</ul>
				</li>
				<li><a href="#">Website</a><br/>
					<ul>
						<li><a href="?pagina=showcase-overzicht">Showcase overzicht</a></li>
						<li><a href="?pagina=nieuwe-showcase">Nieuwe showcase</a></li>
						<li><a href="?pagina=websitefotos">Foto's jcsl.nl</a></li>
						<li><a href="?pagina=websitefotos&amp;website=podium">Foto's podium website</a></li>
						<li><a href="?pagina=nieuwsoverzicht">Alle nieuwsberichten</a></li>
						<li><a href="?pagina=nw-nieuws">Nieuw nieuwsbericht</a></li>
					</ul>
				</li>
				<li><a href="#">Klanten</a><br/>
					<ul>
						<li><a href="?pagina=klanten-overzicht">Klanten overzicht</a></li>
						<li><a href="?pagina=klant-gegevens&amp;do=nieuw">Nieuwe klant/artiest</a></li>
						<li><a href="?pagina=locatie-overzicht">Locatie Overzicht</a></li>
					</ul>
				</li>
			</ul>	</div>
	<!--einde header-->
	<!--start algemene content-->
	<div id="main">
		<h1>
		Producten Singravenstraat - 14070755		</h1>
		 <script type="text/javascript" language="javascript">
  function switchMenu(obj,show) {
    var el = document.getElementById(obj);
    if ( show != "#" ) {
      el.style.display = "none";
    }
    else {
      el.style.display = "";
    }
  }
</script> 
    Hier kun je de producten toevoegen.<br/> 

<form action='' method='post' id='zoekproduct'>
		<span class='formInput'>zoek:</span>
		<input type='text' name='zoekproduct' />
		<input id='select-button' type='submit' name='searchBtn' value='zoek!' />
    </form>   
	<div id="dialog" title="Resultaten selecteren" style="display: none">
	<script type="text/javascript">
	$(document).ready(function() {
		$("#dialog").dialog({

			autoOpen: false,
			show: {
				effect: "scale",
				duration: 1000
			},
			hide: {
				effect: "scale",
				duration: 1000
			}
		});

		$("#select-button").click(function(e) {
			e.preventDefault();
			$.ajax({
				url: "includes/search.php",
				data: $("#form").serialize(),
				type: "POST",
				dataType: "html"
			})
			.done(function(html) {
					$("#dialog").html(html);
					$("#dialog").dialog("open");
			})
			.fail(function(){
            alert("failed");
			});
		});
	});
	</script></div>
	<a href="?pagina=bw-boeking&do=personeel&kenmerk=14070755"> <button>Personeel indelen</button>	</div>	
	<!--einde content-->
	<div class="clear"></div>
	<div id="footernav">&nbsp;</div>
<!--einde container-->
</div>
</body>
</html>

jc79 · July 5, 2014, 2:17pm

Is there someone who can help me?
Should I maybe post more of the script?

Mittineague · July 5, 2014, 10:26pm

No, that’s enough for now. Just need a little more patience. It’s a weekend, and a long holiday weekend in the US at that so I imagine most are out and about enjoying Real Life

The part of the code that needs attention is

	<div id="dialog" title="Resultaten selecteren" style="display: none">
	<script type="text/javascript">
	$(document).ready(function() {
		$("#dialog").dialog({

			autoOpen: false,
			show: {
				effect: "scale",
				duration: 1000
			},
			hide: {
				effect: "scale",
				duration: 1000
			}
		});

		$("#select-button").click(function(e) {
			e.preventDefault();
			$.ajax({
				url: "includes/search.php",
				data: $("#form").serialize(),
				type: "POST",
				dataType: "html"
			})
			.done(function(html) {
/* for testing only */
alert(html); // testing only
					$("#dialog").html(html);
					$("#dialog").dialog("open");
			})
			.fail(function(){
            alert("failed");
			});
		});
	});
	</script></div>

Does the alert show what you expect?

jc79 · July 5, 2014, 11:06pm

Sorry did not know about the holiday.
Have fun.

I added the script

and get another popup with an ok button.
I added a screen shot.

Mittineague · July 6, 2014, 12:11am

Well, that doesn’t look like I hoped it would

Try adding this to the search.php file and try again

$resultaten    = 'POST searchBtn not set?'; // for testing only
   if(isset($_POST['searchBtn']))
    {
    // Zoekfunctie:

jc79 · July 6, 2014, 9:14am

I added the script in search.php

The text appears in the popup (see screenshot)

So somehow the searchbutton is not recieved.

Someone told me that I had to use an ID in the form, but he wouldn’t help me how to do that.

jc79 · July 6, 2014, 11:34am

Maybe I should just remove this part of the script:


if(isset($_POST['searchBtn']))
    {}

I think the search.php is only included when the javascript is running.

jc79 · July 6, 2014, 11:41am

I changed search.php

into this, so the error message can stay:


<?php

	// Als een zoekwoord wordt ingegeven:
    if(isset($_POST['searchBtn']))
	{
	// Zoekfunctie:
	$statement = $connectionwebshop->prepare("
	SELECT
		producten.idproduct,
		producten.productlink,
		prod_omschrijving.producttitel
	FROM
		producten
	INNER JOIN
		prod_omschrijving
	ON
		producten.idproduct=prod_omschrijving.idproduct
	INNER JOIN
		prod_categorie
	ON
		producten.idproduct=prod_categorie.idproduct
	WHERE
		(producten.productlink LIKE ?
	OR
		prod_omschrijving.producttitel like ?
	OR
		producten.productcode like ?)
	AND
		prod_categorie.idcategorieen != 8001
	GROUP BY
		idproduct
	ORDER BY
		prod_omschrijving.producttitel
	");
	$statement->error;
	$zoekproductresult ='%'.$_POST['zoekproduct'].'%';
	
	$statement->bind_param('sss', $zoekproductresult, $zoekproductresult, $zoekproductresult);
	$statement->execute();
	$result = $statement->get_result();

		if(($result->num_rows)>=1)
		{
		$resultaten = 'Er zijn '.($result->num_rows).' producten gevonden.<br/>
		';
			while ($row = $result->fetch_assoc())
			{
			$resultaten.= '<a href="?pagina=bw-boeking&amp;do=producten&amp;kenmerk='.$kenmerk.'&amp;addproduct='.$row['idproduct'].'">'.$row['producttitel'].'</a>';
			$resultaten.='<br/>
			';
			}
		}
		else
		{
		$resultaten	='Er zijn geen resultaten gevonden';
		}
	$statement->close();
	}
	else
	{
	$resultaten    = 'POST searchBtn not set, or the form is not submitted?';
	}
	
	echo $resultaten;
	?>

Mittineague · July 6, 2014, 6:09pm

Seeing “POST searchBtn not set?” in the alert indicates that the AJAX isn’t sending the $_POST variable so the if loop is not getting entered into and the $resultaten variable isn’t being changed. Why the alert didn’t show “undefined” I don’t know, but I’m guessing you set it to an empty string earlier in the code somewhere.

If it works without the “if isset” test I guess you could take the if test out.

Though you could try adding a $_GET variable to the URL and test for that. eg.

url: "includes/search.php?somename=somevalue",

rpkamp · July 6, 2014, 6:09pm

It’s not a good idea to look for the name of the submit button. It’s known to be an unreliable technique (i.e., doesn’t work in IE6)
Besides, it won’t work here anyway, because you’re doing an AJAX call, and the value of the button isn’t sent to the server anyway as jQuery doesn’t add buttons to the result of $(someForm).serialize().

From the jQuery manual (http://api.jquery.com/serialize/):

Instead, check that the HTTP request method is POST

So, instead of


if(isset($_POST['searchBtn']))
{
    // code here
}

use


if ($_SERVER['REQUEST_METHOD'] === 'POST')
{
    // code here
}

Or you could check that $_POST[zoekproduct'] is set and not empty.

jc79 · July 6, 2014, 6:26pm

Thank you for helping.

In both cases I get the error message:

POST searchBtn not set, or the form is not submitted?

It doesn’t work if I remove the if/else function, the button doesn’t do anything.

If I add this to the script:

 if(isset($_GET['zoekproduct']) && !empty($_GET['zoekproduct']))
	{

I also get

POST searchBtn not set, or the form is not submitted?

Scipts rightnow:

producten



$main .="
<form action='' method='post' id='searchform'>
		<span class='formInput'>zoek:</span>
		<input type='text' name='zoekproduct' />
		<input  id='select-button' type='submit' name='searchBtn' value='zoek!' />
    </form>";
	
$qry ="
		SELECT
			bk_producten.product_id,
			bk_producten.aantal,
			producten.productlink
		FROM
			jcslnl_admin.bk_producten
		INNER JOIN
			jcslnl_webshop.producten 
		ON
			bk_producten.product_id=producten.idproduct
		WHERE
			boeking_id		= ?
	";
	
	$statement = $connection->prepare($qry);
	$statement->error;
	$statement->bind_param('s', $kenmerk);
	$statement->execute();
	$result = $statement->get_result();

		if(($result->num_rows)>=1)
		{
			while ($row = $result->fetch_assoc())
			{
			$main .= $row['productlink'].'<br/>';
			}
		}
	$statement->close();
		

	$main .='   
	<div id="dialog" title="Resultaten selecteren" style="display: none">
	<script type="text/javascript">
	$(document).ready(function() {
		$("#dialog").dialog({

			autoOpen: false,
			show: {
				effect: "scale",
				duration: 1000
			},
			hide: {
				effect: "scale",
				duration: 1000
			}
		});

		$("#select-button").click(function(e) {
			e.preventDefault();
			$.ajax({
				url: "includes/search.php",
				data: $("#form").serialize(),
				type: "POST",
				dataType: "html"
			}).done(function(html) {

					$("#dialog").html(html);
					$("#dialog").dialog("open");
			})
			.fail(function(){
            alert("failed");
			});
		});
	});
		</script>';

search.php


<?php
	// Als een zoekwoord wordt ingegeven:
    if(isset($_GET['zoekproduct']) && !empty($_GET['zoekproduct']))
	{
	// Zoekfunctie:
	$statement = $connectionwebshop->prepare("
	SELECT 
		producten.idproduct,
		producten.productlink,
		prod_omschrijving.producttitel
	FROM
		producten
	INNER JOIN
		prod_omschrijving 
	ON
		producten.idproduct=prod_omschrijving.idproduct
	INNER JOIN
		prod_categorie
	ON
		producten.idproduct=prod_categorie.idproduct
	WHERE
		(producten.productlink LIKE ?
	OR
		prod_omschrijving.producttitel like ?
	OR
		producten.productcode like ?)
	AND
		prod_categorie.idcategorieen != 8001
	GROUP BY
		idproduct
	ORDER BY
		prod_omschrijving.producttitel
	");
	$statement->error;
	$zoekproductresult ='%'.$_POST['zoekproduct'].'%';
	
	$statement->bind_param('sss', $zoekproductresult, $zoekproductresult, $zoekproductresult);
	$statement->execute();
	$result = $statement->get_result();

		if(($result->num_rows)>=1)
		{
		$resultaten = 'Er zijn '.($result->num_rows).' producten gevonden.<br/>
		';
			while ($row = $result->fetch_assoc())
			{
			$resultaten.= '<a href="?pagina=bw-boeking&amp;do=producten&amp;kenmerk='.$kenmerk.'&amp;addproduct='.$row['idproduct'].'">'.$row['producttitel'].'</a>';
			$resultaten.='<br/>
			';
			}
		}
		else
		{
		$resultaten	='Er zijn geen resultaten gevonden';
		}
	$statement->close();
	} 
    else 
    { 
    $resultaten    = 'POST searchBtn not set, or the form is not submitted?'; 
    }
	
	echo $resultaten;
	?>

jc79 · July 6, 2014, 6:56pm

may I should rebuild the whole thing, no one seems to find my mistake in the script.

I think the error should be somewhere in the form:


$main .="
<form action='' method='post' id='searchform'>
        <span class='formInput'>zoek:</span>
        <input type='text' name='zoekproduct' />
        <input  id='select-button' type='submit' name='searchBtn' value='zoek!' />
    </form>";

With all the ‘name=’ and ‘id=’, I think is goes wrong there.

rpkamp · July 6, 2014, 9:38pm

Um. Have you read my previous post? The answer is right there.

jc79 · July 6, 2014, 9:56pm

Sorry didn’t understand the first part, but the other things i tried but didn’t work.

The link you posted, doesn’t work.

Mittineague · July 6, 2014, 10:02pm

[ot]It needed to have the closing paren and semi-colon removed.
Link fixed[/ot]

jc79 · July 9, 2014, 12:25am

Ok I manage to get a little bit further with this. I used


if ($_SERVER['REQUEST_METHOD'] === 'POST')
	{}

The script runs the search.php, but the java script gives back “failed”;
If I remove the query from search.php and just put in some text, the text is shown in a popup.

I checked the query in another page and it works fine, with no errors.

What else could be wrong on the script? And is the error in the javascript or in the fact that de query is not allowed to run in the javascript?



$main .="
<form action='' method='post' id='searchform'>
		<span class='formInput'>zoek:</span>
		<input type='text' name='zoekproduct' />
		<input  id='select-button' type='submit' name='searchBtn' value='zoek!' />
    </form>";

	$main .='   
	<div id="dialog" title="Resultaten selecteren" style="display: none">
	<script type="text/javascript">
	$(document).ready(function() {
		$("#dialog").dialog({

			autoOpen: false,
			show: {
				effect: "scale",
				duration: 1000
			},
			hide: {
				effect: "scale",
				duration: 1000
			}
		});

		$("#select-button").click(function(e) {
			e.preventDefault();
			$.ajax({
				url: "includes/search.php",
				data: $("#searchform").serialize(),
				type: "POST",
				dataType: "html"
			}).done(function(html) {

					$("#dialog").html(html);
					$("#dialog").dialog("open");
			})
			.fail(function(){
            alert("failed");
			});
		});
	});
		</script>';
	
	$main .='</div>

rpkamp · July 9, 2014, 5:59am

Can you use Chrome developer tools (chrome) or firebug (firefox) to inspect the data the AJAX call returns?

jc79 · July 9, 2014, 10:04am

IS dit what you are looking for?

POST http://www.jcsl.nl/medewerkers/includes/search.php

500 Internal Server Error 106ms

Connection close
Content-Length 0
Content-Type text/html
Date Wed, 09 Jul 2014 10:01:37 GMT
Server Apache/2
Vary User-Agent
X-Powered-By PHP/5.4.29
view source
Accept text/html, /; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-gb,en;q=0.5
Cookie __utma=234184705.1971140548.1397501366.1404589037.1404603262.23; __utmz=234184705.1401668891.11.2.utmcsr=194.145.200.113|utmccn=(referral)|utmcmd=referral|utmcct=/~jcslnl/index.php; SMW_id=2; SMW_persnr=195; SMW_key=e2xDdQ0Ke8gPj6w; SMW_time=1404899979
DNT 1
Host www.jcsl.nl
Referer http://www.jcsl.nl/medewerkers/index.php?pagina=bw-boeking&do=producten&kenmerk=14060752
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0
X-Requested-With XMLHttpRequest