par
nagstef » 07 sept. 2015, 13:56
Bonjour,
Encore une fois, j'aurai besoin de votre aide.
J'utilise jquery et son drag and drop.
Je crée donc les box déplaçables (des clients) : "$createBox.="dragDropObj.addSource('".$donnees['index_resa']."-".$horaire."'',true,true,true,false,'onDragFunction');\n";
".
puis celles fixes qui peuvent accueillir les box (leur logement) : " $createBoxDrop.="dragDropObj.addTarget('logement".$donnees2['id']."','dropItems');";".
puis si des données avient déjà été intégrée, il y a le : " $position.="Move('".$correspondances['index_resa']."','logement".$correspondances['id_hebergement_client']."');";"
jusque là, tout marche nickel, et bien désolé si cela ne parle pas de premier abord, mais l'intérêt est que cela parle à ceux qui connaissent le drag and drop Jquery.
Ma question commence maintenant. Actuellement, pour sauvegarder tout cela, je dois cliquer sur un lien qui renvoi vers une fonction et qui reprend chaque box, et affecte sa valeur :
Code : Tout sélectionner
<script type="text/javascript">
function Move(idOfDraggedItem,targetId){
var obj=document.getElementById(idOfDraggedItem);
var content=document.getElementById(targetId);
content.appendChild(obj);
}
// Custom drop actions for <div id="dropBox"> and <div id="leftColumn">
function dropItems(idOfDraggedItem,targetId,x,y)
{
var obj=document.getElementById(idOfDraggedItem);
var content=document.getElementById(targetId);
content.appendChild(obj);
}
function onDragFunction(cloneId,origId)
{
self.status = 'Started dragging element with id ' + cloneId;
var obj = document.getElementById(cloneId);
obj.style.border='1px solid #F00';
}
function Miseajourlogement(resa,logement){
var xhr = getXhr();
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 )
{
leselect = xhr.responseText;
document.getElementById('test')=leselect;
}
}
xhr.open("POST","./ajax_maj_logement.php",false);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("reservation="+escape(resa)+"&logement="+escape(logement));
}
function sauvegarde()
{
var xhr = getXhr();
document.getElementById('message').innerHTML="<div align='center' style='color:red;'>Sauvegarde en cours...</div>";
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 )
{
leselect = xhr.responseText;
document.getElementById('test')=leselect;
}
}
var parent=getElementsByClassName('dragableBox_logement');
for (i=0;i<parent.length;i++)
{
var listitems = parent[i].getElementsByTagName("div");
for (j=0;j<listitems.length;j++)
{
Miseajourlogement(listitems[j].id,parent[i].id);
}
}
document.getElementById('message').innerHTML="<div align='center' style='border:1px solid black;background-color:#ccc;color:red;'>Sauvegarde effectuee</div>";
window.location.replace('index.php?page=changement_affectation');
return true;
}
function getElementsByClassName(className,elm,tag){
var testClass = new RegExp("(^|s)" + className + "(s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i ];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
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 { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
var dragDropObj = new DHTMLgoodies_dragDrop();
<?php
echo $createBox;
echo $createBoxDrop;
echo $position;
?>
// Set <div id="dropBox"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('leftColumn','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.init();
</script>
Je souhaiterais savoir si je peux automatiser la sauvegarde une fois que je déplace une box (le client) vers la box accueillante (son logement), afin d'éviter tout oubli de sauvegarde, et surtout d'éviter l'attente obligatoire parfois longue (15sec pour 75 clients et 75 logements chez moi) de la sauvegarde complète.
J'espère avoir été suffisamment clair, et reste pendu à vos propositions.
Merci encore.
Bonjour,
Encore une fois, j'aurai besoin de votre aide.
J'utilise jquery et son drag and drop.
Je crée donc les box déplaçables (des clients) : "$createBox.="dragDropObj.addSource('".$donnees['index_resa']."-".$horaire."'',true,true,true,false,'onDragFunction');\n";
".
puis celles fixes qui peuvent accueillir les box (leur logement) : " $createBoxDrop.="dragDropObj.addTarget('logement".$donnees2['id']."','dropItems');";".
puis si des données avient déjà été intégrée, il y a le : " $position.="Move('".$correspondances['index_resa']."','logement".$correspondances['id_hebergement_client']."');";"
jusque là, tout marche nickel, et bien désolé si cela ne parle pas de premier abord, mais l'intérêt est que cela parle à ceux qui connaissent le drag and drop Jquery.
Ma question commence maintenant. Actuellement, pour sauvegarder tout cela, je dois cliquer sur un lien qui renvoi vers une fonction et qui reprend chaque box, et affecte sa valeur :
[code]<script type="text/javascript">
function Move(idOfDraggedItem,targetId){
var obj=document.getElementById(idOfDraggedItem);
var content=document.getElementById(targetId);
content.appendChild(obj);
}
// Custom drop actions for <div id="dropBox"> and <div id="leftColumn">
function dropItems(idOfDraggedItem,targetId,x,y)
{
var obj=document.getElementById(idOfDraggedItem);
var content=document.getElementById(targetId);
content.appendChild(obj);
}
function onDragFunction(cloneId,origId)
{
self.status = 'Started dragging element with id ' + cloneId;
var obj = document.getElementById(cloneId);
obj.style.border='1px solid #F00';
}
function Miseajourlogement(resa,logement){
var xhr = getXhr();
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 )
{
leselect = xhr.responseText;
document.getElementById('test')=leselect;
}
}
xhr.open("POST","./ajax_maj_logement.php",false);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("reservation="+escape(resa)+"&logement="+escape(logement));
}
function sauvegarde()
{
var xhr = getXhr();
document.getElementById('message').innerHTML="<div align='center' style='color:red;'>Sauvegarde en cours...</div>";
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 )
{
leselect = xhr.responseText;
document.getElementById('test')=leselect;
}
}
var parent=getElementsByClassName('dragableBox_logement');
for (i=0;i<parent.length;i++)
{
var listitems = parent[i].getElementsByTagName("div");
for (j=0;j<listitems.length;j++)
{
Miseajourlogement(listitems[j].id,parent[i].id);
}
}
document.getElementById('message').innerHTML="<div align='center' style='border:1px solid black;background-color:#ccc;color:red;'>Sauvegarde effectuee</div>";
window.location.replace('index.php?page=changement_affectation');
return true;
}
function getElementsByClassName(className,elm,tag){
var testClass = new RegExp("(^|s)" + className + "(s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i ];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
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 { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
var dragDropObj = new DHTMLgoodies_dragDrop();
<?php
echo $createBox;
echo $createBoxDrop;
echo $position;
?>
// Set <div id="dropBox"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('leftColumn','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.init();
</script>[/code]
Je souhaiterais savoir si je peux automatiser la sauvegarde une fois que je déplace une box (le client) vers la box accueillante (son logement), afin d'éviter tout oubli de sauvegarde, et surtout d'éviter l'attente obligatoire parfois longue (15sec pour 75 clients et 75 logements chez moi) de la sauvegarde complète.
J'espère avoir été suffisamment clair, et reste pendu à vos propositions.
Merci encore.