Hello,
Désolé de n'avoir pas répondu plus vite. J'avais laissé tomber le code par manque de temps, et là je m'y remets et je me retrouve dans le même problème puisque je ne l'avais pas réglé en mai dernier :s (vive GIT)
Voici le code du menu, et qui fonctionne.
1 2 3 4 5 6 7
| <div id="top">
<a onclick="go('requests');">Automatique</a> .::.
<a href="#?w=500" rel="popup_sendfile" class="poplight">Envoyer un fichier</a> .::.
<a onclick="go('xml');">Gestion des XML</a> .::.
<a onclick="go('templates');">Gestion des modèles</a> .::.
<a onclick="go('list');">Gestion des fichiers générés</a> .::.
</div> |
Je charge mes pages via XMLHttpRequest. Pour la popup modal, celle du menu popup_sendfile fonctionne car elle est dans la fenetre principale.
La popup_sendfile:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <div id="popup_sendfile" class="popup_block">
<h1>Envoi manuel</h1>
<hr />
<div id="viewform">
<form method="post" enctype="multipart/form-data" action="uploadFile.php">
<p>Veuillez sélectionner sur votre ordinateur le fichier modèle à envoyer:</p>
<p>
<input type="file" id='file' name="newfile" />
<select name="dir" id="dir">
<option selected="selected" value=""></option>
<option value="xml">Fichier xml</option>
<option value="template">Fichier modèle</option>
</select>
<input type="submit" value="Envoyer" />
</p>
</form>
</div>
</div> |
Le code d'ouverture de la popup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <script type="text/javascript">
{literal}
$(document).ready(function(){
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel');
var popURL = $(this).attr('href');
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1];
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="templates/default/img/close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
});
return false;
});
});
{/literal}
</script> |
PS: J'utilise smarty, , d'où le {literal}
Et la fonction "go()" qui permet d'ouvrir mes pages dans la div "content":
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
| function getXhr() {
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
} else {
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
function go(page){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
resp = xhr.responseText;
document.getElementById("loader").style.display = "none";
document.getElementById("content").style.backgroundColor = "#fff";
document.getElementById('content').innerHTML = resp;
} else if (xhr.readyState < 4) {
document.getElementById("content").style.backgroundColor = "#cccccc";
document.getElementById("loader").style.display = "inline";
}
}
xhr.open("GET", page + ".php", true);
xhr.send(null);
} |
Jusque là ça va. Le problème est que je voudrai ouvrir une autre popup dans ma div "content" qui contient la page demandée via le menu. J'ai donc remis dans ma page qui est chargée:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <script type="text/javascript">
{literal}
$(document).ready(function(){
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel');
var popURL = $(this).attr('href');
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1];
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="templates/default/img/close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
});
return false;
});
});
{/literal}
</script> |
La nouvelle popup:
1 2 3
| <div id="popup_list" class="popup_block">
test
</div> |
et un lien qui y fait référence:
<a href="#?w=500" rel="popup_list" class="poplight">test</a>
Mais la popup ne fonctionne pas. je pense que le jquery ne s'applique pas au contenu de la div "content".
Une idée ?
Partager