Coolen Coolen - 6 months ago 23
jQuery Question

Popup doesnt show when using mysqli

I'm creating a form, where the results should be showed in a popup.

The query works, but when I combine it with the popup it doesn't.
When I use the popup script alone it doesn't show the popup.

So I quess the problem is with the popup.

//javascript
$main .=
'<head>
<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>
</head>';
//end javascript


-

//script
<script>
$(document).ready(function() {

$("#dialog").dialog({

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

$("#select-button").click(function() {
$( "#dialog" ).dialog( "open" );
});
});

</script>


-

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


-

// when used the button
if(isset($_POST['searchBtn']))
{
// query
$statement = $connectionwebshop->prepare("
SELECT
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
ORDER BY
prod_omschrijving.producttitel
");
$statement->error;
$zoekproductresult ='%'.$_POST['zoekproduct'].'%';
$statement->bind_param('sss', $zoekproductresult, $zoekproductresult, $zoekproductresult);
$statement->execute();
$result = $statement->get_result();
//end query


-

//create popup
$main .='
<div id="dialog" title="Resultaten selecteren" style="display: none">';
if(($result->num_rows)>=1)
{
$resultaten = 'Found '.($result->num_rows).' products.<br/>';

while ($row = $result->fetch_assoc())
{
$resultaten.= $row['producttitel'];
$resultaten.='<br/>';
}
}
else
{
$resultaten ='nothing found';
}
$main .= $resultaten;
$statement->close();
$main .='</div>';
}

Answer

You need to prevent the default action of the form if you want your popup to show (otherwise your page will reload).

Try this:

$("#select-button").click(function(e) {
  e.preventDefault();
  $("#dialog").dialog( "open" );

  // Post your stuff
  $.ajax({
      url: 'form url here',
      type: 'post',
      data: 'zoekproduct=' + $('#zoekproduct').val(), // Give your zoekproduct input an id
      success: function (result) {
          // Do success stuff here
      }
  });
});

Example

Comments