When I'm using this code:
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "GET",
url: "nyhederlang.xml",
dataType: "xml",
success: parseXml,
error: function(){alert("Error: Something went wrong");}
});
});
function parseXml(xml)
{
//print the title and the description
$(xml).find("article").each(function()
{
$("#output").append("<div>");
$("#output").append("<b>" + $(this).find("title").text() + ":</b> <br />");
$("#output").append($(this).find("paragraphs").text());
$("#output").append("</div>");
});
}
</script>
I get both div and /div in the beginning of #output.
Why isn't /div placed at the end of #output?
This is what it looks like:
<div id="output">
<div></div>
<b>Some title text</b>
.
.
.
.
.
$("#output").append("<div>");
doesn't append just "<div>" but a well formed (closed ) html element. That is a complete div.
The solution is to build your complete HTML and then append it :
var html = "<div>";
html += "<b>" + $(this).find("title").text() + ":</b> <br />";
html += $(this).find("paragraphs").text();
html += "</div>";
$("#output").append(html);
You could also append to the first appended div its content but, as is pointed by Ian, it's always more efficient to minimize the number of appendings.
You can't append a partial <div> tag.
jQuery will close the tag for your automatically when you append it, so the following append will therefore be placed after the intial <div>. And the final </div> you append will be another empty div after it.
What you should do is build up the whole string, and append it in a single .append() call.
$("#output").append("<div>
+"<b>" + $(this).find("title").text() + ":</b> <br />"
+$(this).find("paragraphs").text()
+"</div>");
Instead of appending each element; add it to a string then append that string. Ex:
var html = "";
html += "<div>"
html += "<b>" + $(this).find("title").text() + ":</b> <br />";
html += $(this).find("paragraphs").text();
html += "</div>";
$("#output").append(html);
Related
I have used ajaxSubmit to upload file to linux server successfully. After upload file, name+size+delete should be appear in my website.
For example, 1.jpg、2.jpg、3.jpg were uploaded to server, my submit website shoule be appeared like:
1.jpg 3k delete
2.jpg 4k delete
3.jpg 5k delete
Before upload files, My html structure is :
<td style="width:30%" id="impPic">
<div class="btn">
<span>addFile</span>
<input id="fileupload" type="file" name="mypic">
</div>
<div class="files"><b>...</b><span>...</span></div>
</td>
After uploaded three files, I wanted html like:
<td style="width:30%" id="impPic">
<div class="btn">
<span>addFile</span>
<input id="fileupload" type="file" name="mypic">
</div>
<div class="files"><b>...</b><span>...</span></div>
<div class="files"><b>...</b><span>...</span></div>
<div class="files"><b>...</b><span>...</span></div>
</td>
My files has fixed css style:
.files{height:10px; font-size:10px;line-height:22px; margin:10px 0}
Here is my ajaxSubmit code:
var divD=1;
$(function () {
var files = $(".files");
newDiv = "<div class='files'+divD+''><b class='dataname'>'+data.name+'('+data.size+'k)</b> <span class='delimg' name='+data.name+'('+data.size+'k)' rel='+data.pic+'>delete</span></div>";
$("#fileupload").change(function(){
$("#myupload").ajaxSubmit({
dataType: 'json',
beforeSend: function() {
......
},
uploadProgress: function() {
},
success: function(data) {
$(newDiv).insertAfter($('#impPic div:eq('+divD+')'));
divD = divD + 1;
$('.files').html("<b class='dataname' >"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>delete</span>");
},
error:function(xhr){
......
}
});
});
});
But unfortunately, it failed. I suppose files'+divD+'.html is wrong. Who can help me ?
I see two problem with your code...
First was the html string "newDiv" that you are trying to insert and the second is the invocation for jQuery .html() on an string literal object "files'+divD+'".
You are expecting the newDiv object to have a concatenated html string with the value of divD and the data came from the response but object data is undefined until the logic flows in the success callback.
and I believe the second problem would return a jquery TypeError problem, as you are trying to call the .html() function on a non DOM - jQuery object .
Update your code and try it this way:
newDiv = "";
...
success: function(data) {
newDiv = "<div class='files" + divD + "'><b class='dataname'>" + data.name + "(" + data.size + "k)</b><span class='delimg' name='" + data.name + data.size + "k' rel='" + data.pic + "'>delete</span></div>";
$(newDiv).insertAfter($('#impPic div:eq(' + divD + ')'));
divD = divD + 1;
$(".files" + divD).html("<b class='dataname'>" + data.name + "(" + data.size + "k)</b><span class='delimg' rel='" + data.pic + "'>delete</span>");
},
...
EDIT:
You can update the html string and add an Id to have a unique selector on each of the element with files class and instead of the above selector, change the class selector "." to an Id selector "#".
and your code will look like these...
newDiv = "<div id='files" + divD + "'class='files'"...
...
$("#files" + divD).html("<b class='dataname'>" + data.name + "(" + data.size + "k)</b><span class='delimg' rel='" + data.pic + "'>delete</span>");
If that doesn't suit your needs you can just leave the first example above and update your css selector to:
[class^='files'] instead of `.files`.
This will select all of the element with a class that begins with "files".
files'+divD+' is a string, and you try to call method html from string, which does not exist.
Try $('.files' + divD).html('something'); or files.find('.files' + divD).html('something');
I am dynamically creating a table through Javascript and I DO want the table to continue off the right side of the page. Doing this manually lets the table continue off, but once I feed this into a for loop the <td>s wrap into a second line in the rendered HTML, creating two or more table rows when they reach the end of the page.
<div id="panelindex" style="overflow:scroll;text-align:center;">
<table border="0">
<tr></tr>
</table>
</div>
This is inside a table of its own (no style formatting). Then the Javascript:
var q = Math.floor((1/numpanels)*500);
if(q>50) q=50;
panelindex.innerHTML = "<table border='0'><tr>"
for(i=0; i<numpanels; i=i+1)
{
panelindex.innerHTML = panelindex.innerHTML + "<td><div id='panel" + i + "' onclick='jumppage(" + i + ")' style='float:left;text-align:center;margin:8px;border-width:3;border-color:white;border-style:none;'><a href='#" + i + "'><img src='thumbnails.php?image=blowem" + zeroFill(i,2) + ".gif&GIF&tw=128&th=128&quality=" + q + "'>\n" +
"<br />" + i + "</a></div></td>\n";
}
panelindex.innerHTML = panelindex.innerHTML + "</tr></table>"
You may notice that there is a <div> in the <td> and that is so I can apply a border marking the panel. Without the <div> it seems I cannot do that, and there are some other undesired effects. Any ideas what I can do so that all the <td>s end up on one line rather than split to a new line?
Example of what I want: http://edwardleuf.org/comics/jwb/009-conmet
What is happening: https://jsfiddle.net/w4uh0a3j/7/
Click the Show link.
innerHTML does not hold the string value you assign to it.
It parses the value as HTML, creates a DOM from it, inserts it into the document and then, when you read it back, it converts that DOM back into HTML.
This means that the string you assign is subject to error recovery and normalisation. In particular, the end tags you omitted are fixed.
panelindex.innerHTML = "<table border='0'><tr>"
console.log(panelindex.innerHTML);
<div id="panelindex" style="overflow:scroll;text-align:center;">
<table border="0"><tr>
</tr></table>
</div>
So when you start appending more data to it:
panelindex.innerHTML = panelindex.innerHTML + "<td>etc etc
You end up with:
<table border="0"><tbody><tr></tr></tbody></table><td>etc etc
Store your data in a regular variable. Only assign it to .innerHTML once you have the complete HTML finished.
A better approach then that would be to forget about trying to build HTML by mashing strings together (which is error prone, especially once you start dealing with characters that need escaping in HTML) and use DOM (createElement, appendChild, etc) instead.
OK,here is fixed html and js code. It seems like innerHTML fixes missing closing when updating html before all the code is building the rest of innerHTML. This code works :
<div id="panelindex" style="overflow:scroll;text-align:center;">
</div>
and js code :
var numpanels = 100;
var q = Math.floor((1/numpanels)*500);
if(q>50) q=50;
panelindex.innerHTML = "<table border='0'><tr>";
var html = "<table border='0'><tr>";
for(i=0; i<numpanels; i=i+1) {
html += "<td><div id='panel" + i + "' onclick='jumppage(" + i + ")' style='float:left;text-align:center;margin:8px;border-width:3;border-color:white;border-style:none;'><a href='#" + i + "'><img src='thumbnails.php?image=blowem" + ".gif&GIF&tw=128&th=128&quality=" + q + "'>\n" +
"<br />" + i + "</a></div></td>";
}
html += "</tr></table>";
document.getElementById("panelindex").innerHTML = html;
With my append(html) code I would like to be able to include <script></script>
Question: How can I use the <script></script> will not allow me to add them.
As you can see at bottom of addContent() i need to include $("#page_code[' + content_row + ']").summernote({height: 300});
Script
<script type="text/javascript">
var content_row = <?php echo $content_row; ?>;
//$(document).ready(function() {
// $('#page_code').summernote({height: 300});
//});
function addContent() {
html = '<div id="content-row">';
html += '<div class="form-group">';
html += '<label class="col-sm-2">Page Content Name</label>';
html += '<div class="col-sm-10">';
html += '<input type="text" class="form-control" name="page_code[' + content_row + '][name]" placeholder="Page Content Name">';
html += '</div>';
html += '</div>';
html += '<div class="form-group">';
html += '<label class="col-sm-2">Page Content</label>';
html += '<div class="col-sm-10">';
html += '<textarea class="form-control" id="page_code[' + content_row + ']" name="page_code[' + content_row + '][code]" style="height: 300px;"></textarea>';
html += '</div>';
html += '</div>';
html += '<script>$("#page_code[' + content_row + ']").summernote({height: 300});</script>';
html += '</div>';
$('#content-row').append(html);
content_row++;
}
</script>
First of all when you are closing your script tag in the string ->
"</script>"
this is an error because "/" in strings is used for escaping, so when closing your tag you should do it
"<//script>"
Second of all - your addContent function is not called?
Jquery provide the html() method that allows you to append, in the given html element, some html. So, you can try with this : http://api.jquery.com/html/
Then, there are some confusions in the part of code that is the reason of your problem:
html += '<script>$("#page_code[' + content_row + ']").summernote({height: 300});</script>';
I think that your selection with "#page_code[..]" for an id is wrong. Because you don't have any element with this id, but with the name attribut "page_code[...]". So, even if your tag will be evaluate, your code seems to be wrong.
To select a tag by his name attribut, you can deal with a specific jquery selector : http://api.jquery.com/attribute-equals-selector/
I hope this will help you.
How could i append some text to html textarea with help of jQuery library, so, that html tag's are not as text, but as formatted html tag's (see result of div tagging, not text ). now i have such js:
...
var currentVal = $('#article_comment_text').val();
$('#article_comment_text').val(currentVal + '<div class="quote-heading">' + comment_author + " " + comment_date + '</div>' + '<div class="comment-quoted">' + comment_text + '</div>');
...
is it real? and how could i do, that text, which append to textarea is styled, not just views as text etc?
Edit:
You cannot render HTML inside textarea, you need to use contenteditable div:
<div class="textarea" contenteditable="true">This is a test</div>
Then you can do something like:
$('.textarea').html(function() {
return '<strong>' + $(this).html() + '</strong>';
});
Fiddle Demo
If i get your question right ?
So,
There is noway to insert HTML inside <textarea></textarea> so it isn't formated !
You have to make a clone of textarea,with a property of contenteditable;
Basically I have a html output in the format:
<div class="qtip-content">http://www.urlgoeshere.com/image.jpg</div>
What I want to do is use jQuery to wrap this in an image tag so the output is
<div class="qtip-content"><img src="http://www.urlgoeshere.com/image.jpg" /></div>
I have multiple instances of these on the page, and each url is different.
How can I do this?
This will handle each element on your page
$(".qtip-content").each(function() {
$(this).html("<img src='" + $(this).html() + "' />");
}
$('.qtip-content').each(function(){
$(this).html("<img src='"+$(this).html()+"'/>");
});