Trouble loading php result into div using jQuery load()
Question
Good Morning, Let me apologize in advance for troubling this community with my issue; as I am the novice of novices at best when it comes to any kind of development, and I feel I'm lucky to have made it this far before hitting a roadblock lol.
I've been putting together a simple internal application for our company, and the problem I'm dealing with now happens to be the final piece of the puzzle. What I'm trying to do is use the jQuery load() method to display the output of "index2.php", within the "test" div identified on my main page.
I need the result to print out on my main page, because I've failed miserably at getting the page to work using iframes. My objective - when a user enters a search term in the text box then clicks the submit button; index2.php connects with and queries a mysql db, and prints the query result into the "test" div as a table.
My current code does't pull the php result into the div when the submit button is clicked; it just sits there without any change, and no errors or any activity in the console. During my wild and frantic searches; I've tried out several other methods such as using 'after()' in place of 'load()', which merely displayed the text "index2.php" on my page instead of the table output.
I know the 'after()' method isn't going to give me the result I'm looking for, but it did appear to give confirmation that the rest of my code is correct...I think lol. I apologize again for any obvious faux-pas you may find, being a true dyed in the wool amateur at this. That being said, thank you very much for any help or insight anyone is willing to provide! :)
Here's my code:
Contents of Index.html :
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html><head>
<title>My page</title>
<!--calls jquery, applys stylesheet-->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<br>
<header><h5><center><font size="22">My Page<font size="4">®</font></font></center></h5></header>
<!--Search box and submit button, querying db and displaying results of index2.php-->
<center><div>
<br>
<form id="index2" action="" method="POST" target="test" />
<input type="text" name="sb" id="searchBox" placeholder="" value="" maxlength="20" autocomplete="off" onmousedown="" onblur="" />
<input type="button" id="searchBtn" value="Submit" />
</form></div>
</center>
<br>
<!--This is where the "index2.php search results should be displayed-->
<center><div id="test"></div></center>
<br>
</body>
<script type="text/javascript">
//-This is the jQuery load() method to call the "index2.php" results into the "test" div when submit is clicked-//
$(document).ready(function(){
$('searchBtn').click(function(){
$('#test').load('<object data=index2.php>')
//-I've tried using simply .load('index2.php') and .load('/index2.php') here as well-//
});
});
</script>
</html>
And here's the code for index2.php :
<?php
if (!isset($_GET["sb"])) {
echo '';
} else {
$db_host = 'some.host';
$db_user = 'user';
$db_pwd = 'password';
$database = 'database_name';
$table = 'calls';
echo mysqli_num_rows($result) . " Results for: " . $_GET["sb"];
$sb = $_GET["sb"];
$q = 1;
$con = mysqli_connect($db_host, $db_user, $db_pwd, $database);
if (mysqli_connect_errno()) {
echo "Failed to connect to database" . mysqli_connect_errno();
}
if (!mysqli_select_db($con, $database)) {
die("Can't select database");
}
$result = mysqli_query($con, "SELECT `calls` FROM `calls` WHERE calls LIKE '%$sb%' LIMIT 25");
if (!$result) {
die("Query to show fields from table failed");
}
$fields_num = mysqli_num_fields($result);
echo "<table border='1'><br><br>";
while ($row = mysqli_fetch_row($result)) {
if ($q % 2 != 0) {
$rowColor = "#dddddd";
} else {
$rowColor = "#FFFFFF";
}
echo "<tr bgcolor = $rowColor>";
$q++;
foreach ($row as $cell) {
echo "<td>$cell</td>";
}
echo "<td><a href='/calls/$cell' id='callpath'>Play Now</a></td>";
echo "</tr>\n";
}
mysql_free_result($result);
}
3 answers
solution1
0 2017-05-18 14:31:31
.load() takes an url as argument and places the returned HTML into the matched element. try this:
$('#test').load('path/to/your/index2.php?sb=searchterm')
edit:
you would also have to pass the value of your search-input to index2.php
solution2
0 ACCPTED 2017-05-18 14:39:50
You have syntax errors in your code:
the start tag in your form does not need an ending slash: like
<form />jQuery needs a hash to look for the id, missing hash:
$('searchBtn')Youre not submitting your form correctly. If im not mistaken, youre trying to pass whatever you type in as a query string, but youre currently not passing anything.
load()looks for a URL, no need to use object. http://api.jquery.com/load/
Do it in this manner:
<form id="index2_form">
<input type="text" name="sb" id="searchBox" />
<input type="submit" id="searchBtn" value="Submit"/>
</form>
<div id="test"></div>
<script>
$('#index2_form').submit(function () {
var query = $(this).serialize();
var url = "index2.php?" + query;
$('#test').load(url);
return false;
});
</script>
solution3
0 2017-05-18 14:48:15
<script>
$('#searchBtn').click(function () {
let searchTerm = $('#searchBox').text();
$('#test').load("index2.php?sb=" + searchTerm);
});
</script>
I made the above modification showing how you might get the search term into your query.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.