Script zurb

lugdanum · avril 2010

Bonsoir tout le monde

J'essaye de mettre en place le script suivant : http://www.zurb.com/playground/ajax_upload (New Hotness)

Mais impossible, il n'y a rien à faire, j'ai passé la journée dessus mais que dalle.

Je ne peux malheureusement pas donner les pages de tests (projet confidentiel) mais voici en gros les derniers essais (j'ai carrément fait tout pointer vers leur site et tout viré ...) :

<br />&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<br />&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;<br /><br /><br />&lt;script src=&quot;http://www.zurb.com/javascripts/jquery.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />&lt;script src=&quot;http://www.zurb.com/javascripts/plugins/ajaxupload.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />&lt;script src=&quot;http://www.zurb.com/javascripts/global.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br /><br />&lt;script&gt;	<br />$(document).ready(function(){<br /><br />	var thumb = $(&#39;img#thumb&#39;);	<br /><br />	new AjaxUpload(&#39;imageUpload&#39;, {<br />		action: $(&#39;form#newHotnessForm&#39;).attr(&#39;action&#39;),<br />		name: &#39;image&#39;,<br />		onSubmit: function(file, extension) {<br />			$(&#39;div.preview&#39;).addClass(&#39;loading&#39;);<br />		},<br />		onComplete: function(file, response) {<br />			thumb.load(function(){<br />				$(&#39;div.preview&#39;).removeClass(&#39;loading&#39;);<br />				thumb.unbind();<br />			});<br />			thumb.attr(&#39;src&#39;, response);<br />		}<br />	});<br />});<br />		<br />		function initZURB(){}<br />&lt;/script&gt;<br /><br />&lt;style&gt;<br />		span.wrap { padding: 10px; }<br />		span.wrap.hotness { margin-left: 30px; }<br />		span.wrap.old-and-busted { width: 358px; }<br />		<br />		span.wrap button { display: block; margin-top: 10px; }<br />		<br />		span.wrap label { margin-bottom: 5px; }<br />		div.preview { float: left; width: 100px; height: 100px; border: 2px dotted #CCCCCC; }<br />		div.preview.loading { background: url(../images/loading.gif) no-repeat 39px 40px; }<br />		div.preview.loading img {display: none; }<br />/*		input#imageUpload { width: 400px; }*/<br />		div.highlight { margin-bottom: 20px; }<br />		<br />		span.wrap form { margin: 0; }<br />&lt;/style&gt;<br /><br />&lt;/head&gt;<br /><br />&lt;body&gt;<br />&nbsp; &nbsp; <br />&nbsp; &nbsp; 					&lt;h2&gt;New Hotness&lt;/h2&gt;<br />		&lt;div class=&quot;column-row&quot;&gt;<br />			&lt;div class=&quot;seven columns&quot;&gt;<br />				&lt;div class=&quot;preview&quot;&gt;<br />					&lt;img id=&quot;thumb&quot; width=&quot;100px&quot; height=&quot;100px&quot; src=&quot;http://www.zurb.com/images/icons/128px/zurb.png&quot; /&gt;<br />				&lt;/div&gt;<br /><br />				&lt;span class=&quot;wrap hotness&quot;&gt;<br />					&lt;form id=&quot;newHotnessForm&quot; action=&quot;adresse de la page contenant le formulaire&quot;&gt;<br />						&lt;label&gt;Upload a Picture of Yourself&lt;/label&gt;<br />						&lt;input type=&quot;file&quot; id=&quot;imageUpload&quot; size=&quot;20&quot; /&gt;<br />						&lt;button type=&quot;submit&quot; class=&quot;button&quot;&gt;Save&lt;/button&gt;<br />					&lt;/form&gt;<br />				&lt;/span&gt;<br />			&lt;/div&gt;<br />			&lt;div class=&quot;nine columns&quot;&gt;<br />				&lt;p&gt;&lt;strong&gt;Now try this variation.&lt;/strong&gt; We ditch the upload button in favor of a save button and fire the AJAX upload event as soon as a file <br />					is selected. The image is processed server side and a thumbnail is loaded onto the existing page. Dosen&#39;t that feel so much better?&lt;/p&gt;<br /><br />				&lt;p&gt;We now have a visual representation (imagine that) of the image we selected. This is particularly useful in larger forms when <br />					many fields will be submitted with a single action. It allows the user to review the form before pressing save and see what image<br />					 (or images) they selected.&lt;/p&gt;<br />			&lt;/div&gt;<br />		&lt;/div&gt;<br /> <br /> <br /> 	&lt;script type=&quot;text/javascript&quot;&gt;<br />			// This function will be located in: global.js<br />			initZURB();<br />			<br />			// This function will be located in: /public/javascripts/layouts/playground.js<br />			if (typeof initLayout == &#39;function&#39;) initLayout();<br />		<br />			// This function will be located in: /public/javascripts/controllers/playground.js<br />			<br />			if (typeof ajaxUploadPage == &#39;function&#39;){<br />				ajaxUploadPage();<br />			}<br />		&lt;/script&gt;<br /><br />&lt;/body&gt;<br />&lt;/html&gt;<br />

Impossible de trouver ces deux fichiers :

// This function will be located in: /public/javascripts/layouts/playground.js
if (typeof initLayout == 'function') initLayout();

// This function will be located in: /public/javascripts/controllers/playground.js

Si quelqu'un peux le tester et trouver comment le faire fonctionner, je le remercie d'avance.

J'oubliais, j'ai mis les bons droits sur le serveur.

Merci d'avance.