jquery Serialize and ajax post

Hi experts, I'll try to describe this as best I can.  Since I'm developing on my own PC, I can't show the site in action.

I am using jquery to drag and drop divs in a list (yes I know, they should be ul/li, I'll do that later!).

It worked fine until I put another layer of divs in between.   I have been trying to work it out myself, but I don't understand one thing in particular which may be they key to solving the bigger issue - if not, I'll post another question.

For this jquery code:
$(document).ready(function() {
	$('#tnewsList').sortable({
		opacity: 0.6,
		cursor: 'move',
		update: function () {
			$('#order_saved').html('<br />Order not saved yet.');
		    	$('#order_saved').css({'color' : '#FF0000'});
		}
   	 });

$('#torder_button').click(function(e){
   		e.preventDefault();
   		 serial = $('#tnewsList').sortable('serialize');
		$.ajax({
			 url: "?letters_order",
             			type: "post",
			 data: serial,
             			complete: function(){
				window.location = ".?wh=letters”
			 }
		});
	});
  });

Open in new window


which acts on this html

<div id="tnewsList">
        <div class="admin_block" id="newsItem_69"> 
            <form action="" method="post">
                <div>
                    <div class="admin_item" style="width: 475px;">Cols new</div>
                    <div class="admin_item" style="width: 475px;">my new</div>
                    <div class="admin_item" style="width: 475px;"></div>
                    <div class="grey_1" style="width: 30px;">1</div>
                    <div style="display: inline-block;">
                        <input type="hidden" name="hdnPos" value="1"/>
                        <input type="hidden" name="hdnID" value="69"/>
                        <input type="submit" name="action" value="Edit" class="button small brown"/>
                        <input type="submit" name="action" value="Delete" class="button small brown" />
                    </div>
                </div>
           </form>
        </div>
        <hr/>
        <div class="admin_block" id="newsItem_68"> 
            <form action="" method="post">
                <div>
                    <div class="admin_item" style="width: 475px;">new add&#039;s for col</div>
                    <div class="admin_item" style="width: 475px;">reilly</div>
                    <div class="admin_item" style="width: 475px;">Copy of Fixtures 3-31oct2015.xlsx</div>
                    <div class="grey_1" style="width: 30px;">2</div>
                    <div style="display: inline-block;">
                        <input type="hidden" name="hdnPos" value="2"/>
                        <input type="hidden" name="hdnID" value="68"/>
                        <input type="submit" name="action" value="Edit" class="button small brown" />
                        <input type="submit" name="action" value="Delete" class="button small brown" />
                    </div>
                </div>
           </form>
        </div>
           etc

Open in new window


When I send the contents of var serial to the console log, I see

newsItem[]=69&newsItem[]=68&newsItem[]=63...

So why is the serialize function picking out the id of the div that is the child of tnewslist?

Incidentally, whatever I do, I can't see the contents of the $_POST array from the ajax call, using print_r etc shows an empty array.

Thanks for reading, any help appreciated.

Col
LVL 3
colinspursAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
To answer your first question refer to the jQueryUI docs here (http://api.jqueryui.com/sortable/#method-serialize)
Specifically this paragraph
It works by default by looking at the id of each item in the format "setname_number", and it spits out a hash like "setname[]=number&setname[]=number".

To answer your second question
Add type to your ajax call to see the $_POST
$.ajax({
   url: ...,
   data: ...,
   type: 'POST'
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
colinspursAuthor Commented:
Julian, thanks for your quick response.

1) Fantastic, that must be why I used it in the first place, I must comment my code more!  So the serialize method of sortable acts differently to the serialize method on its own?  No need to answer that if the answer is in that link.

2) I have type: "post" already, should I switch to single quotes?
0
Julian HansenCommented:
serialize method of sortable acts differently to the serialize method on its own
Not sure what you mean by serialize method on its own
There are many serialize implementations - each does its thing based on what it is working on.

2, Check your console when you do the post - you should see a complete transcript of the transaction including both request and response headers. Report what you find.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Julian HansenCommented:
Here is a sample using your code that seems to work without any changes.

View the console to see the returned data.
0
colinspursAuthor Commented:
OK thanks, will try to report back tomorrow, if not, Thursday.
0
colinspursAuthor Commented:
This is what I see in the console with my code:
console contents
With your code there is nothing in the console (the same as mine, in that I write the contents of serial to the console in my version, take that away and there would also be nothing.)
0
Julian HansenCommented:
With your code there is nothing in the console
Are we talking about the same code?
Here is what I see in the console of my sample page after moving the div's around and clicking the button
RequestResponseAs you can see the Request is sent as
newsItem[]=68&newsItem[]=69&torder[]=button

Open in new window

And the dump coming back is
<pre>Array
(
    [newsItem] => Array
        (
            [0] => 68
            [1] => 69
        )

    [torder] => Array
        (
            [0] => button
        )
)
</pre>

Open in new window

Did I misunderstand?
0
colinspursAuthor Commented:
Not at all, if anyone's not understanding it's me!

I'm using Chrome, my console is empty except for the navigation (and I have preserve ticked)
0
Julian HansenCommented:
I'm using Chrome, my console is empty
Look in the network tab.
0
colinspursAuthor Commented:
Ok...
network and console tabs
0
colinspursAuthor Commented:
and again as attachment.
Capture3.JPG
0
Julian HansenCommented:
That does not look like my sample page - have you tried on that link?
Here is what I see in Chrome going to www.marcorpsa.com/ee/t1232.php
BeforeHere is what I see after clicking the button
AfterTo compare apples with apples can we first determine if you can see the same results going to the same URL
0
colinspursAuthor Commented:
Yup, I see it now (in the after state).  My inexperience with debug tools,
0
colinspursAuthor Commented:
I'll have another go tomorrow, thanks again for your help.
0
Julian HansenCommented:
No problem - will keep an eye out.
0
colinspursAuthor Commented:
Thanks.  Haven't solved my main sorting issue yet though, will post another q.
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.