I have a dirty HTML code that is loaded from a foreign server (so I can't make a json file or clean the html code). My HTML's structure is like:
<!-- SOME DIRTY HTML, CSS, JS, AND OTHER STUFF -->
<div class="pic"> ... </div>
<div class="pic" id="pic311809">
<input type="hidden" class="pic_id" name="pic_id" value="311809" />
<!-- tylko komixxy.pl -->
<div style="font-family: verdana, arial, helvetica, sans-serif; font-weight: bold; font-size: 9px;">
FFFUUU (rageman)
</div>
<h1 class="picture">Kochana babcia</h1>
<div class="infobar">
Wrzucone 15 października 2010 o 16:03 przez Astraly
|
Skomentuj (23)
<!-- głosowanie przeniesione pod spód obrazka -->
</div><!-- .infobar -->
<div class="pic_image">
<img src="http://staticrps.komixxy.pl/uimages/201010/1287151388_by_Astraly_500.jpg" class="pic" alt="Kochana babcia - Wnusiu, a ty jeszcze nie w szkole? Dziś mamy na 10 babciu Co ty tam majaczysz? Jesteś na wagarach!? już ja to powiem twojej mamie! Ale babciu.... Przynosisz nam wstyd! Myślisz, że nie wiem o tej ostatniej niedzieli, w której nie byłeś u komunii? ZAMKNIJ SIĘ KU**A!!!! .... Nie musisz tak krzyczeć! Powiem twojej mamie z jakim tonem odnosisz się do mnie! " /> </div><!-- .pic_image -->
<div class="source">Źródło: Kto mieszka z babcią, ten wie jak to jest ;)</div>
<!-- głosowanie i ocena -->
<div class="source">
<div class="infobar center">
Głosuj:
<a href="/pic/vote/311809/up"
onclick="votowanie(this); return false;"
class="vote voteup iconlink"
>
mocne ↑ </a>
·
<a href="/pic/vote/311809/down"
onclick="votowanie(this); return false;"
class="vote votedown iconlink"
>
słabe ↓ </a>
<!-- DODATKOWY PRZYCISK RAPORTOWANIA DUPLIKATÓW (“BYŁO”) -->
|
<span class="points">
87% mocnych
</span>
<span class="count">
z 1291 głosów
</span>
<span class="vote_result"></span>
| Do ulubionych
</div><!-- .infobar -->
<!-- PRZYCISK LAJKONIKA -->
<div style="text-align: center;">
<fb:like href="http://komixxy.pl/311809/Kochana-babcia"
layout="button_count"
show_faces="true"
width="130"
font="arial"
style="width: 130px;">
</fb:like>
</div>
<!-- tylko komixxy.pl -->
Pokaż podobne komixxy Zrób własną wersję
<div style="clear: both;"></div>
</div><!-- .source -->
</div><!-- .pic -->
<div class="pic"> ... </div>
<div class="pic"> ... </div>
<div class="pic"> ... </div>
I want to select all <div class="pic" id="*"> by using xPath //div[#class='pic'][#id].
Here are two libraries that I used:
- Hpple
- TouchXML
As for Hpple -> it's great but I can't select innerHTML of an emelent. As for TouchXML, I use it for parsing XML and it's great. But it doesn't manage to parse dirty HTML - I get dozens of errors.
Is there a way to parse this HTML in iOS5 using TouchXML? It can be a different library, but I prefer that one.
I heard something about CTidy.h and I did as instructed but nothing's changed...
libxml has a module designed exactly for this problem :)
http://xmlsoft.org/html/libxml-HTMLparser.html
It works exactly the same as libxml normally works i.e. to parse an NSData object containing dirty html:
#include <libxml/htmlparser.h>
htmlDocPtr doc; /* the resulting document tree */
doc = htmlReadMemory([data bytes], [data length], "noname.xml", NULL, HTML_PARSE_RECOVER | HTML_PARSE_NOWARNING | HTML_PARSE_NOERROR);
if (NULL == doc)
return nil;
... parse DOM here ...
xmlFreeDoc(doc);
compared to the libxml example from their website :
xmlDocPtr doc; /* the resulting document tree */
doc = xmlReadMemory(content, length, "noname.xml", NULL, 0);
if (NULL == doc)
return nil;
... parse DOM here ...
xmlFreeDoc(doc);
PS Don't forget to include libxml2.dylib into your project as a framework in the 'link binary with libraries' project build phase
If I was doing this I would parse the HTML before passing it the the libraries and clean out all of the 'dirty' bits find the and and remove everything in between, doing the same for the other dirty areas then it will be easier for the libraries to work with the file.
Related
When I post my form, the points in my double are removed.
Does anyone have any idea what this is?
My model field:
[Display(Name = "Domeinnaam prijs:")]
public double DomainNamePrice { get; set; }
My HTML to fill the field in a form:
<div class="row">
<label class="col-lg-3" style="margin:auto; font-size: 120%;" asp-for="DomainNameLine"></label>
<div class="col-lg-9">
#Html.CheckBoxFor(i => i.DomainNameLine, new {#id = "DomainNameCheckbox", #name = "DomainNameLine", #onclick = "DomainNameCheck()"})
<span asp-validation-for="DomainNameLine" class="text-danger"></span>
</div>
</div>
<div id="DomainNameField" style="display:none;">
<div class="row">
<label class="col-lg-3" style="margin: auto; font-size: 120%;" asp-for="DomainNamePrice"></label>
<div class="col-lg-9">
<input asp-for="DomainNamePrice" class="form-control" />
<span class="text-danger" asp-validation-for="DomainNamePrice"></span>
</div>
</div>
</div>
For example, when I enter 14.99. I get 1499 as a result.
The form field
The result
Can someone help me?
Set this in your web.config
<system.web>
<globalization uiCulture="en" culture="en-US" />
You appear to be using a server that is setup with a language that uses comma's instead of decimal places. You can adjust the culture to one that uses the comma's in a way that your application is designed, such as en-US.
or you can add this statement on the page:
<%# Page uiCulture="en-US" culture="en-US" %>
Hope this helps.
All of my content elements are wrapped using stdWrap.wrap.
I am looking for a solution to wrap content elements in the page which i have my ke_search added differently .
Why do you need another HTML-markup?
Normaly you have another <div> around your search results which should enable you to add another styling by CSS.
your page may look like:
<body>
<div class="header">
:
</div>
<div class="content">
<div id="C123">
<h3>my very special CE</h3>
<p class="bodytext">with some text to demonstrate.</p>
</div>
<div id="345">
<h3>your search results:</h3>
<div class="search-results">
<a href="index.php?id=67&s=special">
<div id="C123">
<h3>my very special CE</h3>
<p class="bodytext">with some text to demonstrate.</p>
</div>
</a>
<a href="index.php?id=83&s=special">
<div id="C52">
<h2>just a demo</h3>
<p class="bodytext">this text is nothing special.</p>
</div>
</a>
</div>
</div>
</div>
</body>
with appropiate CSS the first CE looks completely different to the same CE in the search results.
h3 { color:black; font-size:16px; }
p.bodytext { color:#444; font-size:12px; }
.search-results h3 { color:blue; font-size:10px; font-weight:bold; }
.search-results p.bodytext { color:#44b; font-size:10px; font-style:italics; }
I answer my own question:
You can conditionally wrap specific content elements using the following typoscript snippet.
tt_content {
stdWrap {
if.value = tx_kesearch_pi2
{
wrap = |
innerWrap >
}
wrap = <div class="someotherclass">|</div>
}
}
Is there any plugin that transfoms html elements (span, div) into a form ? One example is when editing LinkedIn profile which convert the section to be modified into a form.
Thanks all !
JQuery has the Wrap method, which you can use to throw the whole div / span into a form.
$('.inner').wrap('<form class="newform" action="..." method="..." />');
Found here: http://api.jquery.com/wrap/
Consider the following HTML:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
Using .wrap(), we can insert an HTML structure around the inner elements like so:
$('.inner').wrap('<div class="new" />');
The new element is created on the fly and added to the DOM. The result is a new wrapped around each matched element:
<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
The second version of this method allows us to instead specify a callback function. This callback function will be called once for every matched element; it should return a DOM element, jQuery object, or HTML snippet in which to wrap the corresponding element. For example:
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
This will cause each to have a class corresponding to the text it wraps:
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
Examples:
Example: Wrap a new div around all of the paragraphs.
<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").wrap("<div></div>");</script>
</body>
</html>
I'm writing a mobile app with PhoneGap and jQuery Mobile. To simplify navigation I want to spread a single form over multiple 'pages' using div data-role="page". The idea is to give the user a wizard like experience for filling in a large form. On completion I need to be able to save the form locally, or submit it, if the mobile is online.
I don't understand how to go about submitting or saving a form using jQuery Mobile if the form is split into multiple 'virtual' pages. I've search the web but can't find any tutorials or examples on solving this problem.
Any help will be appreciated.
UPDATE:
I recently changed the way I worked with multipage forms, and this solution worked nice for me. You basically use a naming convention where fields become part of sections by giving them id's starting with the section name and a dash, e.g: person-name, person-surname. See the answer below.
Ok, I posted my thoughts here: http://www.coldfusionjedi.com/index.cfm/2011/11/18/Demo-of-a-multistep-form-in-jQuery-Mobile
Essentially I ended up using a sever side language to simply include the right part of the form at a time. (I'm using ColdFusion, but any language would work really.) The form self posts and simply displays the right step based on where you are in the process.
A quick help to anyone stuck with the same problem. I did the 'form thing', but it gets sloppy. You basically just embed the page divs inside the form element, but that's not very elegant and has given me some navigation issues.
So I ended up with my own solution that works over huge multipage forms (+/- 1000 elements). Not the most elegant, but it works like a charm:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(function () {
$('#submit_my_form').click(function (e) {
alert(JSON.stringify(readFormData('names')));
alert(JSON.stringify(readFormData('dates')));
});
});
function readFormData(section) {
var sectionData;
var els = $(':input[id|='+section+']');
var sectionData = {};
$.each(els, function() {
if (this.name && !this.disabled && (this.checked
|| /select|textarea/i.test(this.nodeName)
|| /text|hidden|password|date|email/i.test(this.type))) {
sectionData[this.name.substr(section.length+1)] = $(this).val();
console.log(this.name + " -> " + $(this).val());
}
});
return sectionData;
}
</script>
</head>
<body>
<div data-role="page" id="menu" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Menu Page</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="page1" href="#page1" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">Page1</a></li>
<li><a target_id="page2" href="#page2" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Page2</a></li>
</ul>
<input id="submit_my_form" type="button" name="send" value="Submit"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
Menu page footer
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 1</h1>
Next
</div>
<div data-role="content">
<label for="names-initials">Name:</label>
<input type="text" name="names-initials" id="names-initials" value=""/>
<label for="names-surname">Surname:</label>
<input type="text" name="names-surname" id="names-surname" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 2</h1>
</div>
<div data-role="content">
<label for="dates-birthday">Birthday:</label>
<input type="date" name="dates-birthday" id="dates-birthday" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Back to Main From</a>
</div>
</div>
</body>
</html>
I'm currently using an parser called Element Parser and I'm trying to parse an img tag that is the 4th img tag down under the div id "Group-E". I can retrieve the 2nd img but not anything after the 2nd img. The img that I'm wanting to parse is:
<img src="http://example.com/I_need_this_image_here.jpg" />.
How can this be done? So far I've used the following code to get the 1st img tag:
Element* needIMG = [document selectElement: #"div.edgeTop div#Group-E img"];
HTML Code trying to parse
<div class="edgeTop">
<div id="Group-E">
<img src="http://example.com/image.jpg" id="image" /> <img src="http://example.com/image2.png" border="5" />
<h4>Group - Section E</h4>
<div class="efs" style="width:28px;">Group:</div>E<br />
<div class="efs" style="width:28px;">Link:</div>Group E<br />
<div class="efs" style="width:28px;">Date:</div><strong>Febuary 15, 2001</strong> by <strong>Date</strong><br />
<br />
<img src="http://example.com/image3.gif" class="image" style="padding: 0 4px 7px 0;" />Group;. <b>Group E</b><br /><br />Group E Other:
<img src="http://example.com/I_need_this_image_here.jpg" /> Other:<br />Group Site
<div class="efs">
<div style="padding:18px 0 1px 8px;">Link Pics:</div>
<img src="http://example.com/linkpic.gif" class="imagelink"/> </div>
</div>
<div class="efsl"></div>
Thanks for the help.
Figured it out after hours of trial and error. You have to use the "+" selector to get the next element.
Could you not add a class to the image you want to parse such as...
<img class="imgtoparse" src="http://example.com/I_need_this_image_here.jpg" />