Save Current DOM to file on server using PHP, Ajax, jQuery?

Question

I've searched everywhere, but each solution I find hasn't worked for me so far.

I am building a website app where people can create their own slideshow. When the user clicks the save button I want the current DOM to be saved as an HTML file on my web server.

The first method I tried uses Ajax, but nothing gets returned:

AJAX

 function chk() { 
  var elHtml = document.getElementById('dropzone').innerHTML;
  console.log("inside chk");
  $.ajax({
    type: "POST",
    url: 'https://www.tap-plus.org/wp-content/themes/Avada/softwarefiles/savefile.php',
    dataType: 'json',
    data: {functionname: 'write_to_server', arguments: [elHtml] },
    cache:false,
    success: function (obj) {
    if( !('error' in obj) ) {
      $('#msg').html(obj);
    }
    else {
    console.log(obj.error);
    }
    }
  });
  return false;
}

savefile.php

function write_to_server($html_code) { 
    $html_string = $_POST['arguments'][0];
    var_dump($html_string);
    echo 'test';
}

html <input type="submit" id="saving" class="btn btn-primary pull-right" value="Save2" onclick="return chk()"/>

The above method returns nothing. The second method I tried was fetching the current DOMDocument with loadHTMLFile of the current website URL. That returned null.

DOMDocument

$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTMLFile('https://https://www.tap-plus.org/tapplus-software/');
var_dump($dom);

result:

object(DOMDocument)#3045 (35) { ["doctype"]=> NULL ["implementation"]=> string(22) "(object value omitted)" ["documentElement"]=> NULL ["actualEncoding"]=> NULL ["encoding"]=> NULL ["xmlEncoding"]=> NULL

Also, I want to accomplish this without the page reloading, if possible. Since ideally if someone hits the save button on a slideshow they are working on they won't want the page to suddenly reload. I'm not sure what I'm doing wrong or what the next steps would be to solve this problem. Thanks in advance.

Answer 1

Solved it! Here was the solution for me to click a save button, return the html code of a particular element and prevent the page from refreshing:

AJAX

var url = '/savefile.php';
function chk() { 
  var elHtml = document.getElementById('outer-content').innerHTML;
  console.log("inside chk");
  $.ajax({
    type: "POST",
    url: url,
    data: {myCode: elHtml },
    success: function (obj) {
      console.log("success outer");
        $('#msg').html(obj);
        console.log("success");
    }
  });
  console.log(url);
  return false;
}

PHP

          $html_val = $_POST[ 'myCode' ];

          var_dump($html_val);

It was actually a lot simpler than I thought.