Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts

    jQuery Sortable Issue

    I kind of have a 2-for here:

    CodePen Project

    I’m using the jQuery UI Sortable plugin. I have table#manage-pt set to sortable, however what would I add to the code to…
    • Make sortbale ONLY when there’s more than 1 table#manage-pt present?
    • Remove sortable attribute when table#manage-pt it open?

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    if you have more than one table with the same ID present, you've got a very basic problem from the get go, ID's are unique....

    Code:
    if ($(".elementclass).size() > 1) {
    
    //do something 
    }

  • Users who have thanked DanInMa for this post:

    Psionicsin (09-06-2013)

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Ah i see. well, first off it the selector should be .manage-pt not table#manage-pt ( also you dont need the element tag in the front if the element has an id in the first place) so..

    Code:
    if ($(".manage-pt").size() > 1) {
    
    $(".manage-pt").sortable();
    }
    not quite sure what yo mean by open, though, they arent hidden so I don't understand that part.

    * Also you appear to be assigning numbers as the ID's for your tables, this is invalid HTML, ID's cannot start with a number

  • Users who have thanked DanInMa for this post:

    Psionicsin (09-06-2013)

  • #4
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    Ah i see. well, first off it the selector should be .manage-pt not table#manage-pt ( also you dont need the element tag in the front if the element has an id in the first place) so..

    Code:
    if ($(".manage-pt").size() > 1) {
    
    $(".manage-pt").sortable();
    }
    not quite sure what yo mean by open, though, they arent hidden so I don't understand that part.

    * Also you appear to be assigning numbers as the ID's for your tables, this is invalid HTML, ID's cannot start with a number
    Ok I was thoroughly confused with your statement of "...not table#manage-p..." at first, but now I see what you're talking about. I typed #manage-p here, but in the code it's .manage-p as it should be. Not sure why I did that.

    What I mean by open is the toggle button. When the toggle button is clicked, everything underneath becomes hidden, essentially "closed" to our eyes.

    And the IDs are only for JavaScript and Oracle to latch onto. Since nothing but those are going to be targeting those IDs, I figured it wouldn't hurt AND allows me to really see what's going on during this heavy testing phase.

  • #5
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    Code:
    if ($(".manage-pt").size() > 1) {
    
    $(".manage-pt").sortable();
    }
    Had to alter it a tad, but thanks, that worked. The final function was:

    Code:
          if ($(".manage-pt").size() > 1) {
            $('#p_scents').sortable(
    			  {
    				  disabled: false,
    				  placeHolder: '.placeHolderHighlight',
    				  handle: '.icon-sort',
    			  });
          };
    I learning jQuery as I code, so I have nothing set to memory yet lol.

  • #6
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    DARN! I've done something else wrong, and can't figure out what...

    I know it has something to do with "$(hiddenarea).toggle();". It was originally "$(hiddenarea).toggle(function());", however JSLint kept telling me that I was wrong in this area. Now I'm totally lost all together.

    Code:
    $(function () {
    	var i = 1;
    	//ADD ROW FUNCTION 
    	$('body').on('click', '.addPTbutton', function () {
    		var box = '<table class="manage-pt" id="' + i + '"><tr class="pt-entry"><td class="pt-toggle-group"><input class="pt-button togPTbutton" id="0" type="button" value="▾"><input class="pt-button addPTbutton" id="0" type="button" value="+"><input class="pt-button delPTbutton" id="' + i + '" type="button" value="-"></td><td class="pt-values"><div><input class="vendor" placeholder="*Vendor Name" type="text"><i class="icon-sort"></i><i class="icon-lock"></i></div><div><textarea class="ptCode" name="ptCode" placeholder="*Pixel Tag Code"></textarea></div><div class="page-select"><select><option value="AllPages">All Pages</option><option value="HomePage">HomePage</option><option value="VehicleDetailsPage">VehicleDetailsPage</option><option value="VehicleSearchResults">VehicleSearchResults</option><option value="ContactUsForm">ContactUsForm </option></select></div><div class="area-checkboxes"><p class="wheretosave">*Where?</p><input name="head" type="checkbox"><label for="head">Head</label><input name="body" type="checkbox"><label for="body">Body</label></div><div class="save-pt"><input type="submit" value="SAVE"></div></td></tr></table>';
    		i++;
    		$("#p_scents").append(box);
    		return false;
    	});
    	//DELETE ROW FUNCTION
    	$('body').on('click', '.delPTbutton', function () {
    		var boxnum = $(".manage-pt").length;
    		if (boxnum <= '1') {
    			alert('Cannot Delete Last Remaining Row');
    		} else {
    			$(this).parents().eq(3).remove();
    		}
    		return false;
    	});
    	//TOGGLE BUTTON
    	$('body').on('click', '.togPTbutton', function () {
    		var hiddenarea = $(this).parent().next().children().next();
    		if ($(hiddenarea).is(':hidden')) {
    			//OPENED
    			$(this).val('▾');
    			$(this).parent().next().children(0).children(0).attr('readonly', false);
    		} else {
    			//HIDDEN
    			$(this).val('▸');
    			$(this).parent().next().children(0).children(0).attr('readonly', true);
    			//CHECKS FOR MORE THAN ONE 1 MANAGE-PT BEFORE ENABLES SORTABLE
    			if ($(".manage-pt").size() > 1) {
    				$('#p_scents').sortable({
    					disabled: false,
    					placeHolder: '.placeHolderHighlight',
    					handle: '.icon-sort'
    				});
    				$('#p_scents').sortable({
    					disabled: true
    				});
    			}
    			//TOGGLES VISIBILITY OF HIDDEN AREA
    			$(hiddenarea).toggle();
    		}
    		//CHECKS TO MAKE SURE ONLY ONE CHECKBOX IS SELECTED
    		var $onlyOne = $('input.onlyOne');
    		$onlyOne.click(function () {
    			$onlyOne.filter(':checked').not(this).removeAttr('checked');
    		});
    	});
    });

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok took me a second, but looks liek it should be hiddenarea.toggle(); , not $(hiddenarea).toggle(); hiddenarea is already a jQuery object

  • Users who have thanked DanInMa for this post:

    Psionicsin (09-06-2013)

  • #8
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    ok took me a second, but looks liek it should be hiddenarea.toggle(); , not $(hiddenarea).toggle(); hiddenarea is already a jQuery object
    That works a lot better. I had some weird convoluted line of code there as I'm always tinkering with it. Thanks.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •