Javascript moving buttons and adding their ids to a var

[Adamhumbug]

Hi, i have a search box that when searched brings back names of people in the form of a button.  This is ajax.

When you click a button with names on, the button gets moved with JS.

I would like to be able to collect the ids of the butons that are clicked and put them back into the php function that gets them in the first place.

Once they have been clicked, they shouldnt appear in the search results.

 

Ajax and JS that moves the button

	$('#searchForPeopleBox').keyup(function(){
		var searchVal = $(this).val()
		console.log(searchVal)
		$.ajax({
			type: 'post',
			data: {"ajax" : 'one', "val" : searchVal},
			success: function(resp){
				$('#searchResultsHere').html(resp)
			}
		})
	});




	function tagInArticle($pid){
		var tagButton = $('.tagInArticle'+$pid)

		tagButton.appendTo('#taggedInArticleContainer')

		
	};

My PHP function to get the results

function searchForPeople($searchVal){

	$sv1 = $searchVal;
	$sv2 = $searchVal;
	$ids = '';

	include 'includes/dbconn.php';
	$out ="";

	$stmt = $conn -> prepare("
	                         SELECT fname, lname, id
	                         FROM person 
	                         WHERE id != ? 
	                         AND (fname LIKE CONCAT('%',?,'%') OR lname LIKE CONCAT('%',?,'%'))
	                         ");
	$stmt -> bind_param('sss', $ids, $sv1, $sv2);
	$stmt -> execute();
	$stmt -> bind_result($fn, $ln, $pid);

	while($stmt -> fetch()){
		$out .= "<div class='btn btn-primary m-1 tagInArticle$pid' onclick='tagInArticle($pid)'>$fn $ln</div>";
	}

	return $out;
}

 

[kicken]

You need to have the ID isolated in the html so it's easier to find and work with.  Best way to do that is to add it as a data attribute like so

echo "<div class='btn btn-primary m-1 tagInArticle' data-id='$pid'>$fn $ln</div>";

Notice I also removed the onclick.  Rather than having every button define it's own click handler, you can use jQuery's event delegation to handle it.

$('#searchResultsHere').on('click', '.tagInArticle', function tagInArticle(){
	var tagButton = $(this);
	tagButton.appendTo('#taggedInArticleContainer')
});

No need to even mess with the ID there now, you can just reference the button directly using this and move it.

Now, when searching you just gather up all the IDs from the buttons in #taggedInArticleContainer and submit them with your request.

$('#searchForPeopleBox').keyup(function(){
  var searchVal = $(this).val()
  var tagged = $('#taggedInArticleContainer').find('.tagInArticle').map(function(){
	return $(this).data('id');
  }).get();
  $.ajax({
    type: 'post',
    data: {"ajax" : 'one', "val" : searchVal, exclude: tagged},
    success: function(resp){
    	$('#searchResultsHere').html(resp)
    }
  });
});

	

Finally, update your PHP search to account for $_POST['exclude'] when performing a search.

[Adamhumbug]

Sorry its been a while.

This nearly works but i get:

Quote

Undefined index: exclude in /Users/adamhewitt/Documents/Adam/Sites/ONLINE/LIVE/BTCC/admin-new-news.php on line 19

Which is this line

exit(searchForPeople($_POST['val'], $_POST['exclude']));

Here is a code dump

<?php
if(isset($_POST['ajax'])){
	switch($_POST['ajax']) {
		case 'one':
		exit(searchForPeople($_POST['val'], $_POST['exclude']));
		break;
	}
}

function searchForPeople($searchVal, $exclude = 0){

	$sv1 = $searchVal;
	$sv2 = $searchVal;

	include 'includes/dbconn.php';
	$out ="";

	$stmt = $conn -> prepare("
	                         SELECT fname, lname, id
	                         FROM person 
	                         WHERE id != ? 
	                         AND (fname LIKE CONCAT('%',?,'%') OR lname LIKE CONCAT('%',?,'%'))
	                         ");
	$stmt -> bind_param('sss', $exclude, $sv1, $sv2);
	$stmt -> execute();
	$stmt -> bind_result($fn, $ln, $pid);

	while($stmt -> fetch()){
		$out .= "<div class='btn btn-primary m-1 tagInArticle$pid' data-id='$pid'>$fn $ln</div>";
	}

	return $out;
}

?>

							<div id="searchResultsHere">
								<!-- ajax content here -->
							</div>
							<div>Tagged</div>
							<div id="taggedInArticleContainer">
								<!-- ajax content here -->
							</div>
					
<script>

	$('#searchResultsHere').on('click', '.tagInArticle', function tagInArticle(){
		var tagButton = $(this);
		tagButton.appendTo('#taggedInArticleContainer')
	});

	$('#searchForPeopleBox').keyup(function(){
		var searchVal = $(this).val()
		var tagged = $('#taggedInArticleContainer').find('.tagInArticle').map(function(){
			console.log(tagged)
		return $(this).data('id');
  		}).get();
		console.log(searchVal)
		$.ajax({
			type: 'post',
			data: {"ajax" : 'one', "val" : searchVal, "exclude" : tagged},
			success: function(resp){
				$('#searchResultsHere').html(resp)
			}
		})
	});

	


</script>

 

[Adamhumbug]

The sent payload of the ajax is

    ajax=one&val=John+Sm

Nothing is mentioned about the exclude data.  When i console log tagged after searchval i get a blank array

[Adamhumbug]

I have made some changes and now have this in there to deal with the Undefined Index.

I am now getting array to string conversion errors in the WHERE id != ?

[Adamhumbug]

I fixed this by using the following:

 

WHERE id NOT IN (".implode(',', array_map('intval', $exclude)).")