Specific HTML code generator using Jquery - javascript

I made a website, but now I came with an idea to make a code generator. You have to insert text in text boxes and it will generate code.
$("input").keyup(function() {
$("#result").text(
'<div width="' + $("#width").val() +
'px" height="' + $("#height").val() +
'px">' + $("#content").val() +
'</div>');
});
I found this solution on http://jsfiddle.net/NzFeb/ but it doesn't work somehow with my code.
You can see what I did (CSS and Markup) at http://go.filiparag.com/mnmuis-generator but now I need Jquery code.
What I have done with Jquery (it doesn't work):
$("input").keyup(function() {
$("#code").text(
'<!--POST-->
<div id="post"> <div id="' + $("#tag").val() + '" class="tag_post"></div>
<a href="' + $("#image-link").val() + '" data-lightbox="' + $("#title").val() + '" title="' + $("#title").val() + '">
<img src="' + $("#image-link").val() + '" width="'IMAGE_WIDTH'" height="'IMAGE_HEIGHT'" id="post-image-right"/> </a>
<text id="post-title">' + $("#title").val() + '</text> <br>
<text id="post-short-story">' + $("#short-story").val() + '</text> <br> <br>
<text id="post-text">
' + $("#story").val() + '
</text>
</div>
<!--POST END-->'
);
});
These id's are from <input type="text"> and <textarea>.

If i understand your problem correctly, this is the desired code or result http://jsfiddle.net/NzFeb/
if so then your problem is here
' width="'IMAGE_WIDTH'" height="'IMAGE_HEIGHT'"'
// is IMAGE_WIDTH a variable or part of the string
// if its a variable use the plus sign
' width="' + IMAGE_WIDTH + '" height="' + IMAGE_HEIGHT + '"'
// if its part of the string remove the single qoute
' width="IMAGE_WIDTH" height="IMAGE_HEIGHT"'
if the fiddle i pointed to is not the desired code then, change text() to html()
$("#code").html(
side note: <text> is not a valid html tag

Related

File value is still displaying in the table even if implemented input.value=' ' in javascript

I managed to check the file extension type and detect fake files but the problem that I'm facing now is after the alert message(alert that the image is fake) the details of the file are still being displayed in the table. How to remove the details from being display in the table after the alert message.
https://i.stack.imgur.com/9a2x4.png
Here's the code of my work:
https://jsfiddle.net/auwhk7v1/1/
Here's one of the code that displaying details of the files:
vpb_added_files_displayer += '<tr id="add_fileID' + vpb_file_id + '" class="' + new_classc + '"><td>' + vpb_file_icon + ' ' + this.vpb_files[i].name.substring(0, 40) + '</td><td><span id="uploading_' + vpb_file_id + '"><span style=color:blue;>Ready</span></span></td><td>' + vpb_actual_fileSize + '</td><td><select class="form-control required type_doc_'+vpb_file_id+'" id="type_doc" name="type_doc" value="" title="File Type for document/photo" onchange="get_doc_type(this.value, \'' + vpb_file_id + '\')" required/><option value="0">Please Select</option>'+load_checklist('type_doc', vpb_file_id)+'</select></td><td><span id="remove' + vpb_file_id + '"><span class="vpb_files_remove_left_inner" onclick="vpb_remove_this_file(\'' + vpb_file_id + '\',\'' + this.vpb_files[i].name + '\');">Remove</span></span></td></tr></div>';
vpb_added_files_displayer2 += '<tr id="add_fileID' + vpb_file_id + '" class="' + new_classc + '"><td>' + vpb_file_icon + ' ' + this.vpb_files[i].name.substring(0, 40) + '</td><td><span id="uploading_' + vpb_file_id + '"><span style=color:blue;>Ready</span></span></td><td>' + vpb_actual_fileSize + '</td><td><select class="form-control required type_doc2_'+vpb_file_id+'" id="type_doc2" name="type_doc2" value="" title="File Type for photos" onchange="get_doc_type(this.value, \'' + vpb_file_id + '\')" required/><option value="0">Please Select</option>'+load_checklist('type_doc2', vpb_file_id)+'</select></td><td><span id="remove' + vpb_file_id + '"><span class="vpb_files_remove_left_inner" onclick="vpb_remove_this_file(\'' + vpb_file_id + '\',\'' + this.vpb_files[i].name + '\');">Remove</span></span></td></tr></div>';
}
}
//Display browsed files on the screen to the user who wants to upload them
if (this.vpb_settings.vpb_form_id == "myForm") {
$("#add_files").append(vpb_added_files_displayer);
$("#added_class").val(new_classc);
// load_checklist('type_doc');
} else if (this.vpb_settings.vpb_form_id == "myForm2") {
$("#add_files2").append(vpb_added_files_displayer2);
$("#added_class").val(new_classc);
// load_checklist('type_doc2');
I used one of the codes that I search in stack overflow:
How to check file MIME type with javascript before upload?
I've tried files.value='' but still the details are displayed in my table. Can anyone solve this for me? Thanks in advance.

How to handle attribute with # in its name

I am facing to problem with Elasticsearch result which is using # in attribute name. Snippet of json result:
{"_index":"logs-2015.12.31","_type":"log","_id":"AVH4eA4QKV0mbJuiIHO1","_score":null,"_source":{"#timestamp":"2015-12-31T14:36:35.378Z","beat":{"hostname":"
I need to interpret its value into jquery code. See the code snippet:
case item._index.startsWith('logs-'):
$('#results-list').append( '<a href="details.jsp?id=' + item._id + '" target="_blank" class="list-group-item">'
+ '<span class="label label-info">' + item._type + '</span>'
+ '<h4 class="list-group-item-heading">' + item._source.source + '</h4>'
+ '<p class="list-group-item-text">' + item._source.#timestamp + ' - ' + item._source.beat.name + '</p>'
+ '<p class="list-group-item-text">' + item._source.message + '</p>'
+ '</a>'
How to handle the attribute if I cannot change the source?
The # character cannot be used in a literal property name, hence you need to use array notation to access it:
item._source['#timestamp']

Passing id from element via ng-click

I'm constructing quite a big <span> - element that is being generated dynamically in code.
var span = '<span id="' + dayNumber + '/' + Number(currentMonth + 1) + "/" + Number(date.getFullYear()) + '" class="day ' + respons[0] + '" ng-click="gotoDetail($event)" style="height:' + screenHeigt + 'px; display:table;"><p style="display:table-cell; vertical-align:middle;">' + dayNumber + ' </p></span>';
As you can see, the id consist of a date-string. Via the ng-click-element I would like to pass the id to the gotoDetail($event)-function. When I'm inspecting the parameter of that function, I see however that $event.target.id is empty...
Following code is an older version and does work:
var span = '<span id="' + dayNumber + '/' + currentMonth + '" class="day ' + respons[0] + ' ' + lastMonth + ' " ng-click="gotoDetail($event)">' + dayNumber + '</span>' + string;
I really don't know what I'm doing wrong in the first example...
If I check my html in the chrome-console, there's nothing wrong with the id, the ng-click, or other attributes...
Someone who has an anwser?
EDIT: Code can be found here: https://gist.github.com/anonymous/c29798e0d46f40dcfe69

string for image won't print correctly

Ok I have an array myIconPath[] of images "img/myIcons/imgIcon_12.png" <-- one example
I have some javascript that writes that writes a list item for each icon in the array
document.write('<li><a href="' + "test2.jsp" +
'" title="' + myTitleName +
'"><img src="' + myIconPath[i] +
'" alt="' + myAltName + '" /></a></li>');
This works beautifully.
But I want to get rid of the img/myIcons extension so that I can just load "imgIcon_1.png"
When I try that very thing, replacing
<img src="' + myIconPath + '"...
with
<img src="' + 'img/myIcons/' + actImageArray[i] + '"...
it only loads the first icon. the rest are blank. I'm sure there's so syntactical mistake in here. What could it possibly be though?
Use String#replace to replace the path with a blank string and then trim it.
var imgSrc = myIconPath[i].replace('img/myIcons/', '').trim();
document.write('<li><a href="' + "test2.jsp" +
'" title="' + myTitleName +
'"><img src="' + imgSrc +
'" alt="' + myAltName + '" /></a></li>');

Jquery / Javascript: There is a NaN on my HTML

I am writing an HTML loop using javascript. It will loop through a series of images and display them with additional information. It appears that there is always a NaN showing on the HTML output as shown here.
Here is the javascript in question:
var caption = '<p></p>';
if($.isEmptyObject(data[i].caption) !== true)
{
caption = '<p class="caption" style="top:'+data[i].height+'px;">'+
data[i].caption +
'</p>';
}
var li = '<li data-uk-modal="{target:#modal-open-image}"'
+ 'class="open"'
+ 'image="'+ data[i].photo +'"'
+ 'caption_height="'+ data[i].height +'"'
+ 'caption="'+ data[i].caption +'">'
+ '<a href="#" class="uk-thumbnail uk-overlay-toggle">'
+ '<div class="uk-overlay">'
+ '<img src="'+ data[i].photo +'" width="250px"/>'
+ caption +
+ '<div class="uk-overlay-caption">'
+ '<p> Sender: ' + data[i].sender + '</p>'
+ '<p> Date: ' + data[i].date + '</p>'
+ '<p> limit: '+ data[i].limit + '</p>'
+ '<p> counter: ' + data[i].counter + '</p>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</li>';
$photo.append(li);
I would think the problem would lie on the caption variable. the data[i] is an array of from a database query.
I need to check if there is something on the data[i].caption. I tried using length, but that doesn't work, so I check if the object exist. Though I am not sure if that works.
My question, is how to display properly check if the caption is empty, and if none it will not add anything on the var li.
Thanks.
You can code it in one line:
( (data && data[i] && data[i].caption) ? " your stuff " : "")
But pay attention that checking 'data[i].caption' in javascript means that: zero is false, empty string is false.
Furthermore if you referring a number you can add a condition using the method isNaN
Please use this one in place of the '+ caption +'
isNaN(data[i].caption) ? '' : data[i].caption
or if(isNaN(data[i].caption)==true){
//do somthing
}else{
//do somthing
}
Thanks for the feedback. I manage to gobble up the solutions you game me and I ended up with this.
var height = (data[i].height == null)?0:data[i].height;
var caption= (data[i].caption== null)?'':data[i].caption;
var li = '<li data-uk-modal="{target:\'#modal-open-image\'}"'
+ 'class="open"'
+ 'image="'+ data[i].photo +'"'
+ 'caption_height="'+ height +'"'
+ 'caption="'+ caption +'">'
+ '<a href="#" class="uk-thumbnail uk-overlay-toggle">'
+ '<div class="uk-overlay">'
+ '<img src="'+ data[i].photo +'" width="250px"/>'
+ '<p class="caption" style="top:' + height +'px;">'
+ caption
+ '</p>'
+ '<div class="uk-thumbnail-caption">'
+ '<p> Sender: ' + data[i].sender + '</p>'
+ '<p> Reciever: '+ data[i].reciever + '</p>'
+ '<p> Date: ' + data[i].date + '</p>'
+ '<p> limit: '+ data[i].limit + '</p>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</li>';

Categories

Resources