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);
?>
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.
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);
});
});
Related
I am trying to write an interactive web page and learn newer (10 years or less) web technologies along the way. So PhP, jquery and AJAX all fall into that category. I've pared down the code to just the essentials to ask this question.
I want my jquery to call a PhP program that will load two separate DIVs. One is a data display area and the other is used to display the next form in the process chain. The trouble I'm having is that the form I'm returning isn't functional, even though it displays properly.
This is the main page (demo.php):
<?php
echo <<<_END
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
//
$(document).ready(function(){
$("#btnDemo").click(function() {
$("#PageForm").load("thetest.php", { paramYN: $("#paramYN").val() })
$("#PageContent").load("nextpage.php");
});
});
</script>
</head>
<title>The Title</title>
</head>
<body>
<div id="PageHdr">
<H4>Heading</h4>
</div>
<div id="PageForm">
<form action="" id="Login">
<br/>
To show this form again enter Y otherwise enter N : <input type="text" name="paramYN" id="paramYN" size=1>
<input type="button" name="btnDemo" id="btnDemo" value="test it" /></form>
</div>
<div id="PageContent">
<P>Put response here</p>
</div>
</body>
</html>
_END;
?>
Here's the PhP program "thetest.php" which decides what to return into the PageForm DIV:
<?php //thetest.php
paramYN = $_POST["paramYN"];
if ($paramYN == "Y")
{
echo <<<_EOF
<form action="" id="Login">
<br/>This is the redisplay. Look for the date to change if it works after you click the test it button
<br/>To show this form again enter Y otherwise enter N : <input type="text" name="ParamYN" id="paramYN" size=1>
<input type="button" name="btnDemo" id="btnDemo" value="test it" /></form>
_EOF;
$thetime = time();
echo $thetime;
exit();
}
else
{
echo "<html><head><title>PDO login</title></head><body>";
echo "<h1>Congrats!</h1>";
echo "</body></html>";
exit();
}
?>
I only included the nextpage.php program because the full version of my program needs to update both DIV's. For the purpose of this demo it's as simple as this:
<?php //.php
echo "<h1>This is the new text for this place</h1>";
?>
So what is my problem here? Is it something in the way that I'm loading the DIV? Or is this something that is not doable?
When your page first loads you use jQuery and "bind" a click event to your button "btnDemo".
The user then clicks the button "btnDemo" and triggers the load events. However, by doing this you are overriding your previously loaded button with the established jQuery events with a NEW button "btnDemo". This NEW button does NOT have the same bound click events.
You will need to re-apply the click events to the newly loaded button after it loads by adding the jQuery to the loading page "thetest.php".
echo <<<_EOF
<script>
$(document).ready(function(){
//this will bind the click event to the newly loaded button
$("#btnDemo").click(function() {
$("#PageForm").load("thetest.php", { paramYN: $("#paramYN").val() })
$("#PageContent").load("nextpage.php");
});
});
</script>
<form> (the rest of your form here...)
_EOF;
You have:
<?php //thetest.php
paramYN = $_POST["paramYN"];
if ($paramYN == "Y")
{
Try:
<?php //thetest.php
$paramYN = $_POST["paramYN"];
if ($paramYN == "Y")
{
I want to store the text value submitted by clicking the submit button of a form, in a variable, so that I can use that variable for further querying the DB.
My Code:
<?
if($submit)
{
mysql_connect("localhost:3036","root","root");//database connection
mysql_select_db("sync");
$order = "INSERT INTO country (id,country) VALUES ('44','$submit')";
$result = mysql_query($order);
if($result){
echo("<br>Input data is succeed");
} else{
echo("<br>Input data is fail");
}
}
?>
<html>
<title>form sumit</title>
<body>
<form method="post" action="">
<input type="text" name="id" value="<?=$submit;?>"/>
<input type="Submit" name="submit" value="Submit">
</form>
</body>
</html>
//In real case, the form has elements with radio button containing values from a DB QUERY,
I wanted to use the selected item from the form to process another DB query in the same page...
Thanks in Advance
Try this -
<?php
$submit = $_POST['id'];
if($submit)
{
//your code is here
echo $submit;
}
?>
<html>
<title>form sumit</title>
<body>
<form method="post" action="">
<input type="text" name="id" value="<?php echo $submit; ?>"/>
<input type="Submit" name="submit" value="Submit">
</form>
</body>
</html>
Submitted form data automatically gets allocated to a variable ($_POST, in your case). If you want longer-term storage, consider using the $_SESSION variable, otherwise the submitted data is discarded upon script termination.
Please clarify your question, as I'm not quite sure what you are trying to achieve here.
In a normal workflow, you would first check if your form has already been processed (see if $_POST has any data worth processing), then query the database for whatever data you need for your form, then render the actual form.
As promised, here's a hands-on sample:
<?php
if ($_POST['ajax']) {
// This is a very trivial way of detecting ajax, but we don't need anything more complex here.
$data = workYourSQLMagicHere(); //data should be filled with the new select's html code
print_r(json_encode($data));
die(); // Ajax done, stop here.
}
/* Your current form generation magic here. */
?>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
// This should probably go into a separate JS file.
$('#select1').change( function() {
var url = ''; //Here we're accessing the page which originates the script. If you have a separate script, use that url here. Local only, single-origin policy does not allow cross-domain calls.
var opts = { ajax: true };
$.post(url, opts, function(data) {
$('#select2').replaceWith( $.parseJSON(data) ); //Replace the second select box with return results
});
});
</script>
<select id="select1"><?=$stuff;?></select>
<select id="select2"><?=$more_stuff;?></select>
I want the user to fill it out. Submit it, have it store into the database and then use jquery to have it show up on the same page in front of them. Right now I can get it to send to the database but it opens up in another page (/data.php) on submit. Also I have it set to random because I don't know how to get the exact post just sent by the user back to display.
Here is my data.php file:
<?php
$con = mysql_connect("*****", "******", "******");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("textwall", $con);
$sql="INSERT INTO textwalltable (story)
VALUES
('$_POST[story]')";
if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
echo "1 record added";
$sql = "SELECT * FROM textwalltable ORDER BY RAND() LIMIT 1;";
$query = mysql_query( $sql );
while($row = mysql_fetch_array($query)) {
echo $row['story'];
}
mysql_close($con);
?>
and my HTML page:
<html>
<head>
<title>testing</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery.js"><\/script>')</script>
<script type="text/javascript">
function loadData()
{
$("#txtHint").load("data.php");
}
</script>
</head>
<body>
<form action="data.php" method="post" onsubmit="loadData()">
<div>
<label for="comment">Type here:</label>
<textarea id="story" name="story" rows="2" cols="20">
</textarea>
<div id="txtHint"></div>
</div>
<div>
<div><input type="submit" value="Submit" class="submit"/></div>
</form>
</body>
Here is work flow:
1) User hits form submit.
2) You gather necessary information from DOM. You AJAX the information to a server-side script that enters that info into the database.
3) You use JQuery to insert the information however you want to display it into the DOM.
4) Remove whatever html you no longer need on the page if necessary.
In terms of code you are going to want to look at JQuery's ajax or post functions for the AJAX call.
You can use a javascript function (using jquery) to handle those events. This method does not use a button, so you will need to create your own button that will call the following function:
function postPage() {
$.post("post.php", $("#form_id").serialize(), function(){
$("#display_id").load('display.php');
});
}
You will need to have the post values processed in this case by "test.php", and then the contents of which you want to display back to the user after posting in display.php. The contents of display.php will be placed inside a div/container with the id of "display".
Here is another way, if you use the serialize function built into jquery along with the $.post you won't have to actually write much code.
html form and html displaying the messages:
<form action="data.php" method="post" class="commentForm">
<div>
<label for="comment">Type here:</label>
<textarea id="story" name="story" rows="2" cols="20">
</textarea>
<div id="txtHint"></div>
</div>
<div>
<div><input type="submit" value="Submit" class="submit"/></div>
</form>
<ul class="messages">
<li>Some old message</li>
<li>Some other old message</li>
</ul>
jquery to send the new messages to your server from the client and placing new message into the DOM and resetting the html form
//bind a click even to the submit
$('.commentForm input[type=submit]').click(function(){
$(this).closest('form').find('input[type=submit]').value('Submitting');
$.post(
$(this).closest('form').attr('action'),
$(this).closest('form').serialize(),
function(responseFromServer){
//get the message from the html form (don't need to send it back from the server)
var message = $(this).closest('form').find('textarea');
$('.messages').append('<li>'+message+'</li>');
//resetting the html form
$(this).closest('form').find('textarea').html('');
$(this).closest('form').find('input[type=submit]').value('Submit');
}
);
//prevent the form from actually sending in the standard fashion by returning false
return false;
});
php
//get the post variable and make it safe for inputting into the db
$message = mysql_real_escape_string(html_entities($_POST['story']));
if(!empty($message)){
//assuming you have a db connection
$insert_query = mysql_query("INSERT INTO textwalltable VALUES($message)");
echo 'message entered';
} else {
echo 'no message';
}
I am trying to change the contents of depending on the current option selected.
The getData(page) comes back correctly (onChange) but it just doesn't go over to the variable I get "Fatal error: Call to undefined function getData() in C:\xampp\htdocs\pdimi\admin\editpages.php on line 42"
EDIT: This is how I finished it!
Javascript:
<script language="JavaScript" type="text/javascript">
function getData(combobox){
var value = combobox.options[combobox.selectedIndex].value;
// TODO: check whether the textarea content has been modified.
// if so, warn the user that continuing will lose those changes and
// reload a new page, and abort function if so instructed.
document.location.href = '?page='+value;
}
</script>
Select form:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<select name="page" onChange="getData(this)">
<?php
if (isset($_REQUEST['page']))
$page = mysql_real_escape_string($_POST['page']);
else
$page = '';
$query = "SELECT pageid FROM pages;";
?>
<option value="select">Select Page</option>
<option value="indexpage">Index Page</option>
<option value="starthere">Start Here</option>
</select>
Textarea:
<textarea class="ckeditor" name="page_data" cols="80" row="8" id="page_data">
<?php
if (isset($_GET['page'])) {
$sql1 = #mysql_query("SELECT * FROM pages WHERE pageid='".$_GET['page']."'") or die(mysql_error());
$sql2 = #mysql_fetch_array($sql1) or die(mysql_error());
if ($sql1) {
echo $sql2['content'];
}
}
?>
</textarea>
And that is that!
You cannot execute a Javascript function (client side) from PHP (which runs server side).
Also, you need to connect to a database server with user and password, and select a database. Do not use #, it will only prevent you from seeing errors -- but the errors will be there.
In the PHP file you need to check whether you receive a $_POST['page'], and if so, use that as the ID for the SELECT. You have set up a combo named 'page', so on submit the PHP script will receive the selected value into a variable called $_POST['page'].
Usual warnings apply:
mysql_* functions are discouraged, use mysqli or PDO
if you still use mysql_*, sanitize the input (e.g. $id = (int)$_POST['page'] if it is numeric, or mysql_real_escape_string if it is not, as in your case)
If you want to change the content of textarea when the user changes the combo box, that is a work for AJAX (e.g. jQuery):
bind a function to the change event of the combo box
issue a call to a PHP script server side passing the new ID
the PHP script will output only the content, no other HTML
receive the content in the change-function of the combo and verify success
set $('#textarea')'s value to the content
This way you won't have to reload the page at each combo change. Which reminds me of another thing, when you reload the page now, you have to properly set the combo value: and you can exploit this to dynamically generate the combo, also.
Working example
This file expects to be called 'editpages.php'. PHP elaboration is done (almost) separately from data presentation.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>PDIMI - The Personal Development and Internet Marketing Institution</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />
<link href="../style/default.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
function getData(combobox){
var value = combobox.options[combobox.selectedIndex].value;
// TODO: check whether the textarea content has been modified.
// if so, warn the user that continuing will lose those changes and
// reload a new page, and abort function if so instructed.
document.location.href = '?page='+value;
}
</script>
</head>
<?php include 'aheader.php';?>
<?php
error_reporting(E_ALL);
if (!mysql_ping())
die ("The MySQL connection is not active.");
mysql_set_charset('utf8');
// $_REQUEST is both _GET and _POST
if (isset($_REQUEST['page']))
$page = mysql_real_escape_string($_REQUEST['page']);
else
$page = False;
$query = "SELECT pageid, pagename FROM pages;";
$exec = mysql_query($query); // You need to be already connected to a DB
if (!$exec)
trigger_error("Cannot fetch data from pages table: " . mysql_error(), E_USER_ERROR);
if (0 == mysql_num_rows($exec))
trigger_error("There are no pages in the 'pages' table. Cannot continue: it would not work. Insert some pageids and retry.",
E_USER_ERROR);
$options = '';
while($row = mysql_fetch_array($exec))
{
// if the current pageid matches the one requested, we set SELECTED
if ($row['pageid'] === $page)
$sel = 'selected="selected"';
else
{
// If there is no selection, we use the first combo value as default
if (False === $page)
$page = $row['pageid'];
$sel = '';
}
$options .= "<option value=\"{$row['pageid']}\" $sel>{$row['pagename']}</option>";
}
mysql_free_result($exec);
if (isset($_POST['page_data']))
{
$page_data = mysql_real_escape_string($_POST['page_data']);
$query = "INSERT INTO pages ( pageid, content ) VALUES ( '{$page}', '{$page_data}' ) ON DUPLICATE KEY UPDATE content=VALUES(content);";
if (!mysql_query($query))
trigger_error("An error occurred: " . mysql_error(), E_USER_ERROR);
}
// Anyway, recover its contents (maybe updated)
$query = "SELECT content FROM pages WHERE pageid='{$page}';";
$exec = mysql_query($query);
// who says we found anything? Maybe this id does not even exist.
if (mysql_num_rows($exec) > 0)
{
// if it does, we're inside a textarea and we directly output the text
$row = mysql_fetch_array($exec);
$textarea = $row['content'];
}
else
$textarea = '';
mysql_free_result($exec);
?>
<body>
<div id="page-wrapper">
<div id="page">
<div id="content2">
<h2>Edit Your Pages Here</h2>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<form name="editpage" method="POST" action="">
<table border="1" width="100%">
<tr>
<td>Please Select The Page You Wish To Edit:</td>
<td>
<select name="page" onChange="getData(this)"><?php print $options; ?></select>
</td>
</tr>
<tr>
<td><textarea class="ckeditor" name="page_data" cols="80" row="8" id="page_data"><?php print $textarea; ?></textarea></td>
</tr>
<tr>
<td><input type="Submit" value="Save the page"/></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
The biggest issue that you have here, is that you need to learn the difference between client side and server side.
Server Side: As the page is loading... We run various code to determine what is going to be displayed and printed into the source code.
Client side: Once the page has loaded... We can then use DOM elements to interact, modify, or enhance the user experience (im making this up as i go along).
In your code, you have a PHP mysql command:
$thisdata = #mysql_query("SELECT * FROM pages WHERE pageid=".getData('value'));
1, Don't use mysql. Use mysqli or PDO
2, You have called a javascript function from your PHP.
There is absolutely no way that you can call a javascript function from PHP. The client side script does not exist and will not run until after the page has stopped loading.
In your case:
You need to server up the HTML and javascript code that you will be using. Once, and only when, the page has loaded, you need to use javascript (client side scripting), to set an event listener to listen for your select change event. Once this event is triggered, then you can determine what you want to do (ie change a textbox value, etc).
I want to submit search query form & get search result without redirecting/reloading/refreshing on the same page.
My content is dynamic so can not use those "submit contact form without refreshing page which replies back on success".
In order to submit a form, collect the results from the database and present them to the user without a page refresh, redirect or reloading, you need to:
Use Ajax to Post the data from your form to a php file;
That file in background will query the database and obtain the results for the data that he as received;
With the query result, you will need to inject it inside an html element in your page that is ready to present the results to the user;
At last, you need to set some controlling stuff to let styles and document workflow run smoothly.
So, having said that, here's an working example:
We have a table "persons" with a field "age" and a field "name" and we are going to search for persons with an age of 32. Next we will present their names and age inside a div with a table with pink background and a very large text.
To properly test this, we will have an header, body and footer with gray colors!
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="pt" dir="ltr">
<head>
<title>Search And Show Without Refresh</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<!-- JQUERY FROM GOOGLE API -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#lets_search").bind('submit',function() {
var value = $('#str').val();
$.post('db_query.php',{value:value}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
</head>
<body style="margin:0;padding:0px;width:100%;height:100%;background-color:#FFFFFF;">
<div style="width:1024px;margin:0 auto;height:100px;background-color:#f0f0f0;text-align:center;">
HEADER
</div>
<div style="width:1024px;margin:0 auto;height:568px;background-color:#f0f0f0;text-align:center;">
<form id="lets_search" action="" style="width:400px;margin:0 auto;text-align:left;">
Search:<input type="text" name="str" id="str">
<input type="submit" value="send" name="send" id="send">
</form>
<div id="search_results"></div>
</div>
<div style="width:1024px;margin:0 auto;height:100px;background-color:#f0f0f0;text-align:center;">
FOOTER
</div>
</body>
</html>
db_query.php
<?php
define("HOST", "localhost");
// Database user
define("DBUSER", "username");
// Database password
define("PASS", "password");
// Database name
define("DB", "database_name");
// Database Error - User Message
define("DB_MSG_ERROR", 'Could not connect!<br />Please contact the site\'s administrator.');
############## Make the mysql connection ###########
$conn = mysql_connect(HOST, DBUSER, PASS) or die(DB_MSG_ERROR);
$db = mysql_select_db(DB) or die(DB_MSG_ERROR);
$query = mysql_query("
SELECT *
FROM persons
WHERE age='".$_POST['value']."'
");
echo '<table>';
while ($data = mysql_fetch_array($query)) {
echo '
<tr style="background-color:pink;">
<td style="font-size:18px;">'.$data["name"].'</td>
<td style="font-size:18px;">'.$data["age"].'</td>
</tr>';
}
echo '</table>';
?>
The controlling stuff depends from what you want, but use that code, place those two files in the same directory, and you should be fine!
Any problems or a more explicative code, please let us know ;)
You'll probably want to start with any of the thousands of "AJAX for beginners" tutorials you can find on the net. A Google search with that term should get you going.
Try this for starters:
http://www.destraynor.com/serendipity/index.php?/archives/29-AJAX-for-the-beginner.html
After you've read through that, keep in mind that you really don't need to be writing any XHR handling code. As pointed out by Jamie, jQuery or any of the other multitudes of Javascript libraries out there, can greatly simplify your client-side AJAX code.
This is what AJAX is for.
In jQuery (apologies if you're looking for a different library)
$("form#search").bind('submit',function() {
$.post("search.php",this.serialize(),function(data) {
// Put the code to deal with the response data here
});
return false;
});
It's good if you can get some basics of Ajax before straight away going to the code.
Ajax , is the exact solution for your problem. It asynchronously makes a request to the server, get the result and the data in the page can be modified with the result . It's all done in JavaScript.
Suppose you have an html like this:
<html>
<body>
<div id="myDiv"> your content area</div>
<button type="button" onclick="loadByAjax()">Change Content</button>
</body>
</html>
Now, your javascipr code will be like this:
<script type="text/javascript">
function loadByAjax()
{
$.ajax({
type: "POST",
url: "yourserverpage.php",
data: "searchkey=data_from_user_input",
success: function(response_data){
$('myDiv').html(response_data)
}
});
}
</script>
so, basically upon click of the button, the JavaScript will be executed. It wil call the php serverside script, pass the parameters it got from user input and retrieve the response data and place it inside the div.
So your page is updated without full refresh.
Also, please understand that, i used jquery library here for the Ajax function.