将操纵的div的内容保存到变量并传递给php文件

Question

I have tried to use AJAX, but nothing I come up with seems to work correctly. I am creating a menu editor. I echo part of a file using php and manipulate it using javascript/jquery/ajax (I found the code for that here: http://www.prodevtips.com/2010/03/07/jquery-drag-and-drop-to-sort-tree/). Now I need to get the edited contents of the div (which has an unordered list in it) I am echoing and save it to a variable so I can write it to the file again. I couldn't get that resource's code to work so I'm trying to come up with another solution.

If there is a code I can put into the $("#save").click(function(){ }); part of the javascript file, that would work, but the .post doesn't seem to want to work for me. If there is a way to initiate a php preg_match in an onclick, that would be the easiest.

Any help would be greatly appreciated.

The code to get the file contents.

<button id="save">Save</button>
<div id="printOut"></div>
<?php
    $header = file_get_contents('../../../yardworks/content_pages/header.html');
    preg_match('/<div id="nav">(.*?)<\/div>/si', $header, $list);
    $tree = $list[0];
    echo $tree;
?>

The code to process the new div and send to php file.

$("#save").click(function(){
    $.post('edit-menu-process.php', 
        {tree: $('#nav').html()}, 
        function(data){$("#printOut").html(data);}
    );
});

Everything is working EXCEPT something about my encoding of the passed data is making it not read as html and just plaintext. How do I turn this back into html? EDIT: I was able to get this to work correctly. I'll make an attempt to switch this over to DOMDocument.

$path = '../../../yardworks/content_pages/header.html';
    $menu = htmlentities(stripslashes(utf8_encode($_POST['tree'])), ENT_QUOTES);
    $menu = str_replace("&lt;", "<", $menu);
    $menu = str_replace("&gt;", ">", $menu);

    $divmenu = '<div id="nav">'.$menu.'</div>';

    /* Search for div contents in $menu and save to variable */
    preg_match('/<div id="nav">(.*?)<\/div>/si', $divmenu, $newmenu);
    $savemenu = $newmenu[0];

    /* Get file contents */
    $header = file_get_contents($path);

    /* Find placeholder div in user content and insert slider contents */
    $final = preg_replace('/<div id="nav">(.*?)<\/div>/si', $savemenu, $header);

    /* Save content to original file */
    file_put_contents($path, $final);   
?>
Menu has been saved.

Answer 1

To post the contents of a div with ajax:

$.post('/path/to/php', {
    my_html: $('#my_div').html()
}, function(data) {
    console.log(data);
});

If that's not what you need, then please post some code with your question. It is very vague.

Also, you mention preg_match and html in the same question. I see where this is going and I don't like it. You can't parse [X]HTML with regex. Use a parser instead. Like this: http://php.net/manual/en/class.domdocument.php