I am using the Summernote WYSIWYG editor to provide users with functionality to edit HTML templates, and store changes to a personalised area. To do this I need to POST a set of text fields, along with the edited HTML, to the backend.
All is working as expected, except that the HTML that gets POSTed from the editable DIV, doesn't POST the updated DOM i.e. it's the original HTML template, without the edits.
If I use the browser dev tools console, I can use 'document.documentElement.outerHTML' to see the correctly updated DOM, but when I set a variable to get the outerHTML element by ID, I still only POST the original markup.
The variable within the script is as follows (based upon other StackOverflow answers):
var content = $('#template_text')[0].outerHTML;
As mentioned, this allows me to POST the content of the DIV, but doesn't POST the updates that a user makes to the template.
I have tried using innerHTML, outerHTML, html(), but essentially end up with the same result. If I use document.documentElement.outerHTML within the variable, this POSTs the updated values, but sends the whole document, rather than just the DIV (and I only want the DIV).
Any help would be greatly appreciated.
Instead of manipulating the DOM, We can go with the library's documented way like this,
var editedText = $('#summernote').summernote('code');
Hope this helps!
Related
Assume I have a home.jsp made of
/common/_header.jsp
/_homebody.jsp
/common/_footer.jsp
And search.jsp made of
/common/_header.jsp
/_searchbody.jsp
/common/_footer.jsp
The header has a search box. On submitting a string, I want to move to search page, but would be prefer an ajax call. So what is the best way to display the search page. I have the following solution.
Remove the _homebody content using $(selector).empty() or $(selector).remove()
Add the _searchbody content using $(selector).append(content)
The removal part is fine, but the appending part is dirty and error prone as I need to store the HTML String in my javascript. Any work arounds? Two probable solutions could be
A better way of storing the HTML String in javascript
OR
A method that can remove a child element of JSP and add a new one.
Or any better solutions.
Thanks in advance
If you setup your server to return the search results as a HTML, you can just use http://api.jquery.com/load/ to insert the generated results.
A way to go about this would be hiding the _homebody content and showing a div which you can just routinely update its content. Then after every search, replace the content with that of the loaded content
You may use the html() function to replace the contents
in the ajax success
$(selector).html(content);
The windows forms web browser control supports Javascript; this Javascript can make changes to the DOM. However, when I call the DocumentText property, I always get the unmodified HTML. Is there any way to get the HTML after modification?
You should be able to just do: webBrowser1.Document.Body.InnerHtml
when you modifiy the html doc, is it form elements, or other types of element.
one thing i noticed during debugging is that when i use the setAttribute for input form and then use webbrowser1.document.innerText, i get the modified doc returned.
my suggestion is that you either set the html doc propert you are modifying throug code first, and or use webbrowser1.document.body.innerText
Adding HTML/any tags to either side of selection - Javascript
The problem:
After creating a textarea box in my PHP/html file I wished to add a little more functionality and decided to make an textarea that can use formatting, for example
<textarea>
This is text that was inserted. <b>this text was selected and applied a style
via a button<b>
</textarea>
It doesn't matter what the tags are, (could be bubbles for all that I care due to the fact the PHP script, on receiving the $_POST data will automatically apply the correct tags with the tag as the style ID. Not relevant)
The Question/s
How can I create this feature using javascript?
Are there any links that may help?
And can, if there is information, can you explain it?
EDIT: Other close example but not quite is stackoverflow's editor and note that I do not wish to use 3rd party scripts, this is a learning process for me.
The tags that are inserted in the text are saved to a database and then when the page is requested the PHP replaces the tags with the style ID. If there is a work around not involving 3rd party scripts please suggest
And for the anti-research skeptics on a google search, little was found that made sense and there was Previous Research on SOF:
- https://stackoverflow.com/questions/8752123/how-to-make-an-online-html-editor
- Adding tags to selection
Thanks in Advance
<textarea> elements cannot contain special markup, only values. You can't apply any styling in a textarea.
What you'll need to do is fake everything that a text box would normally do, including drawing a cursor. This is a lot of work, as hackattack said.
You can do a lot if you grab jQuery and start poking around. Toss a <div> tag out there with an ID for ease and start hacking away.
I've never made one personally, but there is a lot to it. HTML5's contentEditable can maybe get you a good chunk of the way there: http://html5demos.com/contenteditable/
If you want to pass this data back to the server, you'll need to grab the innerHTML of the container and slap that into a hidden input upon submission of your form.
Here's other some things you can check out if you're just messing around:
tabindex HTML attribute, to get focus in your box from tabbing
jQuery.focus() http://api.jquery.com/focus/, to determine when someone clicks in your box
cursor: text in CSS for looks http://wap.w3schools.com/cssref/pr_class_cursor.asp
jQuery.keypress() http://api.jquery.com/keypress/, or similar for grabbing keystrokes
Edit: I think I completely misunderstood
If you're not looking for a rich text editor, and just want some helper buttons for code, maybe selectionStart and selectionEnd is what you're after. I don't know what the browser support is, but it's working in Chrome:
http://jsfiddle.net/5yXsd/
you can not do anything beside basic formatting inside a texarea. If you want complex formatting, look into setting a div's contentEditable attribute to true. Or you can make a wysisyg editor, but that is a big project. I strongly suggest using 3rd party code on this one.
I suggest you using the iframe to implement the WYSIWYG effect.
There is a property in iframe called designMode
See here for more
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
Also there is a lightweight example maybe you would like to take a look:
http://code.google.com/p/rte-light/source/browse/trunk/jquery.rte.js
I am adding an id to an element via call to jQuery.data:
$layout.nextAll('.imagepicker').data('imgPickerId', randomnumber);
So my element of a class imagepicker will have [imgPickerId=randomnumbervalue] data attribute added to it.
It seems like there is a problem how I later on look for .imagepicker with exactly this imgPickerId. Where can I lookup which attributes are added to a particular element in a convenient way (excep from js code)? Maybe in firebug somewhere?
P.S. for some reason my "getter code" works in jQuery 1.6 but does not in 1.7. Still I am suspecting data isn't being added to an element and need a way to check it.
jQuery's data function stores everything in JavaScript, without altering the DOM in any way. I'm afraid you'll have to use code to access it.
A quick Google search also showed me a FireQuery plugin for Firebug, which seems to enable you to see the attached data of your elements. Haven't tried it myself, though, so I can't confirm that.
Update: Tested it, and it works fine! With FireQuery all data of your elements are visible right next to the HTML:
Have you considered in writing your data in an custom attribute like data-imgPickerID="someID"?
For sure this does not allow you to save huge data but you could inspect it via firebug and since you are only saving an ID it would fit for your needs.
Which is also very cool about the .data() method is you can retrieve your custom attribute from above like so .data("imgPickerID");
data() will save data in memory (of course linked to the elements in your selector), it doesn't write things on the element, so you can't look at that in firebug.
You can pre-populate elements with some data by using the html5 data attibute though
Look at this question for an expanded explanation
How does jQuery store data with .data()?
I have a page where there's a drag and drop table where the order of the rows determines the value of a subtotal. However, it's more complicated than just addition and I would rather not duplicate the logic in JavaScript to update the values.
A simple solution would be to reload the whole page using Ajax and then replace the table from the page fetched via Ajax. Perhaps it's not the most elegant solution but I thought it'd be a quick way to get the job done that would be acceptable for now.
You can do that with jQuery like this:
$('#element-around-table').load(document.location.href + ' #table-id');
However, my "simple" solution turned out to not be so simple because the table also contains a <form> tag which is not being displayed in Firefox (Safari works).
When I inspect the page using Firebug, I see the form, but it and its elements grayed out.
Searching on the web, I found a rather confused post by a guy who says FF3 and IE strip <form> tags from innerHTML calls.
I'm probably going to move on to do this some other way, but for my future reference, I'd like to know: is this the case?
That post is rather confused, I just tested your code and it worked fine. The form tag was shown in firefox 3.0.8 just fine.
Looking at you code example, though I wonder if you just gave an incomplete example... make sure that the page you call returns only the html that goes inside that wrapper element.
I've run into this type of thing before. FORM tags need to be added to the DOM. If they're added using a method that writes to innerHTML, the tag will appear, but it won't be there as far as JavaScript is concerned.