PHP - display query search results in Bootstrap modal window
I have code below for a search bar that, upon clicking 'Search', loads a new page with the query results. How do I change it so instead of loading a new page, the query results open in a modal popup within the same page?
index.php
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="search.php">
<input type="text" name="q" placeholder="Enter query"/>
<input type="submit" name="search" value="Search" />
</form>
</body>
search.php
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
include_once('db.php'); //Connect to database
if(isset($_POST['q'])){
$q = $_POST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= "<a href='audio/$audio_name'>$audio_name</a> ";
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
php bootstrap-modal
edited Nov 21 at 0:26
Yash Karanke
15717
asked Nov 21 at 0:19
user10676901
44
add a comment |
I have code below for a search bar that, upon clicking 'Search', loads a new page with the query results. How do I change it so instead of loading a new page, the query results open in a modal popup within the same page?
index.php
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="search.php">
<input type="text" name="q" placeholder="Enter query"/>
<input type="submit" name="search" value="Search" />
</form>
</body>
search.php
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
include_once('db.php'); //Connect to database
if(isset($_POST['q'])){
$q = $_POST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= "<a href='audio/$audio_name'>$audio_name</a> ";
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
php bootstrap-modal
edited Nov 21 at 0:26
Yash Karanke
15717
asked Nov 21 at 0:19
user10676901
44
jQuery AJAX or XMLHTTPRequest should help you see this question
– Yash Karanke
Nov 21 at 0:26
add a comment |
I have code below for a search bar that, upon clicking 'Search', loads a new page with the query results. How do I change it so instead of loading a new page, the query results open in a modal popup within the same page?
index.php
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="search.php">
<input type="text" name="q" placeholder="Enter query"/>
<input type="submit" name="search" value="Search" />
</form>
</body>
search.php
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
include_once('db.php'); //Connect to database
if(isset($_POST['q'])){
$q = $_POST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= "<a href='audio/$audio_name'>$audio_name</a> ";
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
php bootstrap-modal
edited Nov 21 at 0:26
Yash Karanke
15717
asked Nov 21 at 0:19
user10676901
44
I have code below for a search bar that, upon clicking 'Search', loads a new page with the query results. How do I change it so instead of loading a new page, the query results open in a modal popup within the same page?
index.php
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="search.php">
<input type="text" name="q" placeholder="Enter query"/>
<input type="submit" name="search" value="Search" />
</form>
</body>
search.php
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
include_once('db.php'); //Connect to database
if(isset($_POST['q'])){
$q = $_POST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= "<a href='audio/$audio_name'>$audio_name</a> ";
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
php bootstrap-modal
php bootstrap-modal
edited Nov 21 at 0:26
Yash Karanke
15717
asked Nov 21 at 0:19
user10676901
44
edited Nov 21 at 0:26
Yash Karanke
15717
asked Nov 21 at 0:19
user10676901
44
edited Nov 21 at 0:26
Yash Karanke
15717
edited Nov 21 at 0:26
Yash Karanke
15717
edited Nov 21 at 0:26
Yash Karanke
15717
15717
asked Nov 21 at 0:19
user10676901
44
asked Nov 21 at 0:19
user10676901
44
asked Nov 21 at 0:19
user10676901
44
44
jQuery AJAX or XMLHTTPRequest should help you see this question
– Yash Karanke
Nov 21 at 0:26
add a comment |
jQuery AJAX or XMLHTTPRequest should help you see this question
– Yash Karanke
Nov 21 at 0:26
jQuery AJAX or XMLHTTPRequest should help you see this question
– Yash Karanke
Nov 21 at 0:26
jQuery AJAX or XMLHTTPRequest should help you see this question
– Yash Karanke
Nov 21 at 0:26
add a comment |
2 Answers
2
active
oldest
votes
You need to use JavaScript on your page to executed an AJAX call to search.php. That PHP file preferable returns JSON data, or complete HTML that can be added to the modal window.
Conceptually:
- Use JavaScript to executed AJAX POST to search.php
- Have search.php return the data in JSON format.
- Have JavaScript catch the returned data, iterate through it and create HTML elements.
- Use JavaScript to open a new modal window.
- Use JavaScript to add the HTML elements to the modal's body.
You don't necessarily need to use JavaScript to create the modal window. You can create it in plain HTML and fill it and open it using JavaScript.
answered Nov 21 at 0:35
bart
7,466175581
add a comment |
Welcome to stackoverflow. Here's my solution for that, so first, you have to capture the form submission, the technique is doing GET request using jQuery which I assume you already using jQuery since you are using bootstrap and bootstrap uses jQuery
$('form').submit(function(e){
e.preventDefault() // do not submit form
// do get request
$.get( 'search.php', { q : },function(e){
// then show the modal first
$('#mymodal').modal('show');
// then put the results there
$('#mymodal:visible .modal-container .modal-body').html(e);
});
});
answered Nov 21 at 0:44
Juliver Galleto
3,217144695
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403564%2fphp-display-query-search-results-in-bootstrap-modal-window%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to use JavaScript on your page to executed an AJAX call to search.php. That PHP file preferable returns JSON data, or complete HTML that can be added to the modal window.
Conceptually:
- Use JavaScript to executed AJAX POST to search.php
- Have search.php return the data in JSON format.
- Have JavaScript catch the returned data, iterate through it and create HTML elements.
- Use JavaScript to open a new modal window.
- Use JavaScript to add the HTML elements to the modal's body.
You don't necessarily need to use JavaScript to create the modal window. You can create it in plain HTML and fill it and open it using JavaScript.
answered Nov 21 at 0:35
bart
7,466175581
add a comment |
You need to use JavaScript on your page to executed an AJAX call to search.php. That PHP file preferable returns JSON data, or complete HTML that can be added to the modal window.
Conceptually:
- Use JavaScript to executed AJAX POST to search.php
- Have search.php return the data in JSON format.
- Have JavaScript catch the returned data, iterate through it and create HTML elements.
- Use JavaScript to open a new modal window.
- Use JavaScript to add the HTML elements to the modal's body.
You don't necessarily need to use JavaScript to create the modal window. You can create it in plain HTML and fill it and open it using JavaScript.
answered Nov 21 at 0:35
bart
7,466175581
add a comment |
You need to use JavaScript on your page to executed an AJAX call to search.php. That PHP file preferable returns JSON data, or complete HTML that can be added to the modal window.
Conceptually:
- Use JavaScript to executed AJAX POST to search.php
- Have search.php return the data in JSON format.
- Have JavaScript catch the returned data, iterate through it and create HTML elements.
- Use JavaScript to open a new modal window.
- Use JavaScript to add the HTML elements to the modal's body.
You don't necessarily need to use JavaScript to create the modal window. You can create it in plain HTML and fill it and open it using JavaScript.
answered Nov 21 at 0:35
bart
7,466175581
You need to use JavaScript on your page to executed an AJAX call to search.php. That PHP file preferable returns JSON data, or complete HTML that can be added to the modal window.
Conceptually:
- Use JavaScript to executed AJAX POST to search.php
- Have search.php return the data in JSON format.
- Have JavaScript catch the returned data, iterate through it and create HTML elements.
- Use JavaScript to open a new modal window.
- Use JavaScript to add the HTML elements to the modal's body.
You don't necessarily need to use JavaScript to create the modal window. You can create it in plain HTML and fill it and open it using JavaScript.
answered Nov 21 at 0:35
bart
7,466175581
answered Nov 21 at 0:35
bart
7,466175581
answered Nov 21 at 0:35
bart
7,466175581
answered Nov 21 at 0:35
bart
7,466175581
7,466175581
add a comment |
add a comment |
Welcome to stackoverflow. Here's my solution for that, so first, you have to capture the form submission, the technique is doing GET request using jQuery which I assume you already using jQuery since you are using bootstrap and bootstrap uses jQuery
$('form').submit(function(e){
e.preventDefault() // do not submit form
// do get request
$.get( 'search.php', { q : },function(e){
// then show the modal first
$('#mymodal').modal('show');
// then put the results there
$('#mymodal:visible .modal-container .modal-body').html(e);
});
});
answered Nov 21 at 0:44
Juliver Galleto
3,217144695
add a comment |
Welcome to stackoverflow. Here's my solution for that, so first, you have to capture the form submission, the technique is doing GET request using jQuery which I assume you already using jQuery since you are using bootstrap and bootstrap uses jQuery
$('form').submit(function(e){
e.preventDefault() // do not submit form
// do get request
$.get( 'search.php', { q : },function(e){
// then show the modal first
$('#mymodal').modal('show');
// then put the results there
$('#mymodal:visible .modal-container .modal-body').html(e);
});
});
answered Nov 21 at 0:44
Juliver Galleto
3,217144695
add a comment |
Welcome to stackoverflow. Here's my solution for that, so first, you have to capture the form submission, the technique is doing GET request using jQuery which I assume you already using jQuery since you are using bootstrap and bootstrap uses jQuery
$('form').submit(function(e){
e.preventDefault() // do not submit form
// do get request
$.get( 'search.php', { q : },function(e){
// then show the modal first
$('#mymodal').modal('show');
// then put the results there
$('#mymodal:visible .modal-container .modal-body').html(e);
});
});
answered Nov 21 at 0:44
Juliver Galleto
3,217144695
Welcome to stackoverflow. Here's my solution for that, so first, you have to capture the form submission, the technique is doing GET request using jQuery which I assume you already using jQuery since you are using bootstrap and bootstrap uses jQuery
$('form').submit(function(e){
e.preventDefault() // do not submit form
// do get request
$.get( 'search.php', { q : },function(e){
// then show the modal first
$('#mymodal').modal('show');
// then put the results there
$('#mymodal:visible .modal-container .modal-body').html(e);
});
});
answered Nov 21 at 0:44
Juliver Galleto
3,217144695
answered Nov 21 at 0:44
Juliver Galleto
3,217144695
answered Nov 21 at 0:44
Juliver Galleto
3,217144695
answered Nov 21 at 0:44
Juliver Galleto
3,217144695
3,217144695
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403564%2fphp-display-query-search-results-in-bootstrap-modal-window%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
jQuery AJAX or XMLHTTPRequest should help you see this question
– Yash Karanke
Nov 21 at 0:26