Error in Firefox when using setMode on submit

[greentechieParticipant]

Hi

I am having a problem using jqxEditor to populate a hidden text area in a form. If the editor is in HTML mode the text supplied using val() contains extra HTML tags, that I don’t want to save. So I use $(‘#editor’).jqxEditor(‘setMode’, false) in my submit event to ensure the correct text is copied.

This all works fine in Chrome & Chromium, but fails in Firefox. I tried using your fiddle that you link to in the docs, here:-
http://jsfiddle.net/jqwidgets/ZGcWL/
… and I changed the HTML to :-

<form method="POST" action=".">
  <textarea id="editor"></textarea>
  <div class="form-group">
    <button type="submit">Submit</button>
  </div>
</form>

… and the Javascript to …

$('#editor').jqxEditor({
    height: 400,
    width: 800,
    theme: 'energyblue'
});

$('form').submit(function(e) {
  alert('hello!');
  $('#editor').jqxEditor('setMode', false);
  alert('hello 2!');
  var jqVal = $('#editor').val();
  alert(jqVal);
});

In Firefox the first hello message displays, but the second does not.

Any help appreciated …

Best regards,
Jamie

[Peter StoevKeymaster]

The webpage reports: Forbidden (403) CSRF verification failed. Request aborted. More information is available with DEBUG=True. This is not related to jqxEditor or our product.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[greentechieParticipant]

Hi Peter,

Thanks for the reply. Where did you place the DEBUG=True code to see the extra details?

I know that the post method does not succeed, as I was not expecting it to on the fiddle page. My test was only to see which statements executed.

But as removing the line “$(‘#editor’).jqxEditor(‘setMode’, false);” allows the rest of the code to succeed, which displays the contents of the editor in the alert, does that not mean there is an issue with the statement in question?

It would be even better for me if there was a way to get the correct raw text from the editor widget, regardless of which “mode” it was in. Then I wouldn’t need to change the mode.

As it stands the text returned in that fiddle example when in rich text view is :-
<div>​</div>

But if the editor is in HTML mode the val() method returns :-
<br><pre style="height: 100%; margin: 0px; outline: medium none; display: block;" id="sourceText" contenteditable="true"><div>​</div></pre>

Best Regards,
Jamie

[Peter StoevKeymaster]

Hi Jamie,

If we want to get the Raw text why we need a Rich Text editor, we’d better use a Text Area and you can use jqxTextArea if that is your idea.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[greentechieParticipant]

Hi Peter,

Thanks again, but the user needs to style the text size/colour/font etc. They may also want to edit the HTML.

Sorry for the confusion, but when I said “raw text” I meant the just actual HTML, without additional tags.

I would like to just use the jqxEditor in the form, without any extra code, but if the user looks at the HTML view as they hit submit I get all the extra tags, like “

", which get saved to my DB and lose all the formatting the user created.

Is there a different function that will will return just "<div></div" for an empty text string, regardless of which mode the editor is in, without all the extra tags that val() returns?

Thanks,
Jamie

[Peter StoevKeymaster]

Hi Jamie,

Ok. You can use the following approach, too – http://jsfiddle.net/Lxnb28nw/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[greentechieParticipant]

Hi Peter,

Thanks, but when I change to the HTML mode in the editor the text returned is still …
<br><pre style="height: 100%; margin: 0px; outline: medium none; display: block;" id="sourceText" contenteditable="true"><div>​</div></pre>
… not …
<div></div>

Is this not a bug?

Best Regards,
Jamie

[Peter StoevKeymaster]

I see no HTML or PRE tags in the sample I sent you and also in the sample the default mode is HTML.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[greentechieParticipant]

Hi Peter,

If you click on the </> button in the jqxEditor component, then hit submit the message I see displayed in all browsers is as I described. If I hit submit in the default view it says “<div></div>”.

Please try going into HTML display/edit mode before clicking submit and see what you get. This seems like a bug to me.

Thanks,
Jamie

[Peter StoevKeymaster]

It will not submit the Editor’s data, because the Editor in the sample I sent you is not part of the Form.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[greentechieParticipant]

Hi Peter,

I am not referring to what the form submits. The submit button displays an alert message and that is what shows the contents of the editor.

I think the fact that there is a form involved is confusing things. I did start with an editor in a form (actually fully in the form) and the original problem was as described in my first message.

I only needed to change the mode due to what I believe is a bug.

Please can we start again and just assume a simple web page with a jqxEditor and a single button that displays the editor.val() in an alert message. When the editor is in “rich text” mode the button shows “<div></div>”. When the editor is in HTML editor mode the button displays a completely different message.

Please ignore the form in the fiddle example, as in this case it is just acting as a button, and you will see the same behaviour. I am not referring to what is submitted by the form, but what jQuery returns as the val() of the editor.

Thanks,
Jamie

[greentechieParticipant]

PS: By “HTML editor mode” I mean clicking on the “</>” button in the jqxEditor.

[Peter StoevKeymaster]

Hi Jamie,

It will display the HTML as it does. val returns editor.html(). That result does not depend on our code. The Editor uses the Browser’s html editing engine. That’s why we set these contenteditable and so on attributes.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[greentechieParticipant]

Hi Peter,

I don’t think I understand.

If the user enters “<div>Hello World</div>” in the “HTML mode” of jqxEdtor is there any way for me to read the contents as “<div>Hello World</div>” instead of “<br><pre style=”height: 100%; margin: 0px; outline: medium none; display: block;” id=”sourceText” contenteditable=”true”><div>Hello World​</div>”?

Or do I have to change the view back to “rich text” mode before I can read the contents correctly?

Best Regards,
Jamie

[greentechieParticipant]

Hi Peter,

I’m just looking at the fiddle example for val() at and if I change the HTML to :-

$('#editor').jqxEditor({
    height: 400,
    width: 800,
    theme: 'energyblue'
});

$('#editor').val("New Value");
$('#editor').jqxEditor('setMode', true); 
alert($('#editor').val());

… then the message I get is “<br><pre style=”height: 100%; margin: 0px; outline: medium none; display: block;” id=”sourceText” contenteditable=”true”>New Value”.

But if I change to code to $('#editor').jqxEditor('setMode', true); then the message says “New Value”.

Are you saying that this is expected behaviour? If so how to I use the editor to allow the user to make use of both modes?

Best Regards,
Jamie

[Author]

Posts