I have an object property (string) coming from the database with line jumps, looking like this:
Right now, when I display it in the frontend it just shows like this:
1223123 2121 3223 54545 1221 1221
What I need is this:
<ul>
<li>1223123</li>
<li>2121</li>
...
</ul>
Is there any way to turn such string into a li using a filter? I thought about string replace, but I assume it wouldn't work.
Something along these lines should work:
<ul>
<li ng-repeat="artist in artsts.split('\r')"> {{artist}} </li>
</ul>
Related
I would like to change the following line:
$("<ul><li>"+displayName + ""+"<br>"+description+"</br></li></ul>".appendTo(".results")
into the next string:
$("<ul><li><a href={0}> {1}" + "</a>"+"<br>"+description+"</br></li></ul>",{0:url, 1:displayName}.appendTo(".results").
however, instead of displayName i get 1.
please help to fix this
As you can see i've tried to write it like in c#
Using ES6 string interpolation, it would look like this:
$(`
<ul>
<li>
<a href=${url}> ${displayName}</a>
<br>${description}</br>
</li>
</ul>
`).appendTo(".results");
Notice the back-ticks instead of double-quotes.
I am generating rows dynamically with PHP from DB, once it compiles the initial page code looks something like this:
Snippet
<div class="options" id="options">
<div class="left_wrap">
<ul>
<li class="col_id b-bottom"></li>
<li class="hazard_header"><h3>Hazard</h3></li>
<li class="hazard_input b-bottom"></li>
<li class="con_header b-bottom"><h3>Controls</h3></li>
<li class="cat_header"><h3>Consequence Category</h3></li>
<li class="cat_options"></li>
</ul>
</div>
<div class="right_wrap">
<h2>Inherent Risk (Assessed risk without controls)</h2>
<ul class="fields">
<li class="bg b-top b-right"><h3>Consequence Level</h3><br/><span class="con_level_val"></span></li>
<li class="b-top b-right"><h3>Probability</h3><br/>Possible</li>
<li class="bg b-top b-right"><h3>Exposure (frequency)</h3><br/></li>
After page load I grab contents of the wrap options.
jQuery Snippet:
content = $("div.options").html();
Which in turns stores the above code in the variable content. Now, my question is how can I edit contents of variable content. For example I need to add value to li with class Col_ID like 1,2,3,4 and same when I am deleting I need to modify the contents again.
How can I do something along the lines content.getElement?
If you really need to work with the HTML string, here's something you can do:
content = $("div.options").html();
var $content = $(content);
// now $content is a jQuery object with a bunch of (detached) elements
// you can use the common functions on it without problems, such as
$content.find("li.col_id").text("Some text");
// now you need to do something with $content, or everything you did will...
// ...be lost. You cold, for instance, update the other variable back:
content = $content.html();
// content now has the updated HTML
Now, if you don't need the HTML string at all, then you can work directly like:
content = $("div.options");
content.find("li.col_id").text("Some text");
// now the DOM was already updated as you are dealing with attached elements
So I would like to know how to manipulate the Data I'm getting as a return from a $.get Method call to a link.
Example:
$.get('/index.php?id='+before+'&type=110', function(data){
var result = $(data).find('#ul1999 > *');
console.log(result);
},'text');
The response of the Webpage would be similar to this:
<div>
<ul id="ul1999">
<li>
something something
</li>
<li>
got a sub
<ul id="ul2014">
<li>
i'm the sub
</li>
</ul>
</li>
<li>
something 2
</li>
</ul>
</div>
And my returned value looks like this:
Object[li, li, li, li, li.last]
I now want to remove the parent element of id "ta200", so the entire li containing this id.
I tried to remove it with
var result = $(data).find('#ul1999 > *').not('#ta200').parent();
but it didn't work.
Maybe someone could tell me how to access the actual object and search for the id?
It should be as simple as this:
$(data).find("#ta200").parent().remove();
Here's a JSFiddle to better illustrate how you can manipulate an in-memory DOM like that and then retrieve the modified HTML: http://jsfiddle.net/troygizzi/xu6d3xhp/
I'm trying to match and replace broken HTML using a regex, but I've done a couple of full circles with grouping and lookbacks and quantifiers. I'm struggling to match every scenario.
JavaScript, because the issue is triggered in a Web client browser HTML editor.
The broken HTML is specific - any text between a closing LI and the closing list UL or OL, that is not properly formed as a list item.
For instance, this piece here, from the greater example underneath:
</li>
bbb<strong>bbbb</strong><strong>bbb <span style="text-decoration: underline;"><em>bbbbb</em></span></strong>=0==
</ul>
Here is the full example of where the issue could exist:
<ul>
<li>1111</li>
<li>Could be anything here</li>
<li>aaaa</li>
bbb<strong>bbbb</strong><strong>bbb <span style="text-decoration: underline;"><em>bbbbb</em></span></strong>=0==
</ul>
<ol>
<li>more?<li>
<li>echo</li>
</ol>
This is what I intend the HTML to look like using a match + replace.
<ul>
<li>1111</li>
<li>Could be anything here</li>
<li>aaaabbb<strong>bbbb</strong><strong>bbb <span style="text-decoration: underline;"><em>bbbbb</em></span></strong>=0==
</ul>
<ol>
<li>more?<li>
<li>echo</li>
</ol>
A few expressions I've tried are the following, but depending on these (or slight variations), I'm matching too much or not correctly or something:
/<\/li>.*?<\/[ou]l>/mig
/<\/li>([\s\n]*[\w!\.?;,<:>&\\\-\{\}\[\]\(\)~#'"=/]+[\s\n]*)+<\/[ou]l>/mig
/<\/li>([\s\n]*[^\s\n]+[\s\n]*)+<\/[ou]l>/i
Searched for a couple of days on and off, no luck.. I realise I'm probably asking something answered hundreds of times before.
it's recommended to use a dom based approach to pocessing html
using jQuery:
$('ul>:not(li)').wrapAll('<li></li>');
I have an interesting problem. Ive had a handlebars.js template thats been working for a week and just stopped. I was hoping someone might have an idea as to why.
Heres the template
<script id="banners-template" type="text/x-handlebars-template">
<div class="banner-container" >
{{#banners}}
<ul class="banner" >
<li><div class="checkbox"></div></li>
<li>{{publisher_status}}</li>
<li>Test Link</li>
<li><img class="banner" src="{{imageurl}}"/></li>
<li>{{description}}</li>
<li>{{width}}x{{height}}</li>
</ul>
{{/banners}}
</div>
</script>
Heres the code that works with this.
var bannersRawTemplate = $("#banners-template").html();
var bannersTemplate = Handlebars.compile(bannersRawTemplate);
data = '{"banners":[{"type":"banner","width":125}]}';
alert(bannersTemplate(data));
I realize that type is not accessed in the template above but it shouldnt matter. I should still get the code inside of the "banners" array loop displayed once. This is not the case. The only part of the template that displays is . Its like its not seeing the banners array inside the JSON.
Any ideas?
Thanks in advance.
Is there a particular reason you don't pass in the actual JSON, and instead pass a string? From my experience with Mustache, and a cursory review of the Handlebars.js documentation, you should be passing:
JSON.parse('{"banners":[{"type":"banner","width":125}]}');
And, assuming the code you've shown is "really real", why not just:
{"banners":[{"type":"banner","width":125}]}
This is, of course, assuming that the issue really isn't that you've got a list with just one element.