So I have some html code and it's basically a page with students basic info. Would someone help me or show me how to insert CSV data into the html, so that I don't have to do it manually.. Thanks. Here is a sample code. So, "Student1" , "li.picture1", student1.png, "Student 1" and most importantly the " X sample1" "X sample2" and "Y sample1" "Y Sample2" would be autofilled with csv data..
<div id="Student1">
<div class="toolbar">
<h1>[title]</h1>
Back </div>
<head>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
}
</script>
<!-- for profile image -->
<style type="text/css" media="screen">
li.picture1 { background: #fff url(images/student1.png) no-repeat !important; }
</style>
<!-- end line customization -->
</head>
<ul class="profile">
<li class="picture1"></li>
<li class="clearfix"><h2>Student 1</h2></li>
</ul>
<ul class="field">
<li class="sep" align="center">Day 1</li>
<li><h3>X Sample1</h3> <p>Y Sample1</a></li>
<li class="sep" align="center">Day 2</li>
<li><h3>X Sample2</h3> <p>Y Sample2</a></li>
</ul>
</div>
Im afraid you will most likely have to do that manually unless you copy it all into excel and delete everything but the key data fields
I can think of two ways to do this. One is to write a program in your favourite programming language which reads the CSV file and combines it with the HTML. Like this: (not real code)
read CSV into $student,$picture...
output to file '<div id="' . $student . '"><div class="toolbar">' etc.
Or open the CSV in excel and put a formula at the end of the line like this
="<div id=""" & a1 & "><div class=""toolbar""> etc.".... & b1 & ....
Note the doubled up quotes inside the strings.
Related
I need to get node path of jstree element ,I using this code :
$(function () {
$('#jstree').jstree();
$('#jstree')
// listen for event
.on('changed.jstree', function (e, data) {
if (data.action == "select_node") {
var node_path = data.instance.get_path(data.node, "/");
console.log(node_path)
}
});
});
But I get unexpected space character (You can see in console.log() function)
http://jsfiddle.net/3q9Ma/741/
I need a pretty path like this : Folder1/children 1
Please tell me what wrong .
Thank you
The problem actually with the HTML in your fiddle. It looks like this:
<div id="jstree">
<ul>
<li>Folder 1
<ul>
<li id="child_1">Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>Folder 2</li>
</ul>
</div>
The get_path function is doing exactly what it is supposed to - taking the text from the parent <li> followed by the text from the child <li>. What is happening is that the text from the parent Folder 1 is actually 'Folder/n ', which is causing your problem. I see why you have your HTML structured the way you do, since the example on jstree tells you to do it this way. A way around it would be to remove the line break after your Folder 1. It looks terrible, but it will make your get_path function work:
<div id="jstree">
<ul>
<li>Folder 1<ul>
<li id="child_1">Child 1</li>
<li>Child 2</li>
</ul>
<li>Folder 2</li>
</ul>
</div>
I was trying to scrape using Perl Scrappy. I would like to select html elements with class attribute using 'select'.
<p>
<h1>
<a href='http://test.com'>Test</a>
<a href='http://list.com'>List</a>
</h1>
</p>
<p class='parent-1'>
<h1>
<a class='child-1' href="http://sample.com">SampleLink</a>
<a class='child-2' href="http://list.com">List</a>
</h1>
</p>
I need to get element('a' tag) with class name 'child-1' which is a child nod of <p class='parent-1'> using select method.
I have tried like this
#!/usr/bin/perl
use Scrappy;
my $scraper = Scrappy->new;
$scraper->get($url);
$scraper->select('p a')->data;
But it will select the first 'p' tag also.
Could you please help me with this?
Bearing in mind choroba's warning, to select an <a> element with a class of child-1 that is a child of a <p> element with a class of parent-1 you would write
$scraper->select('p.parent-1 > a.child-1')
The problem is that in HTML, a <p> tag can't contain a <h1> tag. In fact, the HTML is parsed as
<p></p>
<h1>
<a href='http://test.com'>Test</a>
<a href='http://list.com'>List</a>
</h1>
<p class='parent-1'></p>
<h1>
<a class='child-1' href="http://sample.com">SampleLink</a>
<a class='child-2' href="http://list.com">List</a>
</h1>
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 using jQuery 1.4.2 for a fixed bar on my site that scrolls with the site as you scroll.
But I'm also using 1.6.1 for a facebook thing I'm doing, and when I add them together, the bar breaks and the facebook thing works, but when I add the noConflict in, the bar works, but the facebook breaks, so if you could look at my code, and help me?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="themes/default/jx.stylesheet.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict();
</script>
<script type="text/javascript" src="src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
mc$(document).ready(function() {
mc$("#floating-bar").jixedbar();
});
</script>
<style type="text/css">
body {
margin: auto;
background-image: url(template.png);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<div id="floating-bar">
<ul>
<li title="Home"><img src="icons/home.png" alt="" /></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="Around The Web"><img src="icons/network.png" alt="Share" />
<ul>
<div id="fb-root"></div>
<!-- USE 'Asynchronous Loading' version, for IE8 to work
http://developers.facebook.com/docs/reference/javascript/FB.init/ -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '209445949091775',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<li><a id="share_button" href="#"><img src="icons/facebook.png" title="Facebook" /> Facebook</a></li>
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'Atomic Star Studios',
link: 'http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829',
picture: 'http://www.atomicstarstudios.com/logo.jpg',
caption: 'http://www.atomicstarstudios.com/',
description: 'This is the content of the "description" field, below the caption.',
message: 'Visit Atomic Star Studios for excellent prices on great printg and professional design! We Have All Your Marketing Needs!!!'
});
});
});
</script>
<li><img src="icons/twitter.png" title="Twitter" /> Twitter</li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title"Top Pages">Top Pages
<ul>
<li title="About"><img src="icons/info.png" alt="About" /></li>
<li title="Products"><img src="icons/blogs.png" alt="Products" /></li>
<li title="Portfolio"><img src="icons/block.png" alt="Portfolio" /></li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></span>
<div class="text-container">Like us on Facebook!</div>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829&layout=button_count&send=true&show_faces=false&width=100&action=like" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:30px;" allowTransparency="true"></iframe>
Follow #atomstars
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<span class="jx-separator-left"></span>
<ul>
<li title="Facebook"><img src="icons/facebook.png" alt="" /></li>
<li title="Twitter"><img src="icons/twitter.png" alt="" /></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="Chat with us Live!"><img src="http://www.atomicstarstudios.com/livezilla/image.php?id=04&type=inlay"></li>
</ul>
<span class="jx-separator-right"></span>
</div>
</body>
</html>
There are two problems with your code.
First, you should call the noConflict in-between both jQuery requests, not after the second one. You need to load the modules you need with each version of jQuery with the version so that when you call noConflict, references to the plugins are moved with it. You should also add "true" to noConflict so that all references to jQuery are removed before loading the second one:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
For more information, see the jQuery.noConflict documentation.
With that said, you should really consider find a way to not have to do this. It is not an elegant way to use jQuery.
TO ANSWER #TGR: Try this for yourself and you'll see for yourself that my solution works perfectly fine:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jixedbar.googlecode.com/svn/trunk/src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
alert('jQuery ' + mc$.fn.jquery + ': ' + ( typeof mc$.fn.jixedbar ));
alert('jQuery ' + jQuery.fn.jquery + ': ' + ( typeof jQuery.fn.fixedbar ));
});
</script>
<title>6367968</title>
</head>
<body>
<p>6367968</p>
</body>
</html>
The first alert will show "jQuery 1.4.2: function" while the second one will show "jQuery 1.6.1: undefined".
load jQuery 1.4
load all plugins which need to use 1.4
use noConflict
load jQuery 1.6
The problem is that jQuery plugins tend to be written this way:
(function($) {
// plugin code using $ for jQuery calls
})(jQuery)
i. e. they have an internal copy of whatever window.jQuery was at the time the plugin loaded, and you cannot change that afterwards.
update: a little more detail on how noConflict works (was too long for the comments). When you load jQuery, it creates an object containing all its functions and data, and sets window.$ and window.jQuery to that object. The old value of window.$ and window.jQuery is saved in the object.
When you call noConflict, it restores the saved value (by default for $; if you call it with true, also for jQuery). This is useful if you had something in those variables before loading jQuery, and don't want it to be overwritten. E.g. if you loaded things like this:
load jQuery 1.6
load jQuery 1.4
call noConflict(true)
then the first step would put jQuery 1.6 into $ and jQuery, the second would overwrite them with 1.4, and noConflict would restore $ and jQuery to the 1.6 version.
But since you load 1.4 first, and call noConflict between the two, the old value for $ and jQuery which is restored is undefined, which is not particularly useful, and will be overwritten by 1.6 anyway, so the noConflict call does not do anything useful beyond returning the value of $ which then can be stored by some other name ($mc in this case). var $mc = $; would work just as well for that.
As for the plugins, the auto-executing function copies the value of window.jQuery at the moment the plugin is loaded, and it does not matter at all what happens to window.jQuery afterwards:
window.jQuery = 'foo';
(function($) {
window.fun = function () {
console.log($);
}
})(jQuery);
window.jQuery = 'bar';
fun(); // will log 'foo'