HierarchyRequestError in IE for TinyMCE - javascript

I'm using TinyMCE 3.4.8 and there I noticed that if your cursor is in editor and then if you click on any plugin like insert image then it works fine. But if your cursor is not in textarea, means you click somewhere else in Tiny like the title bar or blank space outside textarea and then after that if you click on any plugin then you'll see the below error in IE console.
The code in Line 6209 is given below.
g.insertNode(m.create("span", {
"data-mce-type": "bookmark",
id: i + "_start",
style: u
}, l))
Now what I get from this is that when you click on any plugin it inserts a span tag for bookmarking purpose, but if the cursor was not in textarea then in that case inserting the node to undefined object causes the above error. I want to know how to solve this, so that even if user clicks outside then also the image gets inserted to last known cursor position.

Related

jquery validation plugin detects errors, but no messages appear, why not?

I'm using the jQuery Validator plugin 1.19.5 on a slightly large (but simple) form generated from a PDF by an online converter to html5
The form has a Submit button implemented as a button with onclick to a javascript function within the formviewer.js file that is part of the conversion to html5. If I open the form in Chrome 107.0.5304.107 Developer Tools, I can see that the Submit button goes to the following code that I added to the success branch of the function that handles the submit in formviewer.js:
success: function() {
const OSHform=$("form").eq(0);
if (OSHform.valid()) {
top.document.location.href = "/Adsentry/completed";
}
else {
alert("Fields did not validate, please fix errors and try again");
}
},
failure: function() {
alert("Form failed to submit, please try again")
}
In a separate script, I invoked validate() on the form element, passing it rules for the fields to validate.
var $j = jQuery;
var OSHform = $j("form");
OSHform.validate({
rules: {
"NAME OF DRIVER": "required",
"EMAIL": "required",
"EMAIL": "email",
"ADDRESS": "required"
}
});
If I omit required fields, or enter an invalid email address in an email field, the call to valid() returns false. And in fact, if I look at the input elements in the Elements tab, I can see that class="error" gets added, and if I correct the error it changes to class="valid". Additionally, with class="error", a label gets added for that element, also with class="error", and correcting the problem adds style="display:none;" to the label.
So everything is great, except that there is no text or message that goes with the label, so its presence/absence, or the presence/absence of display:none on it, has no effect on the normal display of the page.
I have tried stepping through the code in the debugger, but I'm afraid my javascript is so weak I can't really figure out what's going on to the extent of understanding why the messages are not being displayed.
You can play with it live here for the time being, but I can't promise to stop fiddling with it! There are currently only 3 required fields: Name of driver, Address, and Email. If they are all correct, the form submits as intended.
A little disappointed that this didn't even get any comments, let alone answers. On the other hand, it turned out the answer was exactly as anyone even slightly more experienced than me would likely have guessed: errors were being reported in HTML elements, but there was no CSS to put them in the right location on the page. The plugin seemed to be buggy in failing to produce default message text describing the errors; instead, it just produced message text that was simply the name attribute of the erroneous input element. But without appropriate CSS, that name attribute was output in the black strip at the bottom of the page, making it essentially invisible. It took a sharp eye to notice the sudden appearance of "fly specs" at the bottom of the page when clicking the submit button.
The plugin just inserts an HTML element into the DOM immediately following the bad input element. But the files generated from the PDF include a style sheet with selectors using the ID of each input element to give the input element absolute placement on the page. And simply inserting an element into the DOM as the next sibling of the input element, without a style, results in having it rendered at the bottom of the page. Even when I figured out that the lack of CSS was the problem, it took me a while to get something that worked: good old selector specificity in action. All of the input elements were placed using ID selectors with absolute position, and I could find no way to have the simple next-sibling relationship of the message to the input element cause the message to be rendered immediately after the input element. Although it made me feel "icky" to do it, the solution I came up with was to use jQuery to iterate over all the message elements with the "error" class, get the ID of the input element it was reporting, and then use $.css() to get the input element's effective top, left, and width style attributes. Then strip off the trailing "px", multiply by 1 to get a numeric value, add the width to the left numeric value, and specify new top and left attributes using $.css() on the message elements. This put the messages I defined in the messages sub-object of the object passed to the validate constructor appear in the right locations. It only remains a mystery why the default messages didn't appear instead of the names of the input elements for elements that were invalid.

Changing Text Input from Chrome Bookmark

I am trying to fill out text input's on a site that does not have JQuery. However, I keep getting a null return when trying to use Javascript's getElementById function with a Google Chrome Bookmark.
How to replicate:
Go to W3Schools: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_text_value2
Add this as a bookmark:
javascript:(function(){
console.log(document.getElementById("myText"));
})();
Click on the bookmark and see "null" in the console instead of the text input.
(To get the desired output you can change W3's code to console.log the element instead of changing it's value and then click the W3's "Try it" button)
--
The goal here is to be able to change these text input values by script.
Ex) Change "Mickey" to "Johnny Bravo" through bookmark click
Drag the padlock icon to your bookmarks toolbar, right-click, edit and set the URL to:
javascript:document.getElementById("myText").value = "Johnny Bravo";document.close();
Then click it to change the value of myText. You need to close the document after setting the value or it will write to a new document.
The bookmarklet above won't work in your TryIt editor because the form is in an iFrame named 'iframeResult'. But this works:
javascript: window.frames.iframeResult.document.getElementById("myText").value = "Johnny Bravo";document.close();

Keep cursor on textarea after clicking on DIV

I have a textarea in which text pieces (stored on each data-code attribute) are appended when clicking on an specific DIV:
$(document).on('click', '.extrasPanel .contentVars div', function(e){
varCode = $('.active').attr('data-code');
varText=$(document).find('textarea').val();
$(document).find('textarea').val(varText+varCode);
checkCounter(e);
});
Once a .contenVars div is clicked, its data-code value is added to whatever is typed on textarea, and to keep typing the user must click again on the textarea.
I would like the user to keep typing after importing this pieces of text widthout needing to click back on it, so that the cursor remains on the last position, after the last imported character (as if you would have pasted it).
I have tried adding e.preventDefault; at the end of the function, with no possitive result.
If you're using jQuery, you can try .focus()
jQuery('textarea').focus();
May this link will helps you..
jquery-caret.js
This is a very simple lightweight plugin to allow you to move the caret (or cursor) position in an or element
$('textarea').caretToEnd();

ExtJs 4 - How to drag drop the contents of the text (or text area) field?

I have a form panel with several text and text area fields and would like to copy (or move) the text from one field to another by dragging. (The fields itself should stay in place).
ExtJs provides the example, which does almost what I need: field-to-grid-dd.
The problem is that it is now not possible to enter the text into the draggable text field. I assume that's because the 'mousedown' event is intercepted by the Ext.dd.DragZone object, whose method getDragData() initiates the dragging if the mouse is clicked inside the draggable element.
It there a way to put the cursor inside the text field if the user just clicks it without dragging?
I tell you how to change the ExtJS Example file (field-to-grid-dd.js), then you can change your own app codes.
Go to line 148 and comment or remove the code below:
// i.unselectable();
Then go to line 164 and add the code below before (or after, it doesn't matter) e.stopEvent();:
t.focus(); // Add This
e.stopEvent();
Of course, you can not select the value of textfield with dragging the mouse, but it does what you want.

Javascript click event not firing on element in user control in google chrome

I have a user control and an image within that and I wish to execute some javascript when it;s clicked, in the Page_Load event of my user control I add the following:
imgCalendar.Attributes.Add("onclick", "displayDatePicker('" + txtCalendar.ClientID + "');");
So I'm adding an onclick event to imgCalendar and I want that event to fill in my text box txtCalendar with the output of my Javascript function displayDatePicker, it works perfectly fine in Internet Explorer but the click event does not fire in chrome, any ideas on why this is? are there any other ways I can add that click attribute to my image?
Shouldn't you be doing something like this?
imgCalendar.addEventListener("click", "displayDatePicker('"+txtCalendar.ClientID+"')", false);
The problem was that the name of the text box control was chaning when the HTML was renderd, so the function: displayDatePicker('uc1_txtCalendar') was getting called whereas the text box's name (note that it's name property not ID is used client side since an asp text box is rendered as a html input control) was rendered to 'uc111$textCalender', that '$' thrown in in place of the underscore was the problem, I resolved this by giving everything a static ClientIDMode (for the text box and it's container which in this case is the User Control)

Categories

Resources