0

I want to sent a chunk of html to the server using XMLHttpRequest. The chunk I have is this:

<body id="publish">
<p>Vous avez à parler à vous même</p>
<input type="button" name="Submit" value="Submit" onClick="SaveDomHTML()">
</body>

This chunk is packed by JavaScript in 'content' and transferred to the server via PHP script. The problem I encounter is, when I try to print the 'content' in a server side file by php:

fwrite($fh, $content);

I get the following instead of my html chunk.

[object HTMLBodyElement]

Moreover, php gettype($content) gives string and not object !!!

I have looked around for a solution such as:

  How to get innerHTML of DOMNode?
  http://stackoverflow.com/questions/2087103/how-to-get-innerhtml-of-domnode

  Send POST data using XMLHttpRequest
  http://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest

But none of them working for me.

Any help to solve the problem is very much appreciated.

My full files, which were elaborated thanks to Answer 1, but in JavaScript rather than in jquery:

<!doctype html>
<html lang="fr">
<head>
<meta charset="iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" charset="iso-8859-1">
function SaveDomHTML(){
"use strict";   
var content =  document.getElementById('publish');
console.log("content:", content);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/cgi-bin/domsave.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () { 
    if (this.readyState === 4 || this.status === 200){ 
        console.log(this.responseText);
    }
};
xhr.send("content=" + content);
}
</script>
</head>
<body id="publish">
<p>Vous avez à parler à vous même</p>
<input type="button" name="Submit" value="Submit" onClick="SaveDomHTML()">
</body>
</html>

Php file:

<?php
$user_dom_html = 'user_dom_'.time().'.html'; 
$fh = fopen($user_dom_html, 'w');
echo $user_dom_html; 
$content = $_POST['content']; 
fwrite($fh, $content);
fclose($fh);
?>
MGZ
  • 121
  • 8

1 Answers1

0

Server side functionality Step.

  • First Step - You need to create(register) and login functionality for a user for user identity.
  • Second Step - User able to create custom HTML DOM.generate any HTML as per your UI functionality.
  • Third Step - We need to store data in server with related user, like user_id and his DOM(HTML)

Third step child point.

Need to target to your html DOM part

Client side js code.

 $(document).ready(function() {
     $('#submit').click(function(e) {
     e.preventDefault();
       var content = $('#html_dom').html(); 

            $.ajax({
                  type: 'POST',
                  url: 'dom_sever_file.php',
                  data: {content: content}
                  }).done(
                        function( data ){
                            if(result){console.log("success")};
                        }
                  );
          });
     });

Server side php code.

//get auth user.
$user_session_id = $_SESSION['user_id'];

$user_dom_html = "user_dom_".time()."html"; 
$fh = fopen($user_dom_html, 'w'); 
$stringData = $_POST['content'];   
fwrite($fh, $stringData);

//need to store only html file name and user id in mysql
//this part will be your mysql connection and insert query.
  • Fourth Step - View DOM - check server side like user_id = 1 has any past DOM available then showing it to user DOM list part.
  • Your assumption is correct and my question is in third step, where I need guidance to save user DOM(HTML) on the server. – MGZ Apr 29 '17 at 13:25
  • I have updated my answer please follow it @MansourGHAFFARZADEH –  Apr 29 '17 at 14:01
  • Thank you very much. However, is it possible to provide me pure js code rather than JQUERY? – MGZ Apr 29 '17 at 14:36
  • I have now problem in php code on line $stringData = "you html code php code goes here"; where I need to put “content” sent by ajax (content). How do I do $stringData = ?. Thanks in advance for any help – MGZ May 03 '17 at 04:29
  • @MansourGHAFFARZADEH I have updated answer please check.You have made ajax call by post then you can access HTML content data using $_POST['content']. –  May 03 '17 at 07:57
  • Thank you for your update. I could get now in $stringData the content of DOM html. However in this content all of my " is transformed to \". for example becomes etc. => How this can be avoided? Thank you in advance for your help. – MGZ May 04 '17 at 02:52