Focused content extraction from html page - parsing

From a HTML page, how can I configure TIKA to get content only from a particular div. For eg:
<div id="1" class="content">...</div>
<div id="2" class="content">...</div>
<div id="3" class="new_content">...</div>
I would like to know how to get content for div id="1" and class = "new_content"

Related

How to store image submitted as a variable (dropzone JS)

I need to build a confirm button for the images being dropped in Dropzone, which, on press will store the image in a variable and then move on. What function do I call to get this image?
I currently only have this set up:
<div id=dropzone >
<form action="/file-upload" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<img id=confirmbtn src="/images/confirm.png" alt="Confirm">
<img id=cancelbtn src="/images/cancel.png" alt="Click me to remove the file." data-dz-remove />
</div>
I am looking to store the image as a string
I did a ctrl+f (data-dz-thumbnail) on dropzone.js and found this in the preview:
<-this is ONE LINE BTW->
previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n
<div class=\"dz-image\">
<img id='data-dz-thumbnail'data-dz-thumbnail />
</div>\n <div class=\"dz-details\">\n
<div class=\"dz-size\"><span data-dz-size></span></div>\n
<div class=\"dz-filename\"><span data-dz-name></span></div>\n
</div>\n
<div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n
</div>",
I then changed the whole image thumbnail element to this:
<img id='data-dz-thumbnail'data-dz-thumbnail />
//I added the id='data-dz-thumbnail' part
Then i added an event listener to js
something.onclick....{
var image=document.getElementById('data-dz-thumbnail').src
}
And that is literally it

Jquery Mobile Dialog Form

I'm working with jQueryMobile and I want to use a form to input some values in a database.
I have a form which works and uses the test123.php to submit data to a database this:
<form method="get" action="test123.php?test=1">
<input type="submit" value="spiegel" />
</form>
I get a button, but the new page is shown as a normal page.
With this solution:
<a data-role="button" data-rel="dialog" href="#test">
spiegel
</a>
I get a dialog with the same output (i get the message "spiegel").
But I want the confirmation site to appear as a dialog.
A link with data-rel"dialog" so i want to use my php site but i want to look it like a dialog after i submitted my data do a database. I'm not sure how to do this.
Thank you for your help
<!DOCTYPE html>
<html>
<head>
<!--add all your jquery,jquery mobile as well as its CSS refrences here-->
</head>
<body>
<div data-role = "page">
<div data-role="header">
opendialogpage
</div>
<div data-role="content">
<p>just for sample display</p></div>
</div>
<div data-role="dialog" id="login">
<div data-role="header" data-theme="e"></div>
<div data-role="content">
<form id="login_form">
<fieldset>
<div data-role="fieldcontain">
<label>USER NAME:</label>
<input type="text" id="name" value=""/>
</div>
<div data-role="fieldcontain">
<label>EMAIL ID:</label>
<input type="text" id="email" value=""/></div>
</fieldset>
</form>
</div>
</div>
</body>
Okay, so you want data from your PHP page to open in the dialog and not in the next page.
What your looking for is AJAX.
AJAX allows you to refresh and change part of your HTML page without changing the entire page.
$.ajax({
url: 'test123.php',
type: 'POST',
data: {spiegel : 'spiegel'}
error : function (){ document.title='error'; },
success: function (data) {
$('#ajax_content').html(data);
}
});
So this function will return into variable data whatever was generated by test123.php
Link to Docs: http://api.jquery.com/jQuery.ajax/
I struggled with this too for a while. Finally took a look at the html that jquery mobile creates for a dialog page. Just create a page with the structure below, and it will always open as a dialog page (as though it had been opened from a link with data-rel="dialog").
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- include your css, jquery, and jquery mobile files here -->
</head>
<body>
<div data-role="dialog">
<div data-role="content">
<!-- content goes here -->
</div><!-- /content -->
</div><!-- /dialog -->
</body>
</html>
All you are doing is changing data-role="page" to data-role="dialog".

Primefaces printer print div

I want to print one div with primefaces printer (primefaces 3.2 with myfaces 2.0).
My faces code is like:
<div id="page">
<!-- SIDEBAR -->
<div id="sidebar"
class="ui-widget-content ui-corner-all ui-helper-clearfix ui-shadow sidebar">
<ui:insert name="sidebar"></ui:insert>
<p:commandButton value="Print" type="button">
<p:printer target="content" />
</p:commandButton>
</div>
<!-- CONTENT -->
<div id="content">
<ui:insert name="content">...</ui:insert>
</div>
<div style="clear: both;"> </div>
</div>
But I get a FacesException:
javax.faces.FacesException: Cannot find component content in view.
Is this possible with primefaces printer or is there another way to do this.
Best Regards Veote
p:printer expects an id of the component, but ui:insert defines a logical section which is going to be inserted by the client. You could try to wrap the content you wish to print in p:outputPanel like so:
<p:outputPanel id="content">
<ui:insert name="content" />
</p:outputPanel>

Orchard CMS Custom Shape Template for each Item of a Projection Module

I am building a web application using Orchard, and I am using Projection that generates a list content items defined as Custom Content Type that I gave the name
Cotainer-resource, this content type contais the fields: ​Title (Input Field), ​Description (Text Field) and Image Url (Text Field).
I would like to format each element of the list to use the shape template bellow.
I am using the Bootstrap theme, and I created the file bellow at the
~/Themes/Bootstrap/Views/Content-Cotainer-resource.cshtm:
#using Orchard.Utility.Extensions;
<div class="container">
<div class="container-title">
<h2>
<span> #Model.ContentItem.TitlePart.Title </span>
</h2>
</div>
<div>
<div class="container-content">
<div>
<div class="container-image">
<a title="Administração" class="image" href="#Model.ContentItem.TitlePart.Title">
<img src="#(Url.Content("../../Resources/images/") + #Model.ContentItem.TitlePart.Title)" alt="container alguma coisa"/></a></div>
#Model.ContentItem.BodyPart.Text
<div class="assistir ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
role="button">
<span class="ui-button-text">
Assistir</span></div>
</div>
</div>
</div>
</div>
And my placement.info is:
<Placement>
<Place Parts_Title_Summary="Content:1" />
<Place Fields_Common_Text ="Content:2" />
<Place Parts_Common_Body_Summary = "-" />
<Place Fields_Input = "-" />
<Place Parts_Tags_ShowTags = "Content:after.10" />
<Match ContentType="Page">
<Place Parts_Common_Metadata="-" />
</Match>
</Placement>
Using the Shape Tracing from the Designer Tools 1.4 Module I could identify the shape of each element of the list and find where to put the template.
Using this tool, after selecting an element of the list:
I had on the Shape tab:
Shape Content
Active Template ~/Themes/Bootstrap/Views/Content-Cotainer-resource.cshtml
Original Template Template ~/Core/Contents/Views/Content.cshtml
Display Type Summary
On the template tab I had the template previous described.
And on the placement tab:
n\a
Briefly, what I am trying to do is the same was done with Creating lists on this tutorial at the Customizing How the List is Rendered topic, but using projection and instead of customize each field of an item with, customize the entire item with a template file.
Many thanks.

link to subpages in jquery mobile

I have a single page jquery mobile application in which there are few parent pages (directly under body) and few child pages dynamically generated (with backbone.js) and kept within another div.
While linking the pages the parent pages are working fine but the pages inside a simple div are not working.
The following is the simple fiddle to describe the problem. Page-2 is working fine but Page-3 within a Div is not changing.
http://jsfiddle.net/zwhEB/
You have a extra div wrapped around page 3
http://jsfiddle.net/zwhEB/1/ (Commented out the extra div, working)
HTML
<!-- Remove this extra div -->
<!-- <div id="pages"> -->
<div data-role="page" id="p3">
<div data-role="header" data-rel="back">
<h1>Header Page 2</h1>
</div>
<div data-role="content">
<p>This is page2</p>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
<!-- Remove this extra closing div -->
<!-- </div> -->

Resources