jQuery-ui Sortable Portlets in Passing Array to php

Question

jcanaway 0 Junior Poster in Training

15 Years Ago

alright i am working on jQuery - UI Sortable Portlets and im trying to pass serialize on to the php so i can update my database with each displays column, and position so it will save for my users i have what I've done so far below if anyone know how to do this or know anywhere i can go to learn how to do this i would greatly appreciate it because i have several pages that i need to use this with also dose any know how to make the content area disabled from dragging so you can select text and use forms in them because i just want it where you start drag from is the header of each display not the whole display this is the display

Display Here

<div id="comp_widgets" class="portlet">
      <div class="portlet-header">Widgets</div>
      <div class="portlet-content content">This is the widgets display</div>
</div>

Source Code Here

<script type="text/javascript">
	$(function() {

		$(".column").sortable({
			revert: true,
			scroll: true,
			appendTo: 'body',
			connectWith: '.column',
			delay:200,
			cancel: '.disabled',
			stop: function() {
				$(".column").each(function(){
					var myArray = $(this).sortable("serialize");
				})

			},
			revertDuration:50000,
        	scope:'scope',
        	opacity: 0.80,
		});
		
		
		
		
		

		$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
			.find(".portlet-header")
				.addClass("ui-widget-header ui-corner-header")
				.prepend('<div class="ui-icon2 ui-exit"> </div><div class="ui-icon ui-mini"> </div>')
				.end()
			.find(".portlet-content")
				.addClass("widget-content");

		$(".portlet-header .ui-icon").click(function() {
			$(this).toggleClass("ui-icon-minusthick");
			$(this).parents(".portlet:first").find(".portlet-content").toggle();
		});

		$('.portlet-content').disableSelection();
		
	});
	
	

</script>
<body>

<div class="wrapper">

	<div class="sidescolumn">

		<div class="basicD">
			<table>
				<td height="130" width="100" align="center" valign="bottom"><img src="images/me.jpg" alt="No Photo" width="125" height="100" border="0" />
				<td>
				<tr>
				<td align="right">Views:
				<td align="left"><span class="p-views">1234567890</span>
			</table>
		</div>
		
		<div id="edit" class="portlet">
			<div class="noneM-widget-header">Edit</div>
			<div class="portlet-content content">
				<a href="index.php?smartyaction=edit.profile">Edit Profile</a><br/>
				<a href="index.php?smartyaction=myAccount">Edit Account</a><br/>
				<a href="index.php?smartyaction=profile.customize">Customize Profile</a><br/>
			</div>
		</div>
		<div id="column1" class="column column1">
			
			
			
			<div id="comp_widgets" class="portlet">
				<div class="portlet-header">Widgets</div>
				<div class="portlet-content content">This is the App & widgets componet</div>
			</div>
			
		</div>

	</div>

	<div class="midcolumn">
		{$myaulrts}
		<div id="column2" class="column column2">
			<div id="comp_Alurts" class="portlet">
				<div class="portlet-header">Alerts</div>
				<div class="portlet-content content">This is the Alerts componet</div>
			</div>
			
			<div id="comp_billbord" class="portlet">
				<div class="portlet-header">Billbord</div>
				<div class="portlet-content content">This is the Billbord Component</div>
			</div>
			
			<div id="comp_status&moods" class="portlet">
				<div class="portlet-header">Status and Moods</div>
				<div class="portlet-content content">This is the status componet</div>
			</div>
			
		</div>

	</div>

	<div class="sidescolumn">
		<div class="portlet">
				<div class="noneM-widget-header">Cp Links</div>
				<div class="portlet-content content">This is the Canaway Productions Links</div>
		</div>
		<div id="column3" class="column column3">
			<div id="comp_friends" class="portlet">
				<div class="portlet-header">Friends</div>
				<div class="portlet-content content">This is the Friends Component</div>
			</div>
			
			
		</div>

	</div>

</div>
</body>
</html>

jquery php

3 Contributors
8 Replies
471 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by jcanaway

diafol

15 Years Ago

Sheesh, ever heard of a 'full stop' or 'period'. Could you say that again - can't make head nor tail of it.

diafol

15 Years Ago

I don't use jquery so haven't much of an idea, but you can pass js arrays as a single post parameter. e.g. 'doajax(myarray)'. Your js script then picks it up by creating a post parameter:

param = 'array=' + myarray;

(here's where I get stuck, coz I use prototype - don't know if jq is similar - assume the params are passed to the php script...)

$myarray = $_POST['array'];

However, I notice you're using serialize instead of a normal array. I would imaging that you can do the same as above and then use the deserialize command in the php script.

I don't know if this helps or confuses?!

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jcanaway 0 Junior Poster in Training · Answer 1 · 2009-06-15T04:11:12+00:00

sorry i was not paying attention to what i wrote i thought i made mistakes but i never check over it ill reexplain.

alright i made the script above but i am having some problems with passing my serialize to my php script so i and update my database for each components column, and position so when the user leave and come back the components will be were they put them i tried to use $.post( url, data, callback); to pass the data to the php script but it dose not seem to work i don't really know what to do from here or really what i am not doing right can you help?

$.post is a Ajax Command for who do not know.

also i am having so problems with the components with drag and drop by problems i mean they work but when to go to select the text i the contents area of the component the drop and drag starts i only want it to start when the mouse is above the header of the component users can select text and use forms other wise forms won't work when you try to use them dose anybody know how to fix this or know where i can go to learn to fix this?

Dose That Work Better On Reading?

jcanaway 0 Junior Poster in Training · Answer 2 · 2009-06-16T00:30:58+00:00

i figured it out i use 3 serialize they a similar to a normal array and im using a ajax command that jquery includes in its library and the command is as so

$.ajax({
     url: "example .php",
     type: "POST",
     data: myArray1 + myArray2 + myArray3,
});

i took forever to find how to do this but jquery has it in API Reference under ajax

jcanaway 0 Junior Poster in Training · Answer 3 · 2009-06-16T00:41:10+00:00

but now the only problem is i can not select anything insides the contents area of each component besides links if i use forms i cant use them but can see them but not use them and you can not highlight the text insides of it ether with i want to be able to highlight the text so you can be able to copy it dose anyone know how to solve this problem?

diafol · Answer 4 · 2009-06-16T03:31:51+00:00

but now the only problem is i can not select anything insides the contents area of each component besides links if i use forms i cant use them but can see them but not use them and you can not highlight the text insides of it ether with i want to be able to highlight the text so you can be able to copy it dose anyone know how to solve this problem?

Aw, you've done it again! I know it's difficult for those of use who don't speak English as a first language, but I can't follow this at all. Sorry fella.

digital-ether 399 Nearly a Posting Virtuoso Team Colleague · Answer 5 · 2009-06-16T12:45:29+00:00

i figured it out i use 3 serialize they a similar to a normal array and im using a ajax command that jquery includes in its library and the command is as so
$.ajax({
     url: "example .php",
     type: "POST",
     data: myArray1 + myArray2 + myArray3,
});
i took forever to find how to do this but jquery has it in API Reference under ajax

If you're sending complex data types in a query, eg: Arrays or Objects it is good to use JSON.

http://www.json.org/js.html

For example, if you use the default JavaScript JSON functions from http://www.json.org/json2.js it would be:

var str = JSON.stringify(YouObject);

I'm sure JQuery has a function for this.

You can then pass that string as a regular POST or GET parameter in your AJAX call.

PHP can parse JSON natively in PHP5, or you could use the JSON Pear lib for PHP4.

Note: JSON has become a standard for "Web2.0" (Ajaxy stuff) so every major web language either parses JSON natively, or has libraries to do it.

jcanaway 0 Junior Poster in Training · Answer 6 · 2009-06-17T00:36:06+00:00

alright thank you ill try that and yes jquery had json functions

also i found out why i could not highlight text to copy it was because jquery has a function that disables sections of that portlets that look like this $(".column").disableSelection(); you have to remove that function so you can enable the highlight so you can copy text of use forms and ect.

i thought this would be useful for the people new to jquery as i am and also if your cursor is on the contents area and your trying to highlight the text and it is sorting the sortable container instead it is because you need to add a handle to it as so

$(".column").sortable({
        handle: '.portlet-header',
});

this is to only to start sort on header instead of being able to use the whole container to start sorting

im passing some of my knowledge on to you all

and thanks everyone that has help through my problems with this and i hope this last post on jquery-ui portlets helps others on there creation on sortable containers and yes i would suggest jquery ui to others it is not a bad library to use