I have a string from a server that I need to modify before adding it to the DOM. I would like to replace <div data-role="placeholder" /> which come in a lot of formats (new line, etc) and extra attributes.
Here's an example of my string:
<span title="15 gold badges"><div data-role="placeholder" /></span>
<span title="25 starts"><div data-role="placeholder" id="test"></div></span>
How can I query for placeholders and replace it with another HTML string such as <div data-role="calendar" />?
I can see two ways of doing this. You either use the good old .replace() or you wrap it in a jQuery object and use the DOM manipulation methods.
Use string replace
var html = '<span title="15 gold badges">' +
'<div data-role="placeholder" />' +
'</span><span title="25 starts">' +
'<div data-role="placeholder" id="test">' +
'</div></span>';
$('body').append(html.replace(/data-role="placeholder"/g, 'data-role="calendar"'));
$('div[data-role=calendar]').text('yay!');
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Use jQuery methods
var html = '<span title="15 gold badges">' +
'<div data-role="placeholder" />' +
'</span><span title="25 starts">' +
'<div data-role="placeholder" id="test">' +
'</div></span>';
$(html).find('[data-role]').attr('data-role', 'calendar').end().appendTo('body');
$('div[data-role=calendar]').text('yay!');
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Related
So i have these divs created from wordpress post and they have data attribute which is taken from php <?php echo $rengdata->format('Y-m'); ?>
<div class="renginiai-box">
<div class="col-sm-3" data-renginiolaikas="2017-09"></div>
<div class="col-sm-3" data-renginiolaikas="2017-09"></div>
<div class="col-sm-3" data-renginiolaikas="2017-09"></div>
<div class="col-sm-3" data-renginiolaikas="2017-10"></div>
</div>
What I need right now is to create one single button with unique date. Result should be like this.
<div class="laikotarpis">
<button value="2017-09" class="laiko-btn">2017 09</button>
<button value="2017-10" class="laiko-btn">2017 10</button>
</div>
I have no idea what function could fit this. Should I make array or there is a jQuery function for this
You can use jQuery to iterate through all elements with the data attribute data-renginiolaikas and append a button:
$('[data-renginiolaikas]').each(function(s, e) {
var val = $(this).attr('data-renginiolaikas');
if(!$('.laikotarpis button[value=' + val + ']').length) {
$('.laikotarpis').append('<button value="' + val + '" class="laiko-btn">' + val.replace('-',' ') + '</button>');
}
});
Example: https://codepen.io/anon/pen/KZQgBw
I think that this is much closer :
$('[data-renginiolaikas]').each(function(s, e) {
if($('.laikotarpis button').val() != $(this).attr('data-renginiolaikas')){
$('.laikotarpis').append('<button value="' + $(this).attr('data-renginiolaikas') + '" class="laiko-btn">' + $(this).attr('data-renginiolaikas').replace('-',' ') + '</button>');
}
});
Fork of delinear's answer
https://codepen.io/boian-ivanov/pen/MrQjPy
Here in the JavaScript inner html i'm trying to show two buttons horizontally using Bootstrap Button Group. Like this picture
But actually it is showing just 1 button appearing like this.
Though it works fine in HTML but don't know why is it creating problem in inner HTML. Here goes the JavaScript code snippet
var div = document.createElement('div');
div.className = 'row';
div.innerHTML = '<div class="container-fluid" style="background-color: #b5ffaa; height: auto; width: auto"\
<div class="row"\
<br>\
<div class="col-sm-8">\
<h2 style="color: #000000">' + name + '</h2>\
<h3 style="color: #000000">' + type + '</h3>\
<h4 style="color: #000000">Salary: ' + sal + '</h4>\
<h4 style="color: #000000">Location: ' + d[0] + ',' + d[1] + ',' + d[2] + ',' + d[3] + ',' + d[4] + ',' + d[5] +'</h4>\
<br>\
</div>\
<br><br><br>\
<div class="btn-group btn-group-lg">\
<button type="button" class="btn btn-primary" onclick="job_info()" href="#jobdetails">More Details</button>\
<button type="button" class="btn btn-primary">Apply</button>\
</div>\
</div><br></div>';
document.getElementById('content').appendChild(div);
it works fine here https://jsfiddle.net/gLw9bj7n/3/
but probably your code doesnt have created or doesnt have the scope access the the variables d, name, type, sal
I am trying to make a post edit using jquery. But i have a problem with image think.
I have created this DEMO from codepen.io .
In this demo you can see there are two edit button. If you click the edit1 then the image delete (x) button will be come on the right top bar but that will come just one time. It need to be come two delete button because there are two image. What is the problem on there and how can i fix that problems. Anyone can help me in this regard ?
JS
$(document).ready(function() {
$("body").on("click", ".editBtn", function(event) {
event.target.disabled = true;
var ID = $(this).attr("id");
var selected = $("#messageB" + ID + " .postInfo img").parent().html();
var currentMessage = $("#messageB" + ID + " .ptx").html();
var editMarkUp = '<div class="edi"><div class="del">x</div>' + selected + '</div><div class="edBtnS"><div class="edSv">Save</div><div class="cNeD" id="' + ID + '">Cancel</div></div><textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea>';
$("#messageB" + ID + " .postInfo").html(editMarkUp);
var data = $('#txtmessage_' + ID).val();
$('#txtmessage_' + ID).focus();
$('#txtmessage_' + ID).val(data + ' ');
});
$("body").on("click", ".cNeD", function(event) {
$(".editBtn").prop('disabled', false);
var ID = $(this).attr("id");
var currentMessageText = $("#txtmessage_" + ID).html();
$("#messageB" + ID + " .ptx").html(currentMessageText);
});
});
HTML
<div class="container">
<div class="postAr" id="messageB1">
<div class="postInfo">
<img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" id="1">
<img src="http://www.dam7.com/Images/Puppy/images/myspace-puppy-images-0005.jpg" id="1">
</div>
<div class="ptx"> fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsas</div>
<div class="editBtn" name="edit" id="1">Edit1</div>
</div>
</div>
<div class="container">
<div class="postAr" id="messageB2">
<div class="postInfo">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701">
fdasfads fasd fadsf aldsf adsf adsf asd fasd f dfsassssg
</div>
<div class="editBtn" name="edit" id="2">Edit2</div>
</div>
</div>
I found that there are 2 main issues there.
you use html() function which get the HTML contents of the first element in the set of matched elements. take a look document
-> you will get html instead of src of img. But later when you try to set src attribute during creating an 'edit area' so that is the mainly reason why image doesn't
display (.attr() function is better to get src attribute)
same wrong logic with message ( .text() function could be the better
solution in this case)
don't forget to check if you have create an edit area or not. At the moment every time it will create a new "edit area". Duplicate !
Hope it will help you a bit.
How to append special characters in html tags?
<html>
<head></head>
<body>
<script>
tool_tip_str = '!#$%^&&*()<>\'\"';
var html = '<div title="' + tool_tip_str + '"> text is here </div>';
document.write(html);
</script>
</body>
This code is producing the result
<div "="" title="!#$%^&&*()<>'"> text is here </div>
But it should produce the
<div title="!#$%^&&*()<>\'\""> text is here </div>
why odd characters
"=""
are appending in result? Is there any way to show the single quotes or double quotes with out black slashes ?
JSFiddle
I got this result:
using this:
tool_tip_str = '!#$%^&&*()<>\'"';
If you want to change all special characters to HTML entities, then you could write a function like:
function change(mystring)
{
return mystring.replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, """);
}
and then do:
tool_tip_str = change(tool_tip_str);
But obviously, you'd have to change everything in change() to get it exactly how you wanted.
<body>
<script>
tool_tip_str = '!#$%^&&*()<>\'\"';
tool_tip_str = tool_tip_str.replace('"','"');
var html = '<div title="' + tool_tip_str + '"> text is here </div>';
document.write(html);
</script>
</body>
Might need to convert the " into an html entity prior to outputting.
i am trying to append my small template in in dom but some element's missing i don'nt know why it's behaving like awkward if some one can correct me what's going wrong and why it's not showing these elements dynamically excpet this complete template showing.
here is my code jquery:-
template = '<article id="ProfileBox" class="col-lg-3 ltr">' +
'<div id="ProfileImage" class="Profile_image colored_border">' +
'<img src="../images/about-me/' + ParsingJsonData.UserImageUrl + '" class="Rounded-Corners" width="220" height="162">' +
'</div>' +
'<div id="ProfileContact">' +
'<h5 style="text-align: center;">' + ParsingJsonData.UserName + '</h5>' +
'<p style="text-align: center;"><strong>Role : </strong><em>' + ParsingJsonData.UserRole + '</em></p>' +
'<p style="text-align: center;"><i class="fa fa-mobile FontThemeColor" style="font-size: 15px;"></i> ' + ParsingJsonData.UserCellNumber + '</p>' +
'<p style="text-align: center;"><i class="fa fa-envelope FontThemeColor" style="font-size: 10px;"></i> ' + ParsingJsonData.UserEmailAdress + '</p>' +
'</div>' +
'</article>' +
'<article id="ProfileBox1" class="col-lg-9 ltr">' +
'<h3 class="HeadingThemeColor">Describing My Self !</h3>' +
'<div class="Profile_divider"></div>' +
'<p>' +
ParsingJsonData.UserDescription
'</p>' +
'<div class="Profile_list list-check">' +
'<ul id="ProfileCompleteInformation">' +
'<li>wajih</li>' +
'</ul></div>' +
'</article>';
$("#profileID").append(template);
After appending not showing elements:-
'<div class="Profile_list list-check">' +
'<ul id="ProfileCompleteInformation">' +
'<li>wajih</li>' +
'</ul></div>' +
You are missing a concatenation operator between ParsingJsonData.UserDescription and '</p>'. It would be easier to read your code and avoid these mistakes if you would indent it properly. May I suggest you to use the following approach instead (it's also much more efficient)?
var template = [
'<article id="ProfileBox" class="col-lg-3 ltr">',
'<div id="ProfileImage" class="Profile_image colored_border">',
'<img src="../images/about-me/', ParsingJsonData.UserImageUrl,
'" class="Rounded-Corners" width="220" height="162">',
'</div>'
//...
].join('');
If you have a lot of markup generated in JS, maybe you should have a look at some templating libraries.