[problema ajax]Jcrop con jQuery

**Chef89** · 02-06-2009, 01:50

Salve, ho un problema con ajax.

Ho un modulo di upload il quale carica l'immagine in un div sottostante il box di input.

vorrei applicare a questa immagine il crop con Jcrop, ma non mi viene caricato correttamente Jcrop.

Vi riporto il codice

Nella head della pagina index.html

codice:

$(function()
{
	$('#cropbox').Jcrop({
		aspectRatio: 2
	});
});

Il codice del campo file che esegue l'upload e mostra correttamente l'immagine nel div.

codice:

<input type="file" name="image" size="80" onchange="upload(this.form)" /> 
<div id="img_result"></div>

Il risultato che fornisce PHP, il tag img con id="cropbox" x attivare Jcrop

codice:

[img]www.sito.it/img/immagine.gif[/img]

Il problema è che non si attiva la funzione di crop. Come posso fare?

Grazie in anticipo

**Chef89** · 03-06-2009, 01:12

nessuno che saprebbe aiutarmi?

**Xinod** · 03-06-2009, 01:41

tutto troppo generico

Il codice del campo file che esegue l'upload e mostra correttamente l'immagine nel div.

mostra quando, come?
e questo

$(function()
{
$('#cropbox').Jcrop({
aspectRatio: 2
});
});

quando viene eseguito?
l' immagine e' a disposizione quando viene eseguito?

non rispondere a parole, metti in condizione di vedere il procedimento

**Chef89** · 03-06-2009, 03:13

La pagina html è composta così

codice:

<html>

<head>
<title>Titolo</title>
<script type="text/javascript" src="ajaxupload.js"></script>
<script type="text/javascript" src="jcrop.js"></script>
<script ...></script>

<script type="text/javascript">
// dice al codice di attivare il crop x l'id cropbox
$(function()
{
$('#cropbox').Jcrop({
aspectRatio: 2
});
});
</script>
</head>
<body>

<input type="file" name="upload" onchange="upload(this.form)"/>

<div id="result"></div>
</body>
</html>

ajaxupload.js è una semplice classe che prende il valore del form e lo invia a php che carica l'img sul server e ritorna il risultato che poi verrà mostrato nel div con id="result"

il file php fornisce il seguente output

Codice PHP:


// .. codice x l'upload ..



echo '[img]immagine.gif[/img]';

Il problema, da quanto penso di aver capito, è dovuto che al caricamento della pagina viene caricato jcrop x tutte le immagini con id cropbox, mentre il div con il risutlato dell'upload è vuoto quindi nella pagina non ci sono immagini e non si attiva.

Quando poi viene caricata un immagine essa viene mostrata nel div quando oramai jcrop è già stato caricato e non ha trovato risultati. dovrei riuscire a fare il controllo di jcrop quando è caricata tramite ajax l'img così da poter attivarlo.

**buribus** · 03-06-2009, 12:13

forse devi semplicemente richiamare la tua function dentro $(document).ready():
[PHP]
$(document).ready(function() {
// il tuo codice javascript
});
/PHP]

**Xinod** · 03-06-2009, 13:37

no, buribus, il problema sarebbe sempre li'
come gli sara' forse ormai chiaro, deve far eseguire questo
$('#cropbox').Jcrop({
aspectRatio: 2
});
solo quando ha ottenuto il risultato dell' upload,
va modificato ajaxupload.js

**buribus** · 03-06-2009, 14:31

hai ragione Xinod, è che avevo letto di getto e non avevo capito che caricava l'immagine uplodata tramite ajax.
a questo punto allora come dici tu deve modificare il codice (che non conosciamo) di ajaxupload.js ed eseguire dopo la chiamata Ajax la funzione di jcrop, onSuccess o onComplete, non uso jquery e non mi ricordo la sintassi adatta.

**Chef89** · 03-06-2009, 21:07

in tanto vi ringrazio per l'aiuto, molto prezioso, che mi state fornendo.

questo di seguito è il codice javascript del file ajaxupload.js

codice:

function $m(theVar){
	return document.getElementById(theVar)
}
function remove(theVar){
	var theParent = theVar.parentNode;
	theParent.removeChild(theVar);
}
function addEvent(obj, evType, fn){
	if(obj.addEventListener)
	    obj.addEventListener(evType, fn, true)
	if(obj.attachEvent)
	    obj.attachEvent("on"+evType, fn)
}
function removeEvent(obj, type, fn){
	if(obj.detachEvent){
		obj.detachEvent('on'+type, fn);
	}else{
		obj.removeEventListener(type, fn, false);
	}
}
function isWebKit(){
	return RegExp(" AppleWebKit/").test(navigator.userAgent);
}
function ajaxUpload(form,url_action,id_element,html_show_loading,html_error_http){
	var detectWebKit = isWebKit();
	form = typeof(form)=="string"?$m(form):form;
	var erro="";
	if(form==null || typeof(form)=="undefined"){
		erro += "The form of 1st parameter does not exists.\n";
	}else if(form.nodeName.toLowerCase()!="form"){
		erro += "The form of 1st parameter its not a form.\n";
	}
	if($m(id_element)==null){
		erro += "The element of 3rd parameter does not exists.\n";
	}
	if(erro.length>0){
		alert("Error in call ajaxUpload:\n" + erro);
		return;
	}
	var iframe = document.createElement("iframe");
	iframe.setAttribute("id","ajax-temp");
	iframe.setAttribute("name","ajax-temp");
	iframe.setAttribute("width","0");
	iframe.setAttribute("height","0");
	iframe.setAttribute("border","0");
	iframe.setAttribute("style","width: 0; height: 0; border: none;");
	form.parentNode.appendChild(iframe);
	window.frames['ajax-temp'].name="ajax-temp";
	var doUpload = function(){
		removeEvent($m('ajax-temp'),"load", doUpload);
		var cross = "javascript: ";
		cross += "window.parent.$m('"+id_element+"').innerHTML = document.body.innerHTML; void(0);";
		$m(id_element).innerHTML = html_error_http;
		$m('ajax-temp').src = cross;
		if(detectWebKit){
        	remove($m('ajax-temp'));
        }else{
        	setTimeout(function(){ remove($m('ajax-temp'))}, 250);
        }
    }
	addEvent($m('ajax-temp'),"load", doUpload);
	form.setAttribute("target","ajax-temp");
	form.setAttribute("action",url_action);
	form.setAttribute("method","post");
	form.setAttribute("enctype","multipart/form-data");
	form.setAttribute("encoding","multipart/form-data");
	if(html_show_loading.length > 0){
		$m(id_element).innerHTML = html_show_loading;
	}
	form.submit();
}

la funzione che viene chiamata x l'upload è ajaxUpload(), che codice e dove dovrei mettere per risolvere il mio problema?

grazie

**Chef89** · 06-06-2009, 11:50

Nessuno saprebbe aiutarmi? ve ne sarei grato.

**Xinod** · 06-06-2009, 13:02

prova questo
$('#cropbox').Jcrop({aspectRatio: 2});
dopo questo
$m('ajax-temp').src = cross;

Discussione: [problema ajax]Jcrop con jQuery

Strumenti discussione

Ricerca discussione

Visualizza

[problema ajax]Jcrop con jQuery

Permessi di invio