We Keep Coding

AJAX Search Function Not Updating Answer

I have an AJAX function that calls a php function to search a mysql database. The script fires off on keyup and the problem is on the first key press the html content is updated but it will not update after the initial keyup event
How do I make the page continuously update the html content with the new data that is coming in after every keyup.
My AJAX function,
var searchPath = "<?php echo $searchPath ?>";
$("#itemID").keyup(function (){
var itemID = $(this).val();
var url = searchPath;
$.ajax({
type : "GET",
async : false,
url : url,
data : "itemID=" + encodeURIComponent(itemID),
cache : false,
success: function(html) {
$('#loader_image').hide();
$( "#productResults" ).replaceWith( html );
if (html === "") {
$("#loader_message").html('<p>There were no results that match your search criteria</p>').show();
} else {
$("#loader_message").html('Searching... Please wait <img src="http://www.example.com/monstroid/wp-content/uploads/2016/02/LoaderIcon.gif" alt="Loading">').show();
}
window.busy = false;
}
});
});
And this is the php behind it all,
<?php
require_once ('Dbconfig.php');
$sql=" SELECT * FROM wuno_inventory WHERE wuno_product like '%".$itemID."%' OR wuno_alternates like '%".$itemID."%' ORDER BY wuno_product ";
try {
$stmt = $DB_con->prepare($sql);
$stmt->execute();
$results = $stmt->fetchAll();
} catch (Exception $ex) {
echo $ex->getMessage();
}
if (count($results) > 0) {
foreach ($results as $res) {
echo '<tr class="invent">';
echo '<td>' . $res['wuno_product'] . '</td>';
echo '<td>' . $res['wuno_alternates'] . '</td>';
echo '<td>' . $res['wuno_description'] . '</td>';
echo '<td>' . $res['wuno_onhand'] . '</td>';
echo '<td>' . $res['wuno_condition'] . '</td>';
echo '</tr>';
}
}
?>

Pass MYSQL row id to javascript variable

I have this script which is triggered when a button with the class .press_me is pressed.The buttons are on a column from a php generated mysql table:
$result = mysqli_query($con,"SELECT * FROM tbname");
echo "<table id='main'>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td class='right-middle user'>" . $row['ID'] . "</td>";
echo "<td class='right-middle user'>" . $row['Nume'] . "</td>";
echo "<td class='right-middle done'>" . $row['Teme_facute'] . "</td>";
echo "<td class='right-middle check'>" . "<img src='img/check.png' class='press_me'>" ."</td>";
echo "<td class='right-middle undone'>" . $row['Teme_nefacute'] . "</td>";
echo "<td class='right-middle uncheck'>" . "<img src='img/uncheck.png'>" . "</td>";
echo "<td class='side-table resetDone'>" . "<img src='img/resetDone.png'>" . "</td>";
echo "<td class='side-table resetUndone'>" . "<img src='img/resetUndone.png'>" . "</td>";
echo "</tr>";
}
echo "</table>";
And the script:
<script>
$(function (){
$('.press_me').click(function(){
var id=<?php echo json_decode('$row[ID]'); ?>;
var request = $.ajax({
type: "POST",
url: "counter.php"
});
request.done(function( msg ) {
alert('Success');
location.reload();
return;
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
And counter.php:
<?php
echo $_POST["id"];
if(!empty($_POST["id"]))
{
$id = $_POST["id"];
$connection=mysqli_connect("host","user","pass","db");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
exit;
}
mysqli_query($connection,"UPDATE tbname SET amount= (amount+ 1) WHERE ID = '" . $id . "'");
mysqli_close($connection);
echo 'OK';
}
else
{
echo 'NO ID PASSED';
}
?>
I'm having trouble updating only the value on the same row as the button pressed.When i run the page in this configuration counter.php returns no id passed and i think the problem is with the passing of the row id. Can anyone help me update only the value on the row with the pressed button?
I'm aware of sql injection but it's not the main problem now

Your id is empty
try this
echo "<td class='right-middle check'>" . "<img data-id='{$row['ID']}' src='img/check.png' class='press_me'>" ."</td>";
And in the script use this
var id=$(this).data("id");

change you javascript, looks like you are not sending data at all
<script>
$(function (){
$('.press_me').click(function(){
var id=<?php echo json_decode('$row[ID]'); ?>;
var request = $.ajax({
type: "POST",
url: "counter.php",
// add this line
data: { id: id}
});
request.done(function( msg ) {
alert('Success');
location.reload();
return;
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
});
});
</script>

Replace below script:
<script>
$(function (){
$('.press_me').click(function(){
var id=<?php echo $row[ID]; ?>;
var request = $.ajax({
type: "POST",
url: "counter.php"
});
request.done(function( msg ) {
alert('Success');
location.reload();
return;
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
NOTE: I assume that you are working with single record. If not then it
will going wrong.
If this is working wrong then replace .press_me line with below:
$id = $row['ID'];
echo "<td class='right-middle check'>" . "<img src='img/check.png' class='press_me' id='<?php print($id);?>' >" ."</td>";
And script is like:
var id = $(this).attr("id");
Hope this help you well!

Using PHP Variable as ID and calling from Javascript

Im using this is an ID
$id = $row['id'];
echo "<input type='text' id='$id' value='$row["s_code"]'>";
How can I get that ID in javascript function? I want it in here...
var scode = $('#').val();
While loop..
while ($row = mysqli_fetch_array($sqlSimplex , MYSQLI_ASSOC)) {
echo "<tr><td>";
$id = $row['id'];
echo "<input type='text' id='$id' value='".$row['s_code']."' readonly>";
echo "</td><td>";
echo $row['description'];
echo "</td>";
echo "<input type='hidden' id='comval' value='$newProductID'>";
echo "<td>";
echo "<input type='text' size='7' id='userqtyval'>";
echo "</td><td>";
echo "<input type='button' onclick='addthis()' value='Add!'>";
echo "</td></tr>";
}
Javascript
function addthis() {
var myID = '$id';
var scode = $("#"+myID).val();
alert(scode);
$.ajax({
type: 'POST',
url: 'insertsimplextoc_comp.php',
data: { simplexcode: scode },
});
}
Been stuck on this for over a week!

PHP:
while ($row = mysqli_fetch_array($sqlSimplex , MYSQLI_ASSOC)) {
echo "<tr><td>";
$id = $row['id'];
echo "<input type='text' id='$id' value='".$row['s_code']."' readonly>";
echo "</td><td>";
echo $row['description'];
echo "</td>";
echo "<input type='hidden' id='comval' value='$newProductID'>";
echo "<td>";
echo "<input type='text' size='7' id='userqtyval'>";
echo "</td><td>";
echo "<input type='button' class='submit-scode' data-field-id='$id' value='Add!'>";
echo "</td></tr>";
}
Javascript (using jQuery click event):
$('.submit-scode').click(function(){
var field_id = $(this).attr('data-field-id');
var scode = $("#"+field_id).val();
$.ajax({
type: 'POST',
url: 'insertsimplextoc_comp.php',
data: { simplexcode: scode },
});
});
Untested, but it should work.

Add the id of the current loop as a parameter to the addthis function:
echo "<input type='button' onclick='addthis(\"$id\")' value='Add!'>";
Then grab the id when the function is called like so:
function addthis(myID)
{
var scode = $("#"+myID).val();
//etc
}

have to keep track of that dynamic id's
It you have that id then you can do something like this
var id="assign php varable";
var scode =$('#'+id).val();

I'm guessing you want it to be used in the addthis() function ?
In this case, you'll hve to give a similar class to all your readonly inputs.
Then, while clicking on the add button, you'll have to check for its parent <tr>
I made some example here : http://jsfiddle.net/captain_torche/frzadnbb/
Or, you could alteratively put the ID as a parameter of the addthis() function, like so :
echo "<input type='button' onclick='addthis(".$id.")' value='Add!'>";

Problems with jquery click function firing twice

I have been googling for a couple of hours now, but I just can't figure it out. This is the script:
<script type="text/javascript">
$(document).ready(function(){
$('article').readmore({
maxHeight: 75,
speed: 300,
moreLink: 'Read more...',
lessLink: 'Read less...'
});
$('.plus-button').click(function(){
var postid = $(this).data('postid');
$(this).siblings('.minus-button').removeClass('disliked');
$(this).toggleClass('liked');
$.ajax({
type:"POST",
url:"php/votesystem.php",
dataType : 'html',
data:'act=like&postid='+postid,
context: this,
success: function(data){
$(this).html(data);
}
});
});
$('.minus-button').click(function(){
var postid = $(this).data('postid');
$(this).siblings('.plus-button').removeClass('liked');
$(this).toggleClass('disliked');
$.ajax({
type:"POST",
url:"php/votesystem.php",
dataType : 'html',
data:'act=dislike&postid='+postid,
context: this,
success: function(data){
$(this).html(data);
}
});
});
$("#infobox").click(function(){
$(this).hide();
});
});
$("#loader").hide();
var load = 0;
var nbr = "<?php echo $nbr; ?>";
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height())
{
$("#loader").show();
load++;
if(load * 10 > nbr){
$("#messages").text("No more posts");
$("#loader").hide();
}
else{
$.post("php/newquery.php",{load:load},function(data){
$("#contentwrapper").append(data);
$("#loader").hide();
$('.plus-button').on("click", function(){
var postid = $(this).data('postid');
$(this).siblings('.minus-button').removeClass('disliked');
$(this).toggleClass('liked');
$.ajax({
type:"POST",
url:"php/votesystem.php",
dataType : 'html',
data:'act=like&postid='+postid,
context: this,
success: function(data){
$(this).html(data);
alert("Liked");
}
});
});
$('.minus-button').on("click", function(){
var postid = $(this).data('postid');
$(this).siblings('.plus-button').removeClass('liked');
$(this).toggleClass('disliked');
$.ajax({
type:"POST",
url:"php/votesystem.php",
dataType : 'html',
data:'act=dislike&postid='+postid,
context: this,
success: function(data){
$(this).html(data);
alert("Disliked");
}
});
});
$('article').readmore({
maxHeight: 75,
speed: 300,
moreLink: 'Read more...',
lessLink: 'Read less...'
});
});
}
}
});
</script>
PS: Alerts are only used for troubleshooting.
The problem is that when the new items are loaded with the infinite scroll part of the script and I click the post items I get the alert "liked" or "disliked" twice each time I click either one of them. I do realize I have the script copied, but I need to have the script both inside and outside of the infinite scroll script for it to work. The article thing is just a read more plugin (also need this both inside and outside of infinite scroll). I have tried moving things around, but nothing seems to work. And to clarify: I only have problems after the new posts are loaded. The first posts outside infinite scroll works fine.
newquery.php
<?php
session_start();
require_once("connect.php");
require_once("config.php");
$load = htmlentities(strip_tags($_POST['load'])) * 10;
$query = mysqli_query($connect,"SELECT * FROM posts WHERE totalupvotes < $trendmin AND deleted=0 ORDER BY added DESC LIMIT " . $load . ",10");
while($row = mysqli_fetch_array($query)){
$postloopid = $row['id'];
echo '<div id="postlist">
<div style="width:400px; font-size:18px; font-weight:bold;">
<a target="_blank" href="post.php?id=' . $row['id'] . '">' . $row['title'] . '</a>
</div><br />
<article class="slide">' . nl2br($row['post']) . '</article>
<br />';
include("votebox.php");
echo '
<br />
by <a style="font-size:18px;" href="profile.php?id=' . $row['submittedby'] . '">' . $row['submitteduser'] . '</a>';
echo ' at <span style="font-size:12px;">' . $row['added'] . '</span><span style="float:right; margin-right: 10px;"><a target="_blank" href="post.php?id=' . $row['id'] . '#commentfield">' . $row['totalcomments'] . ' comments</a></span></div>';
}
?>
Votebox.php included in all the posts listed:
<?php
// If postid is from frontpage use $postloopid as $postid
if(isset($postloopid)){
$postid = $postloopid;
}
include("connect.php");
// If user logged in show votebox
if(isset($_SESSION['username'])){
$userid = $_SESSION['userid'];
$sql2 = mysqli_query($connect,"SELECT * FROM posts WHERE id='$postid' AND deleted=0");
if($sql2){
$voterow = mysqli_fetch_assoc($sql2);
$checkupvote = $voterow['upvoters'];
$checkdownvote = $voterow['downvoters'];
$checkupvote = explode(" ",$checkupvote);
$checkdownvote = explode(" ",$checkdownvote);
if($checkupvote = array_search($userid,$checkupvote) == true){
echo '<div class="voteboxwrapper">';
echo '<div class="plus-button liked" data-postid="' . $postid . '" name="like">+ ' . $voterow['totalupvotes'] . '</div>';
echo '<div class="minus-button" data-postid="' . $postid . '" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';
echo $postid;
echo '</div>';
}
elseif($checkdownvote = array_search($userid,$checkdownvote) == true){
echo '<div class="voteboxwrapper">';
echo '<div class="plus-button" data-postid="' . $postid . '" name="like">+ ' . $voterow['totalupvotes'] . '</div>';
echo '<div class="minus-button disliked" data-postid="' . $postid . '" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';
echo $postid;
echo '</div>';
}
else{
echo '<div class="voteboxwrapper">';
echo '<div class="plus-button" data-postid="' . $postid . '" name="like">+ ' . $voterow['totalupvotes'] . '</div>';
echo '<div class="minus-button" data-postid="' . $postid . '" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';
echo $postid;
echo '</div>';
}
}
else {
echo 'No result <br />';
}
}
else {
echo 'Cant find user';
}
?>
Any ideas?
EDIT: Have tried .off() and .unbind() all ways I could think of. I still get the double and triple popups of "liked" and "disliked" (supposed to be only 1). Any ideas except unbind and off?
EDIT2: Updated all scripts with new suggestions. Still don't work.

Instead of doing $('.plus-button').click(... you want to use $('.plus-button').one('click', ... which, as the name suggests, binds once and only once!
see the official docs

Try moving $(window).scroll..... outside of document ready function

Confirmationbox inside a php whileloop

I have a site where I can update my Database. In the same page I also have a tabel with the most importent information in the database. This tabel is generated by a php while loop, and at the end of each row I have a Edit-button and a Delete-button. But I want to have a confirmation to the deletebutton. But I dont knopw how..
This is my code:
mysql_connect("localhost","user","pass") or die (mysql_error());
mysql_select_db("kalender") or die(mysql_error());
$data = mysql_query("SELECT * FROM event where datum > now() ORDER BY `pub` DESC LIMIT 0, 40") or die(mysql_error());
echo '<table>';
echo '<tr>';
echo '<th>Nr</th> <th>V.</th> <th>Tid</th><th>Dag</th><th>Datum</th><th>Ändra</th><th>Ta bort</th>';
echo '</tr><tr>';
while($info = mysql_fetch_array( $data))
{
$eventTime=$info['datum'];
$tid= strtotime($eventTime);
echo '<td width="20px">' .$info['id'] . '</td>';
echo '<td width="20px">' .$info['vecka'] . '</td>';
echo '<td width="40px">' .date("H:i", $tid) . '</td>';
echo '<td width="40px">'.$info['dag'] . '</td>';
echo '<td width="50px">' .date("j M", $tid) . '</td>';
echo '<td width="70px"><button id="checkoutbutton" type="button"><Edit</button></td>';
echo '<td width="70px"><button id="checkoutbutton" type="button">Delete</button></td></tr>';
}
echo '</table>';
Please help me!

You try this.
In PHP Script:
Update this in while loop
...
...
$tempId = $info['id'];
echo "<td width='70px'><a href='javascript:;' onClick='go_edit($tempId);'><input type='button' value='Edit'/></a></td>";
echo "<td width='70px'><a href='javascript:;' onClick='go_del($tempId);'><input type='button' value='Delete'/></a></td>";
...
...
In Javascript:
Add these functions in under php script
<script>
function go_edit(id) {
window.location.href = "http://kalend.mizgalski.se/update.php?id="+id;
}
function go_del(id) {
var choice = confirm('Are you sure want to delete?');
if(choice) {
window.location.href = "http://kalend.mizgalski.se/delete?id="+id;
}
}
</script>

You can do confirmation using javascript on the client side before sending data to the server