Login

01-23-2008, 03:13 AM

[eluser]Xiphar[/eluser]
Hi
Do you know how can I pass a DOM object to my XMLHttpRequest, receive it at the php side, parse it to do some stuff, and return a simple confirmation?

I've been googling for a whole day now but there is nothing that helps.. The XMLHttpRequest specs say dom object can be passed.. I donno how.. to send and handle it at the php side..

Please Help

Xiphar

01-23-2008, 04:43 AM

[eluser]ejangi[/eluser]
Have you got a code sample that we can look at, as I don't think "DOM object" explains very well what you're passing around. You mean just a snippet of HTML right?

01-23-2008, 05:33 AM

[eluser]Xiphar[/eluser]

Code:
&lt;html&gt;

    &lt;head&gt;

        //make http request

    &lt;/head&gt;

    &lt;body&gt;

        <div class="send-me-to-server">

            <h1>Heading</h1>

            <p>Text</p>

        </div>

        &lt;input type="button" id="request-trigger" value="Click Me" /&gt;

    &lt;/body&gt;

&lt;/html&gt;

Basically I want to make the request when the button is clicked and send the div.send-me-to-server as a DOM object to the server.

01-23-2008, 06:50 AM

[eluser]ejangi[/eluser]
Okay, this is rough and I haven't tested it but the basic idea is there. I'm using MooTools as the base JavaScript library for this, cause doing AJAX without a framework is UUUUGLY! Tongue

So, you'd need to download a fairly complete MooTools package and put this into your head element also:

Code:
window.addEvent('domready', function() {

        $('request-trigger').addEvent('click', function(e) {

            if ($E('.send-me-to-server')) {

                var send = new Ajax('/ajax/post', {

                    method: 'post',

                    postBody: 'html=' + $('send-me-to-server')[removed],

                    onComplete: function(request){

                        var output = new Element('div').setProperty('id', 'message');

                        if ($('message')) {

                            $('message').remove();

                        }

                        if (request == 'true') {

                            output.setHTML('Worked!');

                        } else {

                            output.setHTML('Nope...');

                        }

                        output.injectBefore($E('.send-me-to-server'));

                    }

                    }).request();

                new Event(e).stop();

            } else {

                alert('There is no element with class "send-me-to-server" on this page.');

            }

        });

    });

And then on the PHP side of things you would have a controller like so:

Code:
&lt;?php

class Ajax extends Controller {

    function Ajax()

    {

        parent::Controller();

    }

    function post()

    {

        $html = $this->input->post('html');

        // DO WHATEVER YOU NEED TO DO WITH THE HTML HERE:

        if ($html) {

            echo 'true';

        } else {

            echo 'false';

        }

    }

}

?&gt;

Essentially what's happening here is that when the button is clicked the JavaScript will "hear" that click and respond to it by posting the contents of your div to the /ajax/post controller-method and would listen for the return from that controller. If the return is the string "true" the JavaScript inserts another div at the top of the page with the id "message" containing the string "Worked!".

I'm not sure what "processing" you wanted to do to your HTML, so you can fill that in and in all honesty I'm not sure why you'd want to send an entire chunk of HTML to PHP to play with. Wouldn't it be easier to just post a form?

To change the above JavaScript to post a form, give your form an ID like "myform" and change the line that reads:

Code:
postBody: 'html=' + $('send-me-to-server')[removed],

to:

Code:
postBody: $('myform'),

And hey presto your PHP will be receiving data sent from a form just like it would without XMLHttpRequest's.

[EDIT:] The forum seems to have stripped out some of the JavaScript. Wherever you see [removed] put a dot and then "innerHTML".

01-24-2008, 08:47 AM

[eluser]Xiphar[/eluser]
Hi ucantblamem
Thanks a lot, but this did not work.
The sent request is xml=[object divElement] where [object divElement] is being read by my PHP script as a string '[object divElement]'

I think its better for me to tell you why I am doing this. May be sending a DOM Element is not the best idea anyway.

I am basically making a page where the users can add their html to the page. This HTML can be anything.. <div>, <img> etc etc..
I want to save the new HTML elements added by the user.

Is there a good way to do it?

01-24-2008, 09:10 AM

[eluser]xwero[/eluser]
That's very ambitious what your trying to do because it's easy to break a design if a user can change html, for example a big image is enough.

What you could do is when the user goes in edit mode show a wysiwyg editor as big as the place that is meant to be used. It is going to require a bit of clever javascripting to pull this off, the steps would be

- check if the user has rights to change the page
- if the user clicks on the change link you have to get the dimensions of the element show the editor with the fetched width and height.
- You can change the change link to a commit link and when they click on it an ajax request goes to the server to store the updated context and if the request is successful the fetched html from the editor can be used to show the changed page without the editor.

So it's going to be more of a javascript effort than a php effort.

01-24-2008, 09:59 AM

[eluser]Xiphar[/eluser]
Thanks buddy
I was thinking more along the lines of how the data is passed between the page and the server. I might need to pass info of multiple DIVS... How is my request gonna be like? How can I pass an array / object?

01-24-2008, 10:25 AM

[eluser]Pascal Kriete[/eluser]
I think ucantblamem has the right idea. You grab the innerHTML of your div and send it to the server. To send multiple divs, you'll just have more than one post variable.

01-24-2008, 04:59 PM

[eluser]ejangi[/eluser]
The line:

Code:
postBody: 'html=' + $('send-me-to-server')[removed],

should be:

Code:
postBody: 'html=' + $E('.send-me-to-server')[removed],

And I tested this code just now and it works for me.

P.S. Again, you'll need to replace [removed] with [dot]innerHTML