I'm beginner at JS, AJAx, and so on. I was searching over the internet and found one code, so I used it, changed it a little... but it seems that it doesn't work (it does nothing).
First the javascript and html:
function fetch_select(val)
{
$.ajax({
type: 'post',
url: 'fetch_data.php',
data: {
get_option:val
},
success: function (response) {
document.getElementById("new_select").innerHTML=response;
}
});
}
<select onchange="fetch_select(this.value);">
<option>Wybierz</option>';
$zapytanie = "
SELECT
scan_category.scat_id,
scan_category.long_name
FROM
scan_category
WHERE
scan_category.state = 1 OR scan_category.state = 4 and scan_category.hide = 0
ORDER BY
scan_category.long_name";
$wykonaj = mysql_query($zapytanie) or die(mysql_error());
while($row=mysql_fetch_array($wykonaj))
{
echo '<option>'.$row[1].'</option>';
}
echo'</select>
<div id="new_select">
</div>';
$manga = $_POST['get_option'];
$znajdz = "
SELECT users.nick, scan_category.long_name, scan_work.work_name, scan_roles.role_id, scan_roles.scat_id, scan_roles.uid, scan_roles.what_id
FROM scan_roles
INNER JOIN scan_work ON scan_roles.what_id = scan_work.work_id
INNER JOIN users ON scan_roles.uid = users.uid
INNER JOIN scan_category ON scan_category.scat_id = scan_roles.scat_id
WHERE
scan_roles.scat_id = '$manga'";
$wykonaj = mysql_query($znajdz or die(mysql_error());
while ($row = mysql_fetch_array($znajdz)) {
echo '<h2>'.$row[1].
'</h2><br />'.$row[2].
':
<form enctype="multipart/form-data" action="manage.php5?mode=edit_role&edit&role_id="'.$row[4].
' method="POST">
<input type="hidden" name="pass" value="'.$_POST['pass'].
'">';
echo('<select name="user_id" size="1">');
$zapytanie = '
SELECT
users.uid,
users.nick
FROM
users
WHERE
active > 0
ORDER BY
users.nick';
$wykonaj2 = mysql_query($zapytanie) or die(mysql_error());
while ($wiersz = mysql_fetch_array($wykonaj)) {
echo('<option value="'.$wiersz[0].
'"');
if ($wiersz[0] == $row[6]) echo ' selected="selected"';
echo('>'.$wiersz[1].
'</option>');
}
echo '</select>';
echo('<input type="submit" value="edit">
</form>');
Do you have any idea how to make it work (it doesn't seem to be even going to the file "fetch_data.php).
If I should add something else, tell me, I'm pretty much beginner!
When i put console.log(response) it does say ReferenceError: response is not defined, when i puted it like this - console.log("response") it gives me "response".
Related
I have a Ajax PHP MySQL live search that basically pulls out manufacturing items from a MySQL database and presents them in a drop-down list, as users enter they search term, one item per line, just like searching in Google.
What I need is a way to allow users to click on a particular link item, and for that to display data on the same page, just below the item(link) clicked.
Any help would be appreciated.
1.HTML form
<form class="navbar-form navbar-left" action="javascript:">
<div class="input-group">
<input type="text" class="form-control" id="searchbox1" name="q" token="<?=$csrf->token()?>" action='search1' placeholder="Search for Templates" autocomplete="off">
<div class="input-group-btn">
<button class="btn btn-default " id="searchbtn1" type="submit">
<i class="fa fa-search"></i></button>
</div>
</div>
<div id="livesearch1"></div>
</form>
2. AJAX Call seperate .js file
$('#searchbox1').on('keyup focus', function(e) {
var b = $(this).attr();
delete b.class, delete b.placeholder, delete b.id, delete b.name, delete b.type, delete b.autocomplete;
b.q = $(this).val();
if (b.q != '' && b.q.length > 0) {
$.ajax({
type: "POST",
url: api,
data: b,
cache: false,
success: function(a) {
$("#livesearch1").html(a);
$("#livesearch1").fadeIn();
}
});
} else {
$("#livesearch1").fadeOut();
}
});
$('#searchbox1').on('blur', function(e) {
$('#livesearch1').fadeOut();
});
3. api call
case 'search':
if($app->isAdmin() || $app->isEditor() || $app->isUser())
{
$app->escape('q');
ob_start();
ajaxsearch($q);
echo $result = ob_get_clean();
// json('success','true','results',$result);
}
break;
4. .php file
function ajaxsearch1($q){
$db = MysqliDb::getInstance();
$csrf = new Csrf_Protect();
$q = removeWhiteSpace($q);
$q = htmlspecialchars_decode($q,ENT_QUOTES);
$q = preg_replace('/[^a-zA-Z0-9.-. .).(]/', '', $q);
if(strlen($q) >0 )
{
$term = $q;
$searchterm = explode(' ',$term);
$searchColumns = array("name","slug");
$searchCondition = '';
for($i = 0; $i < count($searchColumns); $i++)
{
$searchFieldName = $searchColumns[$i];
$searchCondition .= "($searchFieldName LIKE '%" . implode("%' AND $searchFieldName LIKE '%", $searchterm) . "%')";
if($i+1 < count($searchColumns)) $searchCondition .= " OR ";
}
$res = $db->rawQuery("SELECT * FROM tbl_templates WHERE ($searchCondition) AND (version='1') order by id desc Limit 10 ");
foreach($res as $sr)
{ ?><li><?=ucfirst($sr['name'])?></li><?php
}
}
}
?>
This was a parameter issue.
data was not in the $q it was in the $name code should be something like this.
case 'search':
if($app->isAdmin() || $app->isEditor() || $app->isUser())
{
$app->escape('name');
ob_start();
ajaxsearch($name);
echo $result = ob_get_clean();
}
break;
I have some code which populates like so:
<select class="form-control" name="accommodation_ID" id="accommodation_ID">
<option value="-1">-- Please Select --</option>
<?php
$AccomodationID = 13; //For testing purposes
$accommodation_query = mysqli_query($conn,"SELECT ENTITIES.LastName,
ACCOMMODATION.AccomodationID, ACCOMMODATION.PUPoint
FROM ACCOMMODATION, ENTITIES WHERE ENTITIES.Entity_ID =
ACCOMMODATION.Entity_ID")
or die("Error: ".mysqli_error($conn));
while($accommodation_Results = mysqli_fetch_array($accommodation_query)){
if($accommodation_Results['AccomodationID'] == $AccomodationID){
echo '<option selected value="'.$AccomodationID.'">'.$accommodation_Results['LastName'].'</option>';
$PUPoint = $accommodation_Results['PUPoint'];
}
else{
echo '<option value="'.$AccomodationID.'">'.$accommodation_Results['LastName'].'</option>';
}
}
?>
</select>
<label>Pick Up Point</label>
<input type="text" name="PUPoint" readonly value="<?php echo $PUPoint; ?>">
This code works no problem, it checks the database and looks for a match, if it does, set is as the selected option, grab the PUPoint (Pickup point) variable and store it in the input field.
My problem now, is when I go to select a different option from the dropdown list, the pickup point input field doesn't update anymore. This is what I had, working before I implemented the above:
j$('select[name=accommodation_ID]').change(function(event) {
event.preventDefault();
var accommodationID = j$(this).val();
post_data = {'accommodation_ID':accommodationID};
var data = {
"action": "Accommodation_Details"
};
data = j$(this).serialize() + "&" + j$.param(data);
j$.ajax({
type: "POST",
dataType: "json",
url: "../include/booking_Modify.php",
data: data,
success: function(data) {
j$('input[name=PUPoint]').val( data["PUPoint"] );
},
error: function (request) {
console.log(request.responseText);
}
});
});
booking_Modify.php
//checks and switch statement related code
$return = $_POST;
$return["accommodation_ID"] = $_POST["accommodation_ID"];
$return["SQL"] = "SELECT * FROM ACCOMMODATION WHERE AccommodationID = ".$_POST["accommodation_ID"]."";
$query = mysqli_query($conn,"SELECT * FROM ACCOMMODATION WHERE AccomodationID = ".$_POST["accommodation_ID"]."")
or die("Error: ".mysqli_error($conn));
$row = mysqli_fetch_array($query);
$return["PUPoint"] = $row["PUPoint"];
$return["json"] = json_encode($return);
echo json_encode($return);
I've done some echoing/console.log and noticed that it's always passing the same Accommodation ID number (13) into booking_Modify.php. It doesn't change when I select a different option now. I don't know if it's because of the "selected" attribute applied to the option element now. Any ideas would be greatly appreciated
You have defined your $AccomodationID = 13; //For testing purposes before which is printed in every iteration of the while loop instead of the current ID. Probably you want to write $accommodation_Results['AccomodationID'] as the option value.
Hi i have small project which will display news from last 4,6 weeks. I have created select box which will ask for news from last 4,6 weeks. and submit button.So user select news from select box and click on submit button and he will get the result. But i am not getting proper ouput not even getting any error. By default i dont know why the ouput displaying data from database. And my submit button is not even showing active.I am making small mistake which is not able to identify. Thanks.
js file
$.ajax({
type: "POST",
url: "ajax/edit_news.php",
dataType : 'json',
cache: false,
data: {'aktion' : 'edit-news'},
success: function(data){
$('#editnews').html(data.html);
}
});
Here is my code:
<?php
chdir('..');
include 'constant/const_system.inc.php';
include 'functions/ad_json.inc';
include 'functions/ad_formulare.inc';
include 'constant/const_system_db.inc.php'; //database file
$return = array();
if(isset($_POST['BtnSubmit']))
{
if(($_POST['news'])==4){
$sql=" SELECT DISTINCT ad_news_texte.headline, ad_news.datum_archiv
FROM ad_news_texte
INNER JOIN ad_news_oe ON ad_news_texte.news_id = ad_news_oe.id_ad_news
INNER JOIN ad_news ON ad_news_oe.id_ad_news = ad_news.id
WHERE ad_news.datum_archiv
BETWEEN curdate( ) - INTERVAL DAYOFWEEK( curdate( ) ) +28
DAY AND curdate( )
";
$sql_select=mysql_query($sql);
while($row = mysql_fetch_array($sql_select)) {
echo $row['headline'] . " " .$row['datum_archiv'] ;
echo "<br>";
}
}
if(($_POST['news'])==6){
$sql=" SELECT DISTINCT ad_news_texte.headline, ad_news.datum_archiv
FROM ad_news_texte
INNER JOIN ad_news_oe ON ad_news_texte.news_id = ad_news_oe.id_ad_news
INNER JOIN ad_news ON ad_news_oe.id_ad_news = ad_news.id
WHERE ad_news.datum_archiv
BETWEEN curdate( ) - INTERVAL DAYOFWEEK( curdate( ) ) +42
DAY AND curdate( )
";
$sql_select=mysql_query($sql);
while($row = mysql_fetch_array($sql_select)) {
echo $row['headline'] . " " .$row['datum_archiv'] ;
echo "<br>";
}
}
}
if($param['aktion'] == 'edit-news')
{
$html = '
<form name="UserInformationForm" method="POST" action="#">
<select name="news">
<option value="4" '. (($_POST['news']=="4") ? "selected=selected" : "" ) .'>Show news from last 4 weeks</option>
<option value="6" '. (($_POST['news']=="6") ? "selected=selected" : "") .'>Show news from last 6 weeks</option>
</select>
<br/><br/>
<input name="BtnSubmit" type="submit" value="Submit" >
</form>
';
$return = array(
'status' => 1,
'html' => $html
);
echo json_encode($return);
die();
}
?>
And its showing output like this:
You are returning a invalid json mixed with html, that's why its not working, here is code you need to change
//Change this in both places
...
$news = '';
$sql_select=mysql_query($sql);
while($row = mysql_fetch_array($sql_select)) {
$news .= $row['headline'] . " " .$row['datum_archiv'] ;
$news .= "<br>";
}
...
//and return news like below
$return = array(
'status' => 1,
'news' = $news
);
//Return the json
header('Content-Type: application/json');
exit(json_encode($return));
Add below line in the top of file
header('Content-Type: application/json');
Try this
$.ajax({
type: "POST",
url: "ajax/edit_news.php",
dataType : 'html',
cache: false,
data: {aktion: 'edit-news'},
success: function(data){
$('#editnews').html(data.html);
}
});
and do echo html . dont json
like echo $html; . This will fix your issue
I have see the example about search box using JQuery and mysql, But the view more function no work. how to improve the program. When i click the view more i can see the next 10 record. Thanks
<script type="text/javascript">
$(document).ready(function()
{
$("#keywords").keyup(function()
{
var kw = $("#keywords").val();
if(kw != '')
{
$.ajax
({
type: "POST",
url: "search.php",
data: "kw="+ kw,
success: function(option)
{
$("#results").html(option);
}
});
}
else
{
$("#results").html("");
}
return false;
});
$(".overlay").click(function()
{
$(".overlay").css('display','none');
$("#results").css('display','none');
});
$("#keywords").focus(function()
{
$(".overlay").css('display','block');
$("#results").css('display','block');
});
});
</script>
<div id="inputbox">
<input type="text" id="keywords" name="keywords" value="" placeholder="Type Your Query..."/>
</div>
</div>
<div id="results"></div>
<div class="overlay"></div>
we extract the value of that key and send it to the search.php
<?php
include('db.php');
//file which contains the database details.
?>
<?php
if(isset($_POST['kw']) && $_POST['kw'] != '')
{
$kws = $_POST['kw'];
$kws = mysql_real_escape_string($kws);
$query = "select * from wp_posts where post_name like '%".$kws."%' and (post_type='post' and post_status='publish') limit 10" ;
$res = mysql_query($query);
$count = mysql_num_rows($res);
$i = 0;
if($count > 0)
{
echo "<ul>";
while($row = mysql_fetch_array($res))
{
echo "<a href='$row[guid]'><li>";
echo "<div id='rest'>";
echo $row['post_name'];
echo "<br />";
echo "<div id='auth_dat'>".$row['post_date']."</div>";
echo "</div>";
echo "<div style='clear:both;'></div></li></a>";
$i++;
if($i == 5) break;
}
echo "</ul>";
if($count > 5)
{
echo "<div id='view_more'><a href='#'>View more results</a></div>";
}
}
else
{
echo "<div id='no_result'>No result found !</div>";
}
}
?>
press the view more result will not show more result.
If I'm not mistaken, you want to bring next 10 with ajax ?
This situation behaves as a pagination,
You have to store the current click count in javascript . WÄ°thout clicking more button, the variable of clickCount is 0, when you click more ,then your variable clickCount=1 ,
while sending ajax , send clickCount to the php.
$.ajax
({
type: "POST",
url: "search.php",
data: "kw="+ kw+"&clickCount="+clickCount,
success: function(option)
{
$("#results").html(option);
}
});
You can query with limit&offset (clickCount )*10, itemCountForEachMoreClick = limit 0,10
when click more
limit 10,10
when click one more
limit 20,10. Do not forget to reset clickCount on keyPress !
php Side
$count = isset($_REQUEST["clickCount"])? $_REQUEST["clickCount"]:0;
$limitAndOffset = $count*10.",10";
$query = "select * from wp_posts where post_name like '%".$kws."%'
and (post_type='post' and post_status='publish') limit ".$limitAndOffset ;
I'm using a star ratings system to display rating data from SQL. Each item that can be rated has unique identifyer variable $id and each rating in ratings tabl has unique identifyer $storyidr. I would like this script to display:
the average rating
the number of times the item has been rated.
The values are retirevable but they display on the page together and I can't see how to seperate them. FOr example, for an item that has an average rating of 4 and has been rated 200 times. when user clicks the data returns via AJAX looking like:
For 'response1' 4"200"
For 'response2' 4"200"
I would like to be able to seperate them to look like:
For 'response1' 4
For 'response2' 200
html page
<div id="products" style="">
<div class="rateit" data-storyidr="<?php echo $id; ?>">
</div>
<div class="averagevote">
<div style="display:block;" id="response<?php echo $id; ?>"><?php echo $avgratep; ?></div><br>
<div style="display:block;" id="response2<?php echo $id; ?>">RaTeD <?php echo $rankcount; ?> TiMeS</div>
</div>
</div>
<?php endwhile; mysqli_close($connection); ?>
<script type ="text/javascript">
$('#currentslide .rateit').bind('rated reset', function (e) {
var ri = $(this);
var value = ri.rateit('value');
var storyidr = ri.data('storyidr');
ri.rateit('readonly', true);
$.ajax({
dataType : 'json',
url: 'rate.php',
data: {storyidr: storyidr, value: value},
type: 'POST',
success: function (data) {
$('#response'+storyidr).replaceWith('Avg rating ' + data.avg + '/5');
$('#response2'+storyidr).replaceWith('Rated ' + data.cnt + ' times');
},
error: function (jxhr, msg, err) {
$('#response').append('<li style="color:red">' + msg + '</li>');
}
});
});
</script>
PHP
<?PHP
$storyidr=$_POST['storyidr'];
$mysqli = mysqli_connect($dbhost,$dbusername,$dbpasswd,$database_name) or die ("Couldn't connect to server.");
if (mysqli_connect_errno($mysqli))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "INSERT INTO ratings (storyidr, rank, entry_date) VALUES ('$_POST[storyidr]','$_POST[value]',now());";
$sql .= "SELECT AVG(rank) AS avrank, COUNT(rank) AS countrank FROM ratings WHERE storyidr = $storyidr";
if($mysqli->multi_query($sql))
{ $mysqli->next_result();
if ($result = $mysqli->store_result())
{
$data = mysqli_fetch_assoc($result);
$avrank = $data['avrank'];
$countrank = $data['countrank'];
$avrankr = round($avrank,2);
if(is_null($avrank)){$avrank ="null";}
echo json_encode(array('avg' => $avrankr, 'cnt' => $countrank));
}
}
?>
You should only use json_encode() once and only echo the result of that function. Doing it more than once invalidates your json:
else
{
$results = array();
$results['av'] = $avrankr;
$results['cnt'] = $countrank;
echo json_encode($results);
}
Then, in your javascript, you can access data.av and data.cnt directly:
$('#response'+storyidr).replaceWith('Avg rating ' + data.av +'/5');
$('#response2'+storyidr).replaceWith(data.cnt);
You could also set the dataType parameter in your ajax call as mentioned by #barell, but normally jQuery will figure that out correctly already.
Edit: To avoid the undefined errors you are getting you should do something like:
$results = array('status' => 'fail');
...
if () {
...
if ($result)
{
$results['status'] = 'success';
$results['av'] = $avrankr;
$results['cnt'] = $countrank;
}
}
echo json_encode($results);
Now you can check for data.status first in the success callback of your ajax call and take the appropriate action:
success: function (data) {
if (data.status === 'fail') {
// show a warning message somewhere, this is just an example
alert('No results found!');
} else {
$('#response'+storyidr).replaceWith('Avg rating ' + data.av + '/5');
$('#response2'+storyidr).replaceWith('RaTeD ' + data.cnt + ' TiMeS');
}
},
I think the problem is you don't set the correct header. In the php file, before any output, put this:
header('Content-type: text/json');
And also, instead of write two objects, write it as an array:
echo json_encode(array('avg' => $avrankr, 'cnt' => $countrank));
Now it should work
Then, in your Javascript you will access this data like this:
$('#response'+storyidr).replaceWith('Avg rating ' + data.avg +'/5');
$('#response'+storyidr).replaceWith(data.cnt); // Suppose you want the count here