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 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2013
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Get content of dropdown and sortable list

    Hi,

    currently I work on some project.
    \The project is simple, the user vists page, sees the dorp down list and sortable list of some plans.

    Then the user chooses one of the items form the drop down list and also using sortable list ordeds the items accoridng to his/her priority.

    Finally the user submits his/her chosen value from th drop down list and ordered priorities using simple text box, which is sent to predefined mail.


    I made two select drop down list using javascript and simple sortable list, but as far as I am new to JS and I could not identify how to tell the code to get the chosen value from the dop down list and ordered priority by the user and submit them autoamtically with comment written in the text box by the user.

    I know the for mailing purposes PHP must be used, but first I have to find out how to get the last content chosen by the user?

    Please help on this issue, any help will be appreciated.



    Code:
    <head>
    
    <style>
    
    
    		.connected, .sortable, .exclude, .handles {
    	
    			width: 100%;
    		
    
    		   /*-webkit-touch-callout: none;
    			-webkit-user-select: none;
    			-khtml-user-select: none;
    			-moz-user-select: none;
    			-ms-user-select: none;
    			user-select: none  */
    		}
    		.sortable.grid {
    			overflow: hidden;
    		}
    		.connected li, .sortable li, .exclude li, .handles li {
    			list-style: none;
    			border: 1px solid #CCC;
    			background: #F6F6F6;
    			font-family: "Tahoma";
    			color: #1C94C4;
    			margin: 5px;
    			padding: 5px;
    			height: 45px;
    			width:100%;
    		
    			 
    		}
    		.handles span {
    			cursor: move;
    		}
    		li.disabled {
    			opacity: 0.5;
    		}
    		.sortable.grid li {
    			line-height: 80px;
    			float: left;
    			width: 80px;
    			height: 80px;
    			text-align: center;
    		}
    		li.highlight {
    			background: #FEE25F;
    		}
    		#connected {
    			width: 440px;
    			overflow: hidden;
    			margin: auto;
    		}
    		.connected {
    			float: left;
    			width: 200px;
    		}
    		.connected.no2 {
    			float: right;
    		}
    		li.sortable-placeholder {
    			border: 1px dashed #CCC;
    			background: none;
    		}
    		</style>
    
    <script>
    (function($) {
    var dragging, placeholders = $();
    $.fn.sortable = function(options) {
    	var method = String(options);
    	options = $.extend({
    		connectWith: false
    	}, options);
    	return this.each(function() {
    		if (/^enable|disable|destroy$/.test(method)) {
    			var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable');
    			if (method == 'destroy') {
    				items.add(this).removeData('connectWith items')
    					.off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
    			}
    			return;
    		}
    		var isHandle, index, items = $(this).children(options.items);
    		var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">');
    		items.find(options.handle).mousedown(function() {
    			isHandle = true;
    		}).mouseup(function() {
    			isHandle = false;
    		});
    		$(this).data('items', options.items)
    		placeholders = placeholders.add(placeholder);
    		if (options.connectWith) {
    			$(options.connectWith).add(this).data('connectWith', options.connectWith);
    		}
    		items.attr('draggable', 'true').on('dragstart.h5s', function(e) {
    			if (options.handle && !isHandle) {
    				return false;
    			}
    			isHandle = false;
    			var dt = e.originalEvent.dataTransfer;
    			dt.effectAllowed = 'move';
    			dt.setData('Text', 'dummy');
    			index = (dragging = $(this)).addClass('sortable-dragging').index();
    		}).on('dragend.h5s', function() {
    			dragging.removeClass('sortable-dragging').show();
    			placeholders.detach();
    			if (index != dragging.index()) {
    				items.parent().trigger('sortupdate', {item: dragging});
    			}
    			dragging = null;
    		}).not('a[href], img').on('selectstart.h5s', function() {
    			this.dragDrop && this.dragDrop();
    			return false;
    		}).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) {
    			if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) {
    				return true;
    			}
    			if (e.type == 'drop') {
    				e.stopPropagation();
    				placeholders.filter(':visible').after(dragging);
    				return false;
    			}
    			e.preventDefault();
    			e.originalEvent.dataTransfer.dropEffect = 'move';
    			if (items.is(this)) {
    				if (options.forcePlaceholderSize) {
    					placeholder.height(dragging.outerHeight());
    				}
    				dragging.hide();
    				$(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
    				placeholders.not(placeholder).detach();
    			} else if (!placeholders.is(this) && !$(this).children(options.items).length) {
    				placeholders.detach();
    				$(this).append(placeholder);
    			}
    			return false;
    		});
    	});
    };
    })(jQuery);
    
    </script>
    
    </head>
    <body>
    
    <ul class="sortable">
        
                <li> Item 1
                <li> Item 2
                <li> Item 3
                <li>Item 4
                <li> Item 5
                <li>Item 6
                <li> Item 7
                <li> Item 8
                <li> Item 9
                <li>Item 10
                </ul>                    
    <script>
        $('.sortable').sortable();
      </script>
    
    </body>

    Thank you.
    Last edited by G.Bregvadze; 12-14-2013 at 07:31 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Your code is missing calls to Jquery and the plug-in or plug-ins your using. Your also missing a doctype. Please include these and repost.
    Evolution - The non-random survival of random variants.

  • #3
    New Coder
    Join Date
    Dec 2013
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you for the response, I will repost all the code, as soon as possible.

  • #4
    New Coder
    Join Date
    Dec 2013
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts
    As far as large code must be posted here, to avoid this, I have zipped the HTML index file with calling required JS and CSS files.

    Please find the attachment below and run the code.





    Thank you.
    Attached Files Attached Files

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    @G.Bregvadze, This guy farhadi is messing you up with what he gave you. It is allways best to go to the source (jquery) when you what something. Jquery has a plug in called UI that does a whole lot of things. What I like about it is, you can just use the parts you need without all the other overhead. Wish they would do that for their regular jquery files.
    Go here http://jqueryui.com/download/#!versi...00000000000000
    The site will have a bunch of select boxes. Click Toggle All, the top one, OFF. Then look down the list til you find Sortable in the last row of the second box. Check it, a couple of other boxes will check. go to bottom of page and select No Theme in dropdown and click the download box.

    The demo is here http://jqueryui.com/sortable/ with the HTML.

    FYI: Your HTML has a bunch of unused things in it. Remove them and Put the textarea and submit button into the first form, and get rid of the second form. Set the form attributes.

    Do these things first and come back if you have problems.
    See you then.
    Evolution - The non-random survival of random variants.

  • #6
    New Coder
    Join Date
    Dec 2013
    Posts
    21
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I understand your directions provided above in the post, but this zip file is an exctract from my whole page, that is why it contains some additional or bunch of things, but only problem which I need to solve is using javascript code or any other method to get the updated data from selectable drop down list and sortable list which can be submitted using the textbox.


  •  

    Posting Permissions

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