Jump to content

Javascript moving buttons and adding their ids to a var


Adamhumbug

Recommended Posts

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;
}

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 weeks later...

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>

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.