Jump to content

Allow limited item to add from one list to another


Raktim

Recommended Posts

sir/madam,

                  I try to making a project that can "Allow only 3 items to add from one list to another"  

here  IS MY CODE:-

HTML CODE:-

<!DOCTYPE html>

<html>
    <head>
        <title>jQuery click UI</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style-click.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
        <script src="click.js"></script>
    </head>
    
    <body>
        <h1>jQuery click UI</h1>
        <div id="left">
            <h2>Available today</h2>
            <ul id="available">
                
				<li id='2'>bananas</li>
				<li id='10'>strawberries</li>
				<li id='11'>mangoes</li>
				<li id='12'>raspberries</li>            </ul>
            <div class="instructions" id="instructions-remove">
                Click to remove fruits from available list
            </div>
        </div>
        <div id="right">
            <h2>Out of stock</h2>
            
            <ul id="out-of-stock">
               	<li id='1'>apples</li>
				<li id='3'>grapes</li>
				<li id='4'>pomegranates</li>
				<li id='5'>pineapples</li>
				<li id='6'>coconuts</li>
				<li id='7'>oranges</li>
				<li id='8'>cherries</li>
                <li id='9'>kiwi fruit</li>            </ul>
            <div class="instructions" id="instructions-add">
                Click to add fruits to available list
            </div>            
        </div>
</html>

JS CODE:-

$(document).ready(function() { // begin document ready
	$('#instructions-add').hide();
	$('#instructions-remove').hide();
	
	$("ul#available").mouseover(function() {
		$('#instructions-remove').show();
		$('#instructions-add').hide();
	});

	$("ul#out-of-stock").mouseover(function() {
		$('#instructions-add').show();
		$('#instructions-remove').hide();
	});	

	$(document).on('click', '#available li', function() {  // begin left side click 
		var id = $(this).attr('id');
        var available = 'no';
		$(this).remove();
		$("#out-of-stock").append(this);
		$.ajax({ // begin ajax
		   url: "ajax/click.ajax.php",
		   type: "GET",
		   data: {
			'id': id,
			'available' : available
			}, 
		}); // end ajax
	}); // end left side click

	$(document).on('click', '#out-of-stock li', function() {  // right side click
		var id = $(this).attr('id');
		var available = 'yes';
		$(this).remove();
		$("#available").append(this);
		$.ajax({ // begin ajax
		   url: "ajax/click.ajax.php",
		   type: "GET",
		   data: {
			'id': id,
			'available' : available
			}, 
		}); // end ajax
	}); // end right side click

	$('li').on('mouseover',function() {
		$(this).css(
			{
				'backgroundColor' : 'black',
				'color' : 'white'
			}
		);
	}).on('mouseout' ,function() {
		$('li').css(
			{
				'backgroundColor' : '',
				'color' : ''
			}
		)
	});
	
}); // end document ready

ezgif.com-video-to-gif(1).gif.ac2615708d2c7b40dc465c3ed596fe55.gif

Problem occur:- If I click one by one item from "out of stock" list, then it's possible to add more than 3 even all items in the "Available today" list.

What I Need:-I need that user can't add more than 3 items in the "Available today" list from "out of stock".

                                                                   PLEASE HELP ME   !!!!!     THANK YOU     !!!!!!                                                                                                    

 

 

 

 

Edited by Raktim
Link to comment
Share on other sites

Set a click count variable outside 'Out of stock' click function. Within the click function increment the click count variable by 1 for each running of this function, then use an if condition to proceed with removal of an item only when click count is less than a set amount. You could reset the click count variable to 0 if a item is clicked in 'Available today' listing.

  • Like 1
Link to comment
Share on other sites

My Target:- User can't add more than 3 Item in "Available today" list from "out-of-stock" list.

HTML code of "Available-today" list

		<div id="left">
            <h2>Available today</h2>
            <ul id="available">
            </ul>
            <div class="instructions" id="instructions-remove">
                Click to remove fruits from available list
            </div>
        </div>

HTML code of "out-of-stock" list

<div id="right">
<h2>Out of stock</h2>
<ul id="out-of-stock">
<li id='2'>bananas</li>
<li id='10'>strawberries</li>
<li id='11'>mangoes</li>
<li id='12'>raspberries</li>    
<li id='1'>apples</li>
<li id='3'>grapes</li>
<li id='4'>pomegranates</li>
<li id='5'>pineapples</li>
<li id='6'>coconuts</li>
<li id='7'>oranges</li>
<li id='8'>cherries</li>
<li id='9'>kiwi fruit</li>         
</ul>
<div class="instructions" id="instructions-add">
Click to add fruits to available list
</div>            
</div>

I try a JS code that if 3 items already added in the "Available today" then user click any item in "out-of-stock" it's check how many item added in "Available today" and it it's 3 alert shows and disable all remaining items in "out-of-stock".

But the code can't work properly!

Problem:- If user click any item in "out-of-stock" after  3 items add in "Available today" list it's shows alert but user can able to add more item even all in "Available today" list.

My Js code

     <script>
            $("li").click(function()
            {
                if ( $('#left ul li').size()==3 ) {
                alert('success');
                document.getElementById("#right ul li").disabled = true;
                }
            });

        </script>

can have any idea how i fix it. If, YES please solve it with code...........THANK YOU

Edited by Raktim
Link to comment
Share on other sites

According to "justsomeguy" order I post all The code that involve in the process....

My Target:- User can't add more than 3 Item in "Available today" list from "out-of-stock" list.

HTML code

<html>
    <head>
        <title>jQuery click UI</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style-click.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
        <script src="click.js"></script>    
    </head>
    
    <body>
        <h1>jQuery click UI</h1>
        <div id="left">
            <h2>Available today</h2>
            <ul id="available">
            </ul>
            <div class="instructions" id="instructions-remove">
                Click to remove fruits from available list
            </div>
        </div>
       
      	<div id="right">
            <h2>Out of stock</h2>
            <ul id="out-of-stock">
               	<li id='2'>bananas</li>
				<li id='10'>strawberries</li>
				<li id='11'>mangoes</li>
				<li id='12'>raspberries</li>    
                <li id='1'>apples</li>
				<li id='3'>grapes</li>
				<li id='4'>pomegranates</li>
				<li id='5'>pineapples</li>
				<li id='6'>coconuts</li>
				<li id='7'>oranges</li>
				<li id='8'>cherries</li>
                <li id='9'>kiwi fruit</li>         
            </ul>
            <div class="instructions" id="instructions-add">
                Click to add fruits to available list
            </div>            
        </div>
  </body>
</html>

Js code of "click.js"

//code to add/remove li item between two list
$(document).ready(function() { // begin document ready
	$('#instructions-add').hide();
	$('#instructions-remove').hide();
	
	$("ul#available").mouseover(function() {
		$('#instructions-remove').show();
		$('#instructions-add').hide();
	});

	$("ul#out-of-stock").mouseover(function() {
		$('#instructions-add').show();
		$('#instructions-remove').hide();
	});	

	$(document).on('click', '#available li', function() {  // begin left side click 
		var id = $(this).attr('id');
        var available = 'no';
		$(this).remove();
		$("#out-of-stock").append(this);
		$.ajax({ // begin ajax
		   url: "ajax/click.ajax.php",
		   type: "GET",
		   data: {
			'id': id,
			'available' : available
			}, 
		}); // end ajax
	}); // end left side click

	$(document).on('click', '#out-of-stock li', function() {  // right side click
		var id = $(this).attr('id');
		var available = 'yes';
		$(this).remove();
		$("#available").append(this);
		$.ajax({ // begin ajax
		   url: "ajax/click.ajax.php",
		   type: "GET",
		   data: {
			'id': id,
			'available' : available
			}, 
		}); // end ajax
	}); // end right side click

	$('li').on('mouseover',function() {
		$(this).css(
			{
				'backgroundColor' : 'black',
				'color' : 'white'
			}
		);
	}).on('mouseout' ,function() {
		$('li').css(
			{
				'backgroundColor' : '',
				'color' : ''
			}
		)
	});
	
}); // end document ready
//code to add/remove li item between two list end here



//check if "available today" already added 3 items then disable all item in "out-of-stock" and not allow to click
$("li").click(function()
            {
                if ( $('#left ul li').size()==3 ) {
                alert('success');
                document.getElementById("out-of-stock").disabled = true;
                }
            });
I try a JS code that if 3 items already added in the "Available today" then user click any item in "out-of-stock" it's check how many item added in "Available today" and it it's 3 alert shows and disable all remaining items in "out-of-stock".

But the code can't work properly!

Problem:- If user click any item in "out-of-stock" after  3 items add in "Available today" list it's shows alert but user can able to add more item even all in "Available today" list.

can have any idea how i fix it. If, YES please solve it with code...........THANK YOU

Edited by Raktim
Link to comment
Share on other sites

Non of those prevent the 'out of stock' function running and removing list item and adding it to 'available today' listing. You don't want to stop the click and function running, but only the code that removes/add when a certain condition is met.

That IF condition is when the count of how many times the remove/add function is triggered and if it is 3 or greater, this condition will process or bypass the remove and add  processing.

You are looking for this code NOT being processed if count >=3

var id = $(this).attr('id');
		var available = 'yes';
		$(this).remove();
		$("#available").append(this);
		$.ajax({ // begin ajax
		   url: "ajax/click.ajax.php",
		   type: "GET",
		   data: {
			'id': id,
			'available' : available
			}, 
		}); // end ajax

NOTE: .disable only works on form elements, also size() is no longer used, instead 'length' is used, and using this won't help as it gives total of items not how many added or removed.

It would only work if you first identify the total number of items in 'Available today' OR 'Out of stock' and apply to a variable like totalAtStart then compare that on each removal or addition if that total is greater of less that the number store in variable totalAtStart -3 or +3 the set value.

 

 

  • Confused 1
Link to comment
Share on other sites

 

var OoScount=0;
$(document).on('click', '#out-of-stock li', function() {  // right side click
    OoScount++;
  if(OoScount <= 3){
  var id = $(this).attr('id');
        var available = 'yes';
        $(this).remove();
        $("#available").append(this);
        $.ajax({ // begin ajax
           url: "ajax/click.ajax.php",
           type: "GET",
           data: {
            'id': id,
            'available' : available
            },
        }); // end ajax
  }
    }); // end right side click

OR

      	<div id="right">
            <h2>Out of stock</h2>
            <ul id="out-of-stock" class="enabled">
               	<li id='2'>bananas</li>
				<li id='10'>strawberries</li>
				<li id='11'>mangoes</li>
				<li id='12'>raspberries</li>    
                <li id='1'>apples</li>
				<li id='3'>grapes</li>
				<li id='4'>pomegranates</li>
				<li id='5'>pineapples</li>
				<li id='6'>coconuts</li>
				<li id='7'>oranges</li>
				<li id='8'>cherries</li>
                <li id='9'>kiwi fruit</li>         
            </ul>
            <div class="instructions" id="instructions-add">
                Click to add fruits to available list
            </div>            
        </div>
var OoScount=0;
$(document).on('click', '#out-of-stock.enabled li', function() {  // right side click
    OoScount++;
  
  var id = $(this).attr('id');
        var available = 'yes';
        $(this).remove();
        $("#available").append(this);
        $.ajax({ // begin ajax
           url: "ajax/click.ajax.php",
           type: "GET",
           data: {
            'id': id,
            'available' : available
            },
        }); // end ajax
if(OoScount >= 3){
$('#out-of-stock').removeClass('enabled');
$('#out-of-stock').addClass('disabled'); //not really needed but can used to highlight as diabled with disabled cursor for instance
  }
    }); // end right side click

 

  • Thanks 1
Link to comment
Share on other sites

Thanks "dsonesuk" to provide me the code.....but it not working properly.

Problem occur : After 3 items added then if user click any items in the "Available today" list it's remove but then would not be possible add items from "out-of-stock". Imagine after remove total item in "available today" is 2 then user can't add 1 item.

I update My Js code and join just simply code. When user click any items in the "out-of-stock" then it check total number of added items item in the "available today" list. IF, it is less than 3 then it permit to execute the function to add the clicked item in the "available today" list. If it  3 then it stop the function to be execute. Here is my code where i do this process.

$(document).on('click', '#out-of-stock li', function() {  // right side click
		if ( $('#left ul li').size()==3 ) {
            alert ("YOU can only add 3 items!");
            return;
        }
        var id = $(this).attr('id');
		var available = 'yes';
		$(this).remove();
		$("#available").append(this);
		$.ajax({ // begin ajax
		   url: "ajax/click.ajax.php",
		   type: "GET",
		   data: {
			'id': id,
			'available' : available
			}, 
		}); // end ajax
	}); // end right side click

Thank you for help me......

Edited by Raktim
Link to comment
Share on other sites

You didn't ask for that! you asked specifically not to allow more than 3 from 'Out of stock.' I already knew that would be a problem as that would prevent any further action from removing from 'Out of stock' listing, thats why I suggested if any item clicked in the 'available items' listing, it should reset the count, but you repeated you just wanted to prevent going above 3. What you would also need is to determine if there was requred total listing as well.in either listing within the if condition.

 Already mentioned that

if ( $('#left ul li').size()==3 )

Is not practical because, yes! it will give allert if size() (Still deprecated and not used anymore) is equal to 3, but WILL still continue if total number of list items exceed beyond 3 without a alert.

  • Like 1
Link to comment
Share on other sites

Sir, I think I clearly described MY TARGET in previous message...

On 8/1/2018 at 1:46 PM, Raktim said:

My Target:- User can't add more than 3 Item in "Available today" list from "out-of-stock" list.

I try a JS code that if 3 items already added in the "Available today" then user click any item in "out-of-stock" it's check how many item added in "Available today" and it it's 3 alert shows and disable all remaining items in "out-of-stock" otherwise keep enabled.

 
Link to comment
Share on other sites

sir, I want to upgrade my code and change one in the code. So, I change my target.

My old Target:- User can't add more than 3 Item in "Available today" list from "out-of-stock" list.

My new Target:- User can't add more than 3 Item in "Available today" list from "out-of-stock" list. If, user select any text items in "out-of-stock" then it add in the "available today" list as picture. then if user click this picture in "available today" then it come back to "out-of-stock" as text.

Example:-

Let, user click "apple" text in "out-of-stock" it add "available today" list with "apple picture"...if, user click again the "apple picture" from "available today" if will come back in "out-of-stock" as text....

Have any Idea how I change it? Please Help Me....

 

Link to comment
Share on other sites

You will need a identifier for every listing for an image that be associated with that item, then count number of items sent to "available today" if less than or equal to '3' send text, else replace text with image that is associated with it, using the identifier for that item.

Good luck!

  • Like 1
Link to comment
Share on other sites

Sure! lets see how far you got so far. I mean I have no idea what you are going to use as a identifier for a specific image, or the image folder path you will use, also you will need to store original text when required. So I will use what you have got so far covering these details to produce a solution. Of course if you have nothing! I can't/won't help!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...