I want to use a text editor in my page.the editor that I have used is
"Responsive-WYSIWYG-Text-Editor-with-jQuery-Bootstrap-LineControl-Editor"
This my div tag on which I have applied the text editor and like this I have 5 more div tags with different id's on which I have used this editor
<div rows="" cols="" class="form-control Editor-editor" type="text" id="achievementresponsiblity" detail="industry" indus="indus" placeholder="Responsibilities And Achievements" name="Responsibility"></div>
when I am trying to save the content or text written/entered in these divs it's not saving any data. I mean it's not taking the value written in it. Json that I have created for it is as follows
$("#Projectssave").click(function () {
var remarks = 0;
jsondata = "";
if ($('[type="checkbox"][industry="project"]').prop("checked") == true) {
remarks = 1;
}
jsondata += "'ProjectTypeId':'5',"
jsondata += "'Remark':'" + remarks + "',"
jsondata += "'Responsibility':'" + $("#achievementresponsiblity").text().replace(/'/g, "'").replace(/"/g, "&Double;").replace(/</g, "<").replace(/>/g, "&tg;").replace(/\\/g, """) + "',";
$.each($('input[detail="Projects"][type="text"],input[detail="Projects"][type="number"],textarea[detail="Projects"],select[detail="Projects"]'), function () {
jsondata += "'" + $(this).attr('name') + "':'" + $(this).val().replace(/'/g, "'").replace(/"/g, "&Double;").replace(/</g, "<").replace(/>/g, "&tg;").replace(/\\/g, """) + "',";
});
jsondata = jsondata.substr(0, jsondata.length - 1);
jsondata = '{' + jsondata + '}';
saveindustrlial(jsondata, $(this).attr("savetype"), "Projects Details");
});
but it just save null data in it. I don't know how to deal with it I am done with trying almost everything.
You can find some documentation about the LineControl editor here: https://github.com/suyati/line-control
To get the text from the editor:
$("#achievementresponsiblity").Editor("getText");
To set the text in the editor:
$("#achievementresponsiblity").Editor("setText", "Your text value");
Related
I Have 3 input text in a form, that i would like to joini like this after pressing a button:
TextA-TextB TextC.
I also would like that will be positioniting on th first free line of the text area.
if for eaxmple ther is this situation:
2018-12345 25.00,
i would like that inserting the datas in the 3 text, will become like this:
2018-12345 25.00
TextA-TextB TextC
I imagine that i need javascript and calling the function with event onclick on the button, but i am not into javascript, because of that i am asking for your kind help.
Thanks for the fast answer.
I tried to combine a couple of codes that i found online, but i always get error 404 when I try it on fiddle:
<script>
function fillMessage() {
var annoTA1 = document.getElementById('annoTA') + " ";
var numTess1 = document.getElementById('numTess') + " ";
var impVer1 = document.getElementById('impVer1') + " ";
msg.value = annoTA1.value + numTess1.value + impVer1.value;
var targ = event.target || event.srcElement;
document.getElementById("message").value += targ.textContent || targ.innerText;
var Message= "";
function addText(text) {
Message+= text
}
document.getElementById("message").value = Message;
} </script>
and for the onclick event I used:
<button onclick="fillMessage()">Aggiungi Nuova Tessera</button>
the original fiddle is this:
http://jsfiddle.net/qmrt7z0w/
and plus I added
var Message= "";
function addText(text) {
Message+= text to test there before.
I solved with this script:
<script>
$('#btn').on('click', function (){
var insertText = $('#annoTA').val() + " ";
insertText += $('#numTess').val() + " ";
insertText += $('#impVer').val() + " ";
if(document.getElementById("annoTAG").value == ' ')
{
$('#annoTAG').val( $('#annoTAG').val() + insertText);
}
else
{
$('#annoTAG').val( $('#annoTAG').val() + '\n' + insertText);
}
});
</script>
And for the button i had to use:
<input type="button" value="Aggiungi Nuova Tessera" id="btn" />
Otherwise is not working...
Everything works good now, just that when I am inserting. The first row, it starts with a space. I tried to adding the backspace like this:
if(document.getElementById("annoTAG").value == ' ')
{
$('#annoTAG').val( $('#annoTAG').val() + '\b '+ insertText);
}
But did not works. Any suggestions?
Thanks
I'm kind of stuck on a problem, I’m trying to import a text file from my local computer to JavaScript and populate HTML drop down's according to the text file. I have spent a lot of time looking at similar questions on stack overflow and i haven't found the solution to the problem yet. Here is an example of what the text file looks like:
Dogs -
Blue Dog
Black Doggo
Random Doggo
Cats -
Neon cat
Grumpy cat
Potato cat
Here is what my JS looks like:
function LoadTxtFile(p) {
var AllTxtdata = '';
var FileRead = new FileReader();
FileRead.onload = function (e) {
if (FileRead.readyState === 2) {
AllTxtdata = FileRead;
var lines = FileRead.result.split('\n').map(function (line) {
return line.trim();
});
var select = $("select[name=MySelect]");
var optionCounter = 0;
var currentGroup = "";
lines.forEach(function (line) {
if (line.endsWith(" -")) {
currentGroup = line.substring(0, line.length - 2);
optionCounter = 0;
select.append("<optgroup id'" + currentGroup + "' label='" + currentGroup + "'>");
} else if (line === "") {
select.append("</optgroup>");
} else {
select.append("<option type='checkbox' id='" + (currentGroup + optionCounter) + "' name'"
+ (currentGroup + optionCounter) + "' value='"
+ line + "'>" + line + "</option>");
}
});
};
}
}
HTML
<div class="Bark">
<input type="file" id="file" />
</div>
i'm trying to populate HTML dropdown select "MySelect" with an option group and options.
You're missing couple of things in your code.
Attach the event to the file control.
Read the actual file from within the function.
Here, I have created a Fiddle using your own code. Below, I am only highlighting the lines of code that, I have added there. Rest of the code is same.
Get the target file first, inside LoadTxtFile().
var targetFile = p.target.files[0];
Once, it's established, that there are files, start reading the file in the last line.
FileRead.readAsText(targetFile);
Finally, outside the method declaration, attach the event to the file control.
document.getElementById('myFile').addEventListener('change', LoadTxtFile, false);
My question is this, if I have an Text html element that looks like...
<a id='1' onmouseover="changeImage('setname/setnumber')">Cardname</a>
Can I retrieve the id (in this case 1) on a mouseover event so that I may use it in javascript to do something else with it.
Not sure if I can do this, but I'm hoping I can. What I have is a bit of javascript code that is taking data from an xml document. I have a list of 500+ cards that I have parsed through and stored by categories that are used often. Here are the relevant functions as they apply to my question.
var Card = function Card(cardName, subTitle, set, number, rarity, promo, node)
{
this.cardName = cardName;
this.subTitle = subTitle;
this.set = set;
this.number = number;
this.rarity = rarity;
this.promo = promo;
this.node = node;
}
Where node is the position within the list of cards, and due to the formatting of the document which I started with contains each card alphabetically by name, rather than numbered logically within sets.
Card.prototype.toLink = function()
{
var txt = "";
this.number;
if (this.promo == 'false')
{
var image = this.set.replace(/ /g, "_") + '/' + this.number;
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + "')>";
txt += this.toString() + "</" + "a>";
}
else
{
var image = this.set.replace(/ /g, "_") + '/' + this.rarity + this.number;
var txt = "";
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ')>";
txt += this.toString() + "</a>";
}
return txt;
}
Here is what I am using to populate a list of cards, with names that upon hovering over will display a card image.
function populateList () {
for (i = 0; i<cards.length; i++)
document.getElementById('myList').innerHTML += '<li>'+cards[i].toLink()+</li>;
}
What I am trying to do is retrieve the id of the element with the onmouseover event so that I can retrieve everything that is not being saved to a value.
I realized I can pass the id as part of the changeImage function as a temporary workaround, though it involves rewriting my toLink function and my changeImage function to include a second argument. As a married man, I've enough arguments already and could do with one less per card.
In summary, and I suppose all I needed to ask was this, but is there a way using only javascript and html to retrieve the id of an element, onmouseover, so that I may use it in a function. If you've gotten through my wall of text and code I thank you in advance and would appreciate any insights into my problem.
if I have an Text html element that looks like...
<a id='1' onmouseover="changeImage('setname/setnumber')">Cardname</a>
Can I retrieve the id (in this case 1) on a mouseover event so that I may use it in javascript to do something else with it.
Yes, if you can change the link (and it looks like you can):
<a id='1' onmouseover="changeImage('setname/setnumber', this)">Cardname</a>
Note the new argument this. Within changeImage, you'd get the id like this:
function changeImage(foo, element) {
var id = element.id;
// ...
}
Looking at your code, you'd update this line of toLink:
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ', this)>";
Of course, you could also just put the id in directly:
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ', " + this.node + ")>";
And then changeImage would be:
function changeImage(foo, id) {
// ...
}
I didn't use quotes around it, as these IDs look like numbers. But if it's not reliably a number, use quotes:
txt += "<a id='" + this.node + "' onmouseover=changeImage('" + image + ', '" + this.node + "')>";
I am trying to run the code but i do not know what is causing the issue. It was working before, now when i try like this:
function makeUnderline(formName,editor) {
var txt = window.prompt("Enter the text you wish to be underlined.", "Enter Text Here");
if (txt != null) {
document.formName.editor.value += "<u>" + txt + "</u>";
}
document.formName.editor.focus();
}
<input type="button" name="bUnderline" value=" underline " onClick="makeUnderline('formFaqs','answer');" alt="Use this button to create text that is underlined." title="Use
this button to create text that is underlined.">
I am getting Error:
TypeError: document.formName is undefined
document.formName.editor.value += "<u>" + txt + "</u>";
You are passing in the form name as a variable, you need to use bracket notation.
document.forms[formName].elements[editor].value += "<u>" + txt + "</u>";
I write a form that inserts some xml tags into textarea. I use this function:
(function ($) {
addCustomTag = function (name, param, value) {
var code = "<" + name + " " + param + "=\"" + value + "\">\n</" + name + ">";
document.getElementById("codeArea").value += code;
};
})(jQuery);
How can I make that some other function will insert subtags into tags that were created before?
XML code will never be used on server. All I need is to insert tex in specific line which is depends on what was on this line before not cutting it. Something like this:
addCustomSubtag = function(name,param,value,parent) {
document.getElementById("codeArea").selectionStart = document.getElementById("codeArea").value - parent.length;
var code = "<" + name + " " + param + "=\"" + value + "\">\n</" + name + ">";
document.getElementById("codeArea").value += code;
};
Javascript isn't necessary. It also can be written on jQuery.
Thanks.
You can any of these jQuery functions
http://api.jquery.com/append/
http://api.jquery.com/appendTo/
http://api.jquery.com/prepend/
Update:
Actually we can use jQuery DOM manipulation methods to manipulate XML also.
var xml = "<main/>";
alert(xml); // <main/>
var $xml = $(xml).append($("<sub1/>"));
alert($xml.html()); // <sub1></sub1>
$xml.find("sub1").append($("<sub2/>"));
alert($xml.html()); // <sub1><sub2></sub2></sub1>
alert($xml.get(0).outerHTML); // <main><sub1><sub2></sub2></sub1></main>