Bonjour,

Dans un développement que je suis en train de faire, je voulais pouvoir passer les éléments d'un 'ul' en paramètre à la page suivante. (POST)

Pour information, ce 'ul' est alimenté par des éléments via un drag'n'drop venu d'un autre 'ul'.

Le première idée qui m'est venu est d'utiliser un event onDrop sur l''ul'. mais cela ne semble pas fopnctionner.

Savez vous me dire quelle est mon erreur SVP ?

Pour répondre à une question qui m'est arrivé quand j'avais choisi le mauvais forum. (Désolé)

Quand je parle de POST, je ne souhaite pas particulièrement utilisé AJAX. Je ne me suis pas encore plonger dedans mais finirais par le faire pour compléter mes savoirs.

Je voulais tout simplement écrire dans un 'input' lorsque je droperais un élément dans 'tikedbus_intervenant2' cependant, l'event ondrop n'est même pas enclencher. C'est là que je coince précisément.

Si une solution s'offre à moi dans AJAX, je n'aurais d'autre choix que d'y aller.

voici mon code :

<style>
    
#tikedbus_intervenant1, #tikedbus_intervenant2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
}
#tikedbus_intervenant1 li, #tikedbus_intervenant2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

#div_tikedbus_intervenants_1
{
    height: 300px;
    width: 150px;
    /*display: inline;*/
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: auto; /* Add vertical scrollbar */
}

.is-hidden
{
    height: 0;
    font-size: 0;
    padding: 0;
    border: none;
    display:none;
    /*visibility: none;*/
}

</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script><style>@media print {#ghostery-purple-box {display:none !important}}</style>
	    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
	$( function() {
		$( "#tikedbus_intervenant1, #tikedbus_intervenant2" ).sortable({
			connectWith: ".connectedSortable"
		}).disableSelection();
	} );
</script>
<div>
    <form id="tikedbus" name="tikedbus" action="index.php?page=add/tikedbus_addprocess" method="post">
        <label for="tikedbus_intervenant">Intervenant(s)</label>
        <input type="text" id="filter" placeholder="Filtrez les intervenants" />
        <div id="div_tikedbus_intervenants_1" >
            <ul class="connectedSortable ui-sortable" id="tikedbus_intervenant1" name="tikedbus_intervenant[]">
                <li  class="ui-state-default ui-sortable-handle" >TEST1</li>
                <li  class="ui-state-default ui-sortable-handle" >TEST2</li>
                <li  class="ui-state-default ui-sortable-handle" >TEST3</li>
                <li  class="ui-state-default ui-sortable-handle" >TEST4</li>
            </ul>
        </div>
        <ul class="connectedSortable ui-sortable"  id="tikedbus_intervenant2" name="tikedbus_intervenant2[]" ondrop="Drop()"></ul>
        <input id="listInert" name="listInert" type="text"  />
        <input type="submit" Value="Enregistrer" />
	</form>
    <script>
    var filter = document.getElementById('filter');
    var listItems = document.getElementById('tikedbus_intervenant1').querySelectorAll('li');
    var nolistItems = document.getElementById('tikedbus_intervenant2').querySelectorAll('li');
    filter.focus();
    filter.addEventListener
    (
        'keyup', function(e)
        {
            var val = new RegExp(e.target.value, 'gi');
            for(var i=0; i<listItems.length; i++)
            {
                if( e.target.value.length > 0)
                {
                    var text = listItems[i].innerHTML;
                    if( !text.match(val))
                    {
                        listItems[i].classList.add('is-hidden');
                    }
                    else
                    {
                        listItems[i].classList.remove('is-hidden');
                    }
                }
                else
                {
                    listItems[i].classList.remove('is-hidden');
                }
            }
            for(var i=0; i<nolistItems.length; i++)
            {
                alert(nolistItems[i]);
                nolistItems[i].classList.remove('is-hidden');
            }
        }
    );
    function Drop()
    {
        document.getElementById('listInert').value = 1;
        alert('juste pour voir si l\'event se declanche.');
    }
    </script>
</div>

-
Edité par pascalbocal 20 avril 2018 à 11:43:52