Rheves Posted February 24, 2015 Share Posted February 24, 2015 I have a page that I let the user edit with contentEditable=true and then I want to save those changes. The first thing I tried was grabbing the contents of 'document.documentElement.innerHTML' but that adds a nasty mess at the top of the page for computed styling it seems. Second attempt is to use ajax to grab the current page off the server and then swap in the div that the user will be editing, I can't seem to do that. Once I grab the file off the server I have the contents of the html document in the format I expect, same as if I'm looking at it notepad. The save event of the editor I'm using passes me the edited content for the div I want to update. I just don't know how to connect the two. Original html looks something like the following and is my 'origPage' variable: <!DOCTYPE html> <html> <body> <div id="editor"> <h1>This is editable.</h1> <p>Click me to start editing.</p> </div> <!-- doesn't matter --> </body> </html> And the updated value I get back from the editor looks like this and is my 'e.html' variable: <h1>I edited this too!</h1> <p>I edited this paragraph!</p> The life of an idiot is a hard one, and I cannot find out how to merge the two. My 'e.html' variable is simple text and available to me from thr get go, and my 'origPage' variable is plain text as well, I populate it like this: $.ajax({ url: 'example.html', async: false, // asynchronous request? (synchronous requests are discouraged...) cache: false, // with this, you can force the browser to not make cache of the retrieved data dataType: "text", // jQuery will infer this, but you can set explicitly success: function( data, textStatus, jqXHR ) { origPage = data; // can be a global variable too... // process the content... } }); I thought I could parse the origPage text into a jquery object and access the innerHTML that way since I am familiar with that method but I always get errors like "TypeError: undefined is not a function" or "TypeError: Cannot read property 'getElementById' of undefined". My attempts looked like this, editor being the div ID that was being edited: var newHtml = $.parseHTML( origPage );$(newHtml).getElementById('editor').innerHTML = e.html; I don't know javascript very well and this seems like such a simple thing to do but I just can't get it to do what I want, can anyone help? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.