Javascript: Keep text selected in div when focusing textbox - javascript

I'm working on a wysiwyg editor for my blog application on my website.
I've already written some basic editor commands like bolding, italic style and that stuff...
Now the problem is, when I wan't to do a command which needs additional information like a hyperlink.
I got a div with contentEditable on true and a textbox where I can put in the URL for the hyperlink.
I looked up in this forum and other places but I didn't find any possible solution on how to select text in the editable div, then put the desired url for the hyperlink in the textbox and finally click on a div button to call the document.execCommand("CreateLink", null, $URL); function in javascript.
Is there a possibility to select the text, then on focusing the textbox, save the position of the start and end of the selection and on clicking the button select the text again, with the saved range positions to affect the hyperlink?

Related

Unable to find some html elements using Jsoup

I am trying to find elements corresponding to "Apply" button in this page(https://gwlabs.taleo.net/careersection/gw_ext_career_section/jobsearch.ftl) using Jsoup. I am tried using Document.getElementsMatchingOwnText("Apply") but it didn't return the elements. I have tried to list all the anchor elements and print their text, i couldn't see any elements with the text "Apply". Output was the following
Text of anchor is Sign In
Text of anchor is Job Search
Text of anchor is My Jobpage
Text of anchor is OK
Text of anchor is OK
Text of anchor is Submit a friend's profile
Text of anchor is View All Jobs
Text of anchor is Advanced Search
Text of anchor is Add Organization
Text of anchor is Add Location
Text of anchor is Add Job Field
Text of anchor is Cancel
Text of anchor is Add
Text of anchor is OK
Text of anchor is Clear
Text of anchor is Save this Search
Text of anchor is Single-line
Text of anchor is Save this Search
Text of anchor is Cancel
Text of anchor is Access My Saved Searches
Text of anchor is Confirm
Text of anchor is Cancel
Text of anchor is OK
Text of anchor is OK
Text of anchor is OK
Text of anchor is You can also view all available job openings.
Text of anchor is Refer a friend
Text of anchor is Previous
Text of anchor is Next
Text of anchor is OK
The same approach was giving desired results for https://healthfirst.taleo.net/careersection/hf_ext_cs/jobsearch.ftl?lang=en
I am clueless as to why is this so, can somebody take a look please
The data you are trying to retrieve are not part of initial html, but is set by JavaScript after page is loaded. You can check it by disabling JavaScript in your browser. Jsoup only gets static html, does not execute JavaScript code.
Jsoup does not currently support JavaScript, which means that pages on which data is loaded with JavaScript will not be available when parsing using Jsoup.
If you want to get such dynamically loaded data, you can:
-Use an alternative, such as HtmlUnit, Selenium WebDriver or ui4j.
-Use the website's API, if it offers one,
-To find out from where the website loads its data, usually all you need to do is send an HTTP request somewhere to get the data as JSON.
More details can be found here:
https://stackoverflow.com/tags/jsoup/info
or you can use hints from this answer:
https://stackoverflow.com/a/50831894

how to inject text into a textbox with firefox extension

This question was probably asked few time by now... but I didn't find any solution in the last 2 days so I'm asking it in here.
I need to inject some text into a textbox that has an ID and I already know it. the scenario is like that:
The user insert a text into the textbox inside my toolbar.
The user clicks on a button in my toolar.
The function in the button should redirect the user to a new page in the background, inject a text into a specified textbox and click a button in that webpage.
Return a link that is generated on the webpage.
I know how to open a new webpage. now all is left is the rest.
I can't seem to inject the text into the specified textbox.
Also to note, I can't use greasemonkey on this project and that's why I will have to write everything I'll need to write.
If you can direct me to the starting point for this problem it would be nice.
The textbox is XUL textbox or html textarea?
It look like your scenario is simulate submit a form in background, why not just directly create a XMLHttpRequest to do this, no need to interactive with UI.
Update:
If it is a XUL textbox, you can use value property
var textbox = window.document.getElementById(textboxId);
if (textbox) {
textbox.value = 'your text';
}

Display field, allow button to edit and save html

I'm trying to create a page where a title and paragraph are displayed, along with an 'edit' button.
The goal is that the paragraph and title seems like normal text, but when the edit button is clicked, they become writeable fields that the user can edit. When the edits have been done, the user can click a save button and the html is updated.
Is this at all possible?
Furthermore, is it possible to have a 'create' button, that adds a new title and paragraph element that are blank, which the user can fill in?
I'd like to stick to html/javascript/jquery, since this won't be running on a server.
Thanks!
Plugin exists already to provide in-place editing functionnality:
jQuery InPlace Editor
jEditable

Manage mousedown events with javascript when highlighting and unhighlighting text

I've been working on some logic to process highlighted text by a user. I found a very good example by Mark Koli at http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html.
I've created a working example at: http://jsfiddle.net/metalskin/43c8h/8/
I have a problem with the code for a specific instance as follows:
select some text.
dialog appears.
close dialog.
now click without a drag to clear the highlighted text.
dialog appears.
close dialog.
text is deselected.
In my logic I'm not using a dialog (it's just easier as an example), I'm inserting a div with an image to allow the user to perform an action.
The problem is that the second click is really to clear the text, but for some reason the browser is firing the mouse up event before the browser clears the text (well under Firefox anyway). This is not obviously a problem with the dialog popping up, but with my logic I end up getting multiple div's added, and as such multiple floating images over the text.
Is there someway to determine that the event will result in the highlighted text being removed? Ideally I would rather the event fire after the browser has cleared the text.
I should explain the use case of how I'm using it.
user highlights text on a page
an icon appears above where they just released the mouse button from highlighting the text
the user selects the icon, which opens up a form to enter some details to mark against the highlighted text (the icon is removed at this point in time)
the user submits the form (ajax), the form closes.
page is displayed, highlighted text is now not highlighted (but extra markup is added).
or
user highlights text on a page
an icon appears above where they just released the mouse button from highlighting the text
the user clicks elsewhere on the page to both remove the highlighted text and remove the icon.
the user submits the form, the form closes.
I've no problems with the selected text being de-selected when the icon is chosen, but the problem is if they click on another part of the page, it reactivates the mouse event and thus double icons (or a dialog when it's not appropriate in the example provided).
Here you go ^_^
http://jsfiddle.net/43c8h/16/
I just changed this piece of code to clear the selection on the mouse up event.
if (selectedText != '') {
alert("You selected:\n" + selectedText + "\n");
window.getSelection().removeAllRanges();
}
Or if you wanted to keep the text highlighted after the user had selected it, you could call a mousedown function with the same window.getSelection().removeAllRanges(); code to clear the selection every time the mouse is clicked.

a problem with autosuggestion and tagging using jquery?

i have this script that is meant to autosuggest values based on the input and then when a user selects a value from the drop down, it should turn itself into the tag, the problem is when i select a value, it only tags the first 2 or 3 characters, you can check out the working script at js fiddle
http://jsfiddle.net/DTaMU/5/
first try typing GOOGLE then click add tag which works fine!
then try typing 'a' and selecting any value from the drop down box i.e Actionscript and see the tag, it only tags the first letter. thanks
I am not sure about your tag editor plugin and how you integrate with jquery ui dropdown, but it simply add the tag when the textbox lose focus cause 'a' being inserted. Note the dropdown designed to focus on the item cause the textbox lose focus. Please put the button and the added tags on the top so it not hidden when dropdown visible to see when it was added.

Categories

Resources