We Keep Coding

How to load HTML after content has been loaded

I am trying to get a list of the content on a website (this one if anyone is interested). The layout has changed recently and now they do not load the content all at once, but with magic (js probably). I'm currently using JSoup to analyze the HTML, but im open to suggestions.
This is what i am getting:
<div class="row" data-v-6e4dbe9e>
<div class="col-17 podcasts-group" data-v-6e4dbe9e>
<div class="loading-spinner" data-v-6e4dbe9e> //the devil himself
<div class="spinner" data-v-ac3cb376 data-v-6e4dbe9e>
<div class="rect1" data-v-ac3cb376></div>
<div class="rect2" data-v-ac3cb376></div>
<div class="rect3" data-v-ac3cb376></div>
<div class="rect4" data-v-ac3cb376></div>
<div class="rect5" data-v-ac3cb376></div>
</div>
</div>
<div mode="in-out" class="transition-group row" data-v-6e4dbe9e>
//Here should be stuff!
</div>
</div>
</div>
the code that achieves this:
String selector = "div.podcasts-items";
Elements elem = Jsoup.connect(link).get().select(selector)
System.out.println("html: "+elem.html());
This is what i would like to see (copied from inspect element after the page has loaded all the content):
<div class="row" data-v-6e4dbe9e>
<div class="col-17 podcasts-group" data-v-6e4dbe9e>
<!----> //begone evil!
<div mode="in-out" class="transition-group row" data-v-6e4dbe9e>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
</div>
</div>
</div>
Google doesn't help much, because every content related to spinners etc. is about javascript.
solution:
due to the fact that JSoup only loads the HTML and does not execute any javascript the page never had a chance to load the content. You would have to use an actual browser engine or a webdriver like selenium to get the data to load.
For this specific problem I was able to get the content directly via loading the Json data through this webpage's API.

If I understood your question then your best bet is to use Selenium driver. Link to similar question

CSS alignment issue when title is too long in a list loading with Angular

I have a list loading with AngualarJS ng repeat. List contains images and title, like that. This is the code for the list.
<div class="row">
<div ng-repeat="data in allStars">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a style="color: black" class="thumbnail" href="#/star/{{data.psid}}">
<img class="img-responsive" src="lib/{{data.imagepath}}"
alt="">
<div class="row thumbEffect">
<div class="col-lg-12">
{{data.psname}}
</div>
<div class="col-lg-12">
Views : {{data.views}}
</div>
<div class="col-lg-12">
Scenes : {{data.scenes}}
</div>
</div>
</a>
</div>
</div>
</div>
This is loading nicely in desktop versions. But in mobile versions, when the title is too long, it comes to two lines and so the image below that getting a big space. But I want to make it look as following image. When title getting long, other side images also getting same height. (There are two images in my site too in mobile view).
How can I do this ? With CSS and Javascript ?

Create dynamic pagination for div block in jquery

I have created a table using div instead of using table structure.Now I want to add pagination feature for this table which is created using div's.
I wanted to know whether there is any plugin available which works with div.
Here is sample code
<div class="list">
<div class="item">
<div class="item-swipe">
<div class="col-xs-5 col-xs-offset-1 col-lg-6 col-md-6 col-lg-offset-0 col-md-offset-0">
<div class="wrap">
<span class="row1 date-content date whitespace">Col1</span>
</div>
</div>
<div class="col-xs-4 col-xs-offset-2 col-lg-5 col-md-5 col-lg-offset-0 col-md-offset-0">
<div class="wrap">
<span class="row1 date-content date">Col2</span>
</div>
</div>
<div class="col-xs-3 col-lg-1 col-md-1 col-lg-offset-0 col-md-offset-0 hidden-xs hidden-xs hidden-sm hidden-md">
<div class="wrap">
<a class="id">Col3</a>
</div>
</div>
</div>
</div>
</div>
I have this sample code repeated.I have created table using the above structure.How can I now add pagination to this,Or how can I convert this into table so as to use pagination.

You can explore JQuery Datatables. client-side or server-side pagination possible. Including infinite scroll.

You can use JSONPagination Plugin, which doesn't depend on the DOM, since its done in the JSON level so you can create any kind of table using div or table tag, only few steps needs to be remembered which is explained in the plugin itself.
Disclaimer: I am the author of this plugin.

How to create directive with angularjs binding expression?

I need to convert below code to dynamic code using angular directive or any other angular way.
one Directive:
<view-partial></view-partial>
view-partial.html
<div id="layoutFormation">
<div ng-repeat="container in layoutJSON.layoutInfo.containers" class="row form-container x_panel tile">
<div class="x_title nopadding"><label class="container-header">{{(container.headerText == " ") ? "" : container.headerText }} </label></div>
<div number-of-rows="{{ container.table.numOfRows }}" number-of-columns="{{ container.table.numOfColumns }}" class="x_content col-md-12 col-xs-12 collapse-expand">
<div ng-repeat="columnNumber in range(container.table.numOfColumns)" class="col-lg-6 col-md-6 col-sm-6 col-xs-12 column">
<binding-control-block ng-repeat="rowNumber in range(container.table.numOfRows)" row-number="{{rowNumber}}" column-number="{{columnNumber}}" style='margin-bottom: 12px;' />
</div>
</div>
</div>
</div>
Here binding-control-block is another directive that directive with binding code already i'm doing in dynamically. Only thing the above partial page also i need to convert dynamically. I think I have to add all the above view-partial code in another directive. just i need any example or idea how to create directive with binding expression. Please any one help me to achieve this. If any clarification need please message me. Thanks in advance.

AngularJS: How to display html data in view?

I am implementing a control to display a list of comments, with AngularJS + Bootstrap.
It's something like this:
<div class="comments">
<div ng-repeat="(id, comment) in person.comments" class="row">
<div class="form-group">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon vertical-align-top">
<div><i>Date:</i> {{ comment.date }}</div>
<div><i>By:</i> {{ comment.author }}</div>
</span>
<div class="form-control form-control-content">
{{ comment.content }}
</div>
</div>
</div>
</div>
</div>
</div>
Everything's o.k..
The problem is: comment.content is HTML data (for example it contains line-breaks, hyperlinks, style-formatting, ...). By default HTML is rendered as plain text.
The question is: how do I display data as HTML inside a div?

You can use ng-bind-html.
<div class="form-control form-control-content" ng-bind-html="comment.content"></div>

If you want {{comment.content}} to be interpreted as HTML, you need to look at ngBindHtml directive.
So you'd need to modify it:
<div ng-bind-html="comment.content" class="form-control form-control-content"></div>
You'll have to add $sanitize into your project dependencies, as is noted in the ngBindHtml doc link above.