jquery-edit-in-place pass dynamically parameter

Question

i use an jquery-Plugin: https://code.google.com/archive/p/jquery-in-place-editor/ . In the following section I use "JEIP" instead of the full name.

I try to bind JEIP not to an ID but to many objects by css class.

<div class="jeip" id='key1' data-type='elephant'>Text 1</div>
<div class="jeip" id='key2' data-type='mouse'>Text 2</div>

Now i want to pass the data-type element dynamically, too. I figured the "params" option out to pass additional data. But it seemst not to be dynamical.

To initialize JEIP I use:

    $(".editInPlace").editInPlace({
            url: "http://submitUrl/",
            params: "datatype="+$(this).data('type'),
            callback: function(){   
                 console.log( $(this).data('type') );
            },                
     }

But the params are wrong. I only get undifiend in the Server scripts which receives the submit action. When I use the callback function I am able to get an console output with the right data. How to pass data-elements to the Server?

Thanks for help.

Answer 1

Assuming all elements are in place at the time of execution of the script (i.e. they are not being dynamically added at some later point), you can simply loop the elements and call the editInPlace plug-in function with the appropriate values:

$('.editInPlace').each(function(i, el){
    var $el = $(el); // cache the jQuery object corresponding to the current element
    var dataType = $el.data('type');

    // call the editInPlace plugin directly on the element
    $el.editInPlace({
        url      : 'http://submitUrl/',
        params   : 'datatype=' + dataType,
        callback : function(){   
            console.log(dataType);
        }
    });
});