Develop Reference

html Text editor value is not getting saved

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, "&apos;").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, "&apos;").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");

Getting the id of an html on mouseover with only javascript (no jquery)

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 + "')>";

Javascript generating content from an array on user search

I'm having issues dynamically creating content from an array of images. What I want to happen is that when keywords are entered into the searchbar (try "joyride" or "nick"), all of the images that match the keywords show up. Currently, only one image shows up, and it doesn't necessarily match the keyword. I think I'm going wrong with the javascript function - I feel like I shouldn't be using innerHTML to create the photos, especially because when the keyword is deleted, it just leaves the one image.
Would it be easier to do it all in jQuery/javascript, instead of generating the initial gallery of images in jQuery and trying to do the filtering in javascript? I'm lost.
http://scf.usc.edu/~uota/itp301/final/odc-photos.html
This is a working version of the page, with the arrays and other code that I am using.
Thanks in advance!
$(document).ready(function(){
for(var i = 0; i < src.length; i++){
var content = "<div class='pics' id='imagesection" + i + "'>";
content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
content += "</div>";
$("#gallery").append(content).hide().fadeIn(250);
}
});
var songSearch = function(keyword){
var foundFlag = false;
var content = "";
for (var i = 0; i < src.length; i++){
if (tags[i].toLowerCase().indexOf(keyword) != -1 || keyword == "") {
content = "<div class='pics' id='imagesection" + i + "'>";
content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
content += "</div>";
findFlag = true;
}
}
if(findFlag){
document.getElementById("gallery").innerHTML = content;
}
else{
content = "Your search did not return any results.";
}
}
</script>

It looks like the problem is on this line in the songSearch function:
content = "<div class='pics' id='imagesection" + i + "'>";
You are redefining the variable content instead of concatenating it. This way it will always be just the last image. Try changing it to:
content += "<div class='pics' id='imagesection" + i + "'>";
There is also have a variable inside the songSearch function called foundFlag that is later referenced as findFlag. That shouldn't be causing the issue though.

append not appending content but replacing it

I am using jquery .load function to load the results from server and append it in my html:
$("#content").load('Get/classPosts?class=arts&min=1', function (responseText, textStatus, XMLHttpRequest) {
arr = $.parseJSON(responseText);
for (i = 1; i < arr.length; i++) {
if (arr[i] != null) {
$('#content').append("<section class='contentpost'><div class='contentimg'><a href='" + arr[i][0] + "'><img src='" + arr[i][2] + "'/></a> </div><div class='contenttitle title'><a href='" + arr[i][0] + "'>" + arr[i][1] + "</a></div></section>").slideDown(100);
}
}
});
As far as fetching and appearance of of data through .load is concerned its fine, but there are few issues that i am facing with this:
most important is that it is not actually appending the new data at
the end of the #content but it is just replacing the existing html
with the new one.
And before inserting the new data at the top of #content there is raw JSON string is being displayed, like this:
[
["93","Title-1","http://stackoverflow.com"],
["92"," Title-2","http://stackoverflow.com"],
["90"," Title-3","http://stackoverflow.com"],
["89"," Title-4","http://stackoverflow.com"],
["89"," Title-5","http://stackoverflow.com"],
null,null,null,null,null]
I don't know why it is there on page.
However, this would be a little off question but i would appericiate if somebody can also help me with .slideDown(100); function at the end, i want each new content to come out as animated sliding down but its not working also.
thankyou!

load() does this by default. When you call load first, you are telling it to replace the html inside the #content div. You need to use GET or POST to retrieve the information and then append it to #content.
Something like this:
$.get('Get/classPosts?class=arts&min=1', function (data) {
if(data.length > 0) {
arr = $.parseJSON(data);
var newId;
for (i = 1; i < arr.length; i++) {
if (arr[i] != null) {
// unique id for slidedown to work
newId = $('.contentpost').length;
$('#content').append("<section id='contentpost-"+newId+"' class='contentpost'><div class='contentimg'><a href='" + arr[i][0] + "'><img src='" + arr[i][2] + "'/></a> </div><div class='contenttitle title'><a href='" + arr[i][0] + "'>" + arr[i][1] + "</a></div></section>");
// slide down pointing to the newly added contentposts only
$('#contentpost-'+newId).slideDown(100);
}
}
}
});
What you also need to do is set the contentpost class' to hidden in css, something like:
.contentpost {
display:none;
}
You need this or the slidedown won't work. The div needs to be hidden.

inline if else statements in jQuery

I have a jQuery function that is executed by two different buttons.
$("#btnSearch, #btnDirectorSearch").click(function () {
Part of the html that this function builds depends on which button was hit. I am using data- attributes to store my variables like this:
var div = $(this).data("str");
And the html string I am building depends on what value the variable "div" is. Is there a way to do an inline if/else statement in jQuery?
if div = "choice1" {
html += '<tr data-str = "str1" data-dataItem = "dataItem1" data-result-title = "' + name + '" data-result-id="' + sel + '">';
} else {
html += '<tr data-str = "str2" data-dataItem = "dataItem2" data-result-title = "' + name + '" data-result-id="' + sel + '">';
}
That seems cumbersome and I'm hoping there is a better jQuery way of doing this.
Thanks!

you have a syntax error
if div = "choice1"
should be
if (div == "choice1")
Anyway, the pattern you're looking for is:
div == "choice1" ? <code for true> : <code for false>

you can use condition ? code when true: code when false
but i would suggest you to stick with curley braces only, as it looks better and easier to debug.
one more thing , do it as below
if(div==="choice1"){
}
else{
}
use ===

Since it's only the number that changes in the output, you could do this:
var num = div == "choice1" ? 1 : 2;
html += '<tr data-str="str'+num+'" data-dataItem="dataItem'+num+'" data-result-title="'+name+'" data-result-id="' + sel + '">';

If your choices are limited, you could add a small lookup array:
var choices = {
choice1: {
str: "str1",
data: "dataItem1"
},
choice2: { ... }
};
html += '<tr data-str="' + choices[div].str
+ '" data-dataItem="' + choices[div].data
+ '" data-result-title="' + name + ... etc;