Raktim Posted July 29, 2018 Share Posted July 29, 2018 (edited) 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 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 July 29, 2018 by Raktim Link to comment Share on other sites More sharing options...
dsonesuk Posted July 30, 2018 Share Posted July 30, 2018 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. 1 Link to comment Share on other sites More sharing options...
justsomeguy Posted July 30, 2018 Share Posted July 30, 2018 You can also get the list of li items in the list and use that to check the count. 1 Link to comment Share on other sites More sharing options...
Raktim Posted July 31, 2018 Author Share Posted July 31, 2018 (edited) 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 July 31, 2018 by Raktim Link to comment Share on other sites More sharing options...
justsomeguy Posted July 31, 2018 Share Posted July 31, 2018 You need to show all of the code involved in the process. Link to comment Share on other sites More sharing options...
Raktim Posted August 1, 2018 Author Share Posted August 1, 2018 (edited) 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 August 1, 2018 by Raktim Link to comment Share on other sites More sharing options...
dsonesuk Posted August 1, 2018 Share Posted August 1, 2018 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. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 1, 2018 Share Posted August 1, 2018 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 1 Link to comment Share on other sites More sharing options...
Raktim Posted August 1, 2018 Author Share Posted August 1, 2018 (edited) 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 August 1, 2018 by Raktim Link to comment Share on other sites More sharing options...
dsonesuk Posted August 1, 2018 Share Posted August 1, 2018 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. 1 Link to comment Share on other sites More sharing options...
Raktim Posted August 2, 2018 Author Share Posted August 2, 2018 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 More sharing options...
Raktim Posted August 2, 2018 Author Share Posted August 2, 2018 Sir, I honestly want to know why .size() practically not use? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 2, 2018 Share Posted August 2, 2018 4 hours ago, Raktim said: Sir, I honestly want to know why .size() practically not use? https://api.jquery.com/size/ 1 Link to comment Share on other sites More sharing options...
Raktim Posted August 3, 2018 Author Share Posted August 3, 2018 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 More sharing options...
dsonesuk Posted August 3, 2018 Share Posted August 3, 2018 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! 1 Link to comment Share on other sites More sharing options...
Raktim Posted August 4, 2018 Author Share Posted August 4, 2018 Sir, Can you help me with code to "replace text with image and vice-versa".. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 4, 2018 Share Posted August 4, 2018 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 More sharing options...
Raktim Posted August 4, 2018 Author Share Posted August 4, 2018 OK, Sir....I try to ready the code Link to comment Share on other sites More sharing options...
Raktim Posted August 5, 2018 Author Share Posted August 5, 2018 sir, I Try to do it but i fail because i have no idea how i "replace text by image"... can you give any idea with example to replace text by image?.... Link to comment Share on other sites More sharing options...
dsonesuk Posted August 5, 2018 Share Posted August 5, 2018 Lets see how far you got Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now