Question posted in
You can find the official documentation here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    The PHP should echo JSON, not the HTML input.

    function write_to_server($html_code) { 
    $html_string = $_POST['arguments'][0];
    echo json_encode(array('msg' => 'Data saved successfully'));
}

    And the jQuery code should display the message.

        if( !('error' in obj) ) {
        $('#msg').html(obj.msg);
    }
    else {
        console.log(obj.error);
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search