So I'm not too familiar with data attributes and I wanted to see if I get can get some help from others.
I have an HTML portion as shown below:
<div class="columns is-multiline app-list"></div>
The app-list is being rendered by the following JS:
Is there a way that instead of calling app-list as a class, that I can do something like this:
<div class="columns is-multiline" data-source="application_launcher"></div>?
All help would be appreciated!
You can use the data-attribute as an selector in the querySelector(selector) method.
In your case just replace
const apps_target = document.querySelector('.app-list');
with the following line.
const apps_target = document.querySelector('[data-source="application_launcher"]');
Related
Using jquery, is there a way to capture all the code between two divs?
For example; using the code below, if Show info is clicked than the code between the ws-css-table divs should be retrieved, i.e.
<div class="ws-css-table-tr"><div class="ws-css-table-td">A</div>... <div class="ws-css-table-td">D</div></div>
should be put into a text variable.
Here is a fiddle for the current code.
Thanks for any help.
<div class="ws-css-table">
<div class="ws-css-table-tr">
<div class="ws-css-table-td">A</div>
<div class="ws-css-table-td">B</div>
</div>
<div class="ws-css-table-tr">
<div class="ws-css-table-td">C</div>
<div class="ws-css-table-td">D</div>
</div>
</div>
</br>
<div class='show_div_info'>Show info</div>
jquery
$(".show_div_info").click(function(){
alert ("info?")
});
Here's the classic javascript and a single liner technique using innerHTML:
$(".show_div_info").click(function(){
alert($('.ws-css-table')[0].innerHTML);
});
https://jsfiddle.net/vy5mok8k/3/
$(".show_div_info").click(function(){
var children = $(".ws-css-table").html();
$(".children").html(children);
});
https://jsfiddle.net/vy5mok8k/2/
Do you mean to capture the elements inside the table and do something with it later?
$(".show_div_info").click(function(){
var table = $(".ws-css-table");
// Do something
});
Do you mean to capture the literal code inside the table? Say hello to the html() function:
$(".show_div_info").click(function(){
var table = $(".ws-css-table").html();
// Do something
});
Do you mean to capture the actual text inside the table? Say hello to the text() function:
$(".show_div_info").click(function(){
var table = $(".ws-css-table").text();
// Do something
});
The more practical one would be the first one, since you will be able to use it to manipulate the elements inside as you need.
Second one just grabs the actual code, perhaps you need it to show off your awesome skills.
The last one will print the text, neat if you use it to parse or log what you have thus far done.
How did that help?
I am using jQuery sortable function and it works.
I'm also using thymeleaf.
My code looks something like this:
<div id="container">
<div th:each = "drawer : &{drawers}" th:id="${drawer.id}">
<div class="sortableDrawer" th:include="drawer/drawer"></div>
</div>
<div class="mirror"></div>
</div>
Now I'm trying to sort every drawer in that div. I'm doing this and it works:
$('#container').sortable('toArray')
But this gives me an empty Array member which is the id of that tag with the class "mirror". I'm trying to get rid of this. Is it possible to somehow give a class, in this case "sortableDrawer" to the sortable function.
I want to do something like this:
$('#container').sortable(sortableDrawer, 'toArray')
Is there any way to do something like this or am I stuck with cleaning my Array from empty inputs?
Are you searching for something like this?
$('#container').sortable('toArray', { attribute: 'class' });
I have to convert plain text urls to . I've found a JS code that works. My problem is that my HTML structure needs that I modify the code, putting the current code inside a foreach.
My html:
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
The JS:
$(function()
{
var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/ig;
$('.content').html($('.content').html().replace(re, '$1'));
});
The above JS works, but will populate all the div's with the same content. I've tried to put this code in a foreach but have failed. My poor JS knowledge makes me ask this on SO.
Can you give some clues on how to put this code in a foreach loop?
Functions like .html allow a function to be passed. An .each loop is then done internally, and moreover you get the current value passed:
$('.content').html(function(i, current) {
return current.replace(re, '$1');
});
.html() for retrieval only selects the first matched element. You can do this pretty easily, though, because functions like .html can take a function argument for setting that iterates over each selected element individually.
$(".content").html(function (_, html) {
return html.replace(re ...etc...);
});
If I've understood your question correctly, you need to loop through each .content div, try this:
$('.content').each(function() {
var $content = $(this);
var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/ig;
$content.html($content.html().replace(re, '$1'));
});
for some reason both methods results are TextNode. It means that browser doesnot parse content of appended string.
for example
var code = "<div><p>Some</p> words are <span>here</span></div>"
$("#news_details").append(code);
on the page I do have content
"<div><p>Some</p> news are <span>here</span></div>"
this
$("#news_details").contents()
shows that string with html source is attached(for some reason unknown to me) as single textnode
but if will type in firebug
var text = $('#news_detaisl').text()
$('#news_details').contents().remove()
$('#news_details').append(text)
and after that, it is parsed and shows in a right way.
user the html()
var code = "<div><p>Some</p> words are <span>here</span></div>"
$("#news_details").html(code);
Since you haven't asked a question directly I can only assume what you want. Try this and tell me if it helps and if it was what you wanted:
var code = "<div><p>Some</p> words are <span>here</span></div>"
$("#news_details").append($(code));
Oh and $().append and $().html do NOT behave in the same way. $().append adds the input as a new child while $().html either returns the innerHTML of an element or sets it. Depending on whether you set a parameter.
only this code works fine, but such a weird behavior
var content = news.newsDetails(here async ajax request which load html snippet with content); //content is a string with html snippet from server
$("#news_content").append(content);
var value = $(".news_title").text();
$(".news_title").contents().remove();
$(".news_title").append(value);
$(".news_details").css('display','block')
and html snippet
<div class="news_details">
<img class="pointer" src="/static/img/close6.png" alt="close" width='16' height='16'>
<div class="news_head gradient">
<span>{{ item.pub_date|date:"d M Y" }}</span>{{ item.title }}
</div>
<div class="clear"></div>
<div class="news_title">{{ item.full_text }}</div>
Does anyone know how to stop jQuery fromparsing html you insert through before() and after()? Say I have an element:
<div id='contentdiv'>bla content bla</div>
and I want to wrap it in the following way:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
</div>
I use the following jQuery/Javascript
$('#contentDiv').each( function() {
var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
var afterHTML = "<div id='afterDiv'></div></div>";
$(this).before(beforeHTML);
$(this).after(afterHTML);
}
This however will not result in the correct wrapping, it will create:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
</div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
Using wrap() won't work either since that gets jQuery even more mixed up when using:
$(this).wrap("<div id='wrapperDiv'><div id='beforeDiv'></div><div id='afterDiv'></div></div>");
How should I solve this?
Thanks in advance!
$('#contentDiv').each(function() {
$(this).wrap('<div id="wrapperDiv">');
$(this).before('<div id="beforeDiv">');
$(this).after('<div id="afterDiv">');
});
produces:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
</div>
your markup isn't complete...before and after are to take complete nodes only...
what you are trying to do is wrap your content, which is different.
you want this:
.wrap(html);
http://docs.jquery.com/Manipulation/wrap#html
I think you're approaching it wrong. Think about what you actually want to achieve...
You want to WRAP everything with one div. Then insert 1 div before, and 1 div after.
so do .wrap() first, then append before and after-divs relative to the content-div.
if you happen to have the actual HTML as a string (from an XHR or something) then you need to read out the html and concatenate it yourself as Douglas Mayle suggested.
I'm sorry, but this one should be obvious. In your case, you can't use wrap because it sticks the original node into the deepest node it finds in the wrapping HTML. You don't want that. Instead, read out the HTML from your object and combine it with what you have:
$('#contentDiv').each( function() {
var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
var afterHTML = "<div id='afterDiv'></div></div>";
// This line below will do it...
$(this).html(beforeHTML + $(this).html() + afterHTML);
}