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.
Related
I am using php laravel and so it uses blade template to render the views. Following is the javascript code to append html script :-
$(function () {
var count = 0;
$("#min_bonus_value").click(function () {
count++;
var min_bonus_html =
'<div class="min_bonus_row">' +
'<hr>' +
'<div class="row">' +
'<div class="col-md-2">' +
'<div class="form-group">' +
'<label for="bonus_day[' + count + ']">#lang('admin.message759')<span class="text-danger">*</span></label>' +
'<select class="select2 form-control" id="bonus_day[' + count + ']" name="bonus_day[' + count + '][]" data-placeholder="#lang('admin.message759')" multiple>' +
'<option value="1">Monday</option>' +
'<option value="2">Tuesday</option>' +
'<option value="3">Wednesday</option>' +
'<option value="4">Thursday</option>' +
'<option value="5">Friday</option>' +
'<option value="6">Saturday</option>' +
'<option value="7">Sunday</option>' +
'</select>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
Following is the piece of blade template code where the above html needs to be appended, I want to append 'select2' class which is styled to select multiple days, but in vain :-
<div id="minimum_bonus">
</div>
I may be off here but when you say "not the classes", do you actually mean the Javascript/jQuery funcionality?
If so, I'll try to explain what is happening: when you initialize a jQuery plugin, like select2, it acts upon what exists in the DOM at the moment you initialize it. So if you later create new items, these won't have the select2 functionality, unless you initialize it again for said new items.
I suggest you create a function to initialize select2 and call it whenever you add new elements to your DOM. You'd need to somehow single out the elements that have already been initialized. You can do so with a class, in this example, the class is 'select2-enabled'. Like this:
function initSelect2() {
$(".select2").each(function(){
if (!$(this).hasClass('select2-enabled')) {
$(this).addClass('select2-enabled');
$(this).select2({
// all your select2 options
});
}
});
}
And then, after you append your new html, you can call your function to initialize select2 on the new elements:
$(parentElement).append(newHTML);
initSelect2();
I'm generating a span tag in the following way:
var clss = $(this).attr("dclss");
<span id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'" class=" anyi '+clss+'"></span>
When i click on this span, his class is changing to "active". After that when i click on the other span i want to remove this active class, but not sure how.I've tried this:
$(".selected .content").on('click','.close-icon', function(){
var clss = $(this).attr("dclss");
$(this).closest('.liveicon').fadeOut(500);
$("#anyi " + clss ).removeClass("active");
});
But i got class undefined. Any ideas how to get the span class with jQuery ?
HTML:
str += '<div class="liveicon" id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'">';
str += '<span class="close-icon" id="close-icon">✖</span>';
str += '<span id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'" class=" anyi '+clss+'"></span>';
str += '<div class="clearboth"></div>';
str += '<div class="codes">';
str += '<div class="tit">FONT</div><input type="text" class="fontsc" value="[anyicon i=\''+clss+'\' '+stylestr+']">';
str += '<div class="tit">PNG</div><input type="text" class="pngsc" value="[anyicon i=\''+clss+'\' '+stylestr+' type=\'png\']">';
str += '<div class="tit">SVG</div><input type="text" class="svgsc" value="[anyicon i=\''+clss+'\' '+stylestr+' type=\'svg\']">';
str += '</div>';
str += '</div>';
"dclss" isn't a valid html attribute, so that may be causing the issue. In general, for custom attributes, you should use the "data-" prefix, so try it with "data-previous-class".
Another approach is to use the attribute instead of a CSS class, so just do $(this).attr("data-is-active", "false") and $(this).attr("data-is-active", "true"). You can write a css selector like this:
span[data-is-active="false"] {
//inactive CSS
}
span[data-is-active="true"] {
//active CSS
}
What I'm trying to do is clone a template select dropdown element, alter it's attributes some, and then look to see if a string exists as an option value and if it does then go ahead and preselect that option value before I append it.
/* Generated HTML inputs for mapping */
function build_map_input( col_name ) {
var select = jQuery("#leads_map").clone();
/* alter dropdown attributes */
select.attr( 'id' , col_name );
select.attr( 'style' , '' );
select.attr( 'name' , col_name );
/* attempt to preselect values if applicable */
/*** This is where I need help. My needle is col_name ****/
var select_html = select.prop('outerHTML');;
/* build html */
var html= '<div class="row">';
html += ' <div class="col-md-3">';
html += col_name;
html += ' </div>';
html += ' <div class="col-md-3">';
html += select_html;
html += ' </div>';
html += '</div>';
/* append html to map container */
jQuery('#map-container').append(html);
}
I tried your code in my pc and it's working very well. However I suggest this codes :
/* build html */
var html= '<div class="row">';
html += ' <div class="col-md-3">';
html += col_name;
html += ' </div>';
html += ' <div class="col-md-3">';
html += select_html;
html += ' </div>';
html += '</div>';
replace to this one :
var html = $('<div/>', { class: "row" });
$('<div/>', { class: "col-md-3", text: col_name }).appendTo(html);
$('<div/>', { class: "col-md-3", html: select_html }).appendTo(html);
In this way, reading of code will be easy and nice.
Also you can use $ mark instead of jQuery.
In php, if I'm echoing html I would usually break PHP then turn it back on again. Even if I had one variable in the middle e.g.
echo " ?>
<div class="className">Hello World</div>
<div class="className">it's a <?=$kindOfDay?></div>
<div class="className">day today</div>
<? "; ?>
Is there a way to do something similar in javascript? To allow me an easier way to write e.g.
html += '<div class="className">Hello World</div>';
html += '<div class="className">it\'s a ' + kindOfDay + '</div>';
html += '<div class="className">day today</div>';
Maybe this?
html = '<div class="className">Hello World</div>' +
'<div class="className">it\'s a great</div>' +
'<div class="className">day today</div>';
Arrays are the best for this, Try:
var kindOfDay = 'great',
html = ['<div class="className">Hello World</div>',
'<div class="className">it\'s a '+ kindOfDay + ' great</div>',
'<div class="className">day today</div>'].join('');
You could put the three elements into a single string, but there is not really any easier way to write it.
Edit:
To use a multi-line string in javascript, you can do
html +=
"This \
is \
a \
sentence.";
Keep in mind that some browsers will insert newlines, and some wont.
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);