jqueryjeditable

jquery_jeditable: control max number from precedent input


I have this problem with jquery_jeditable to cotrol max number by precedent input. I want the second value minor of the precedent value or equal, but I don't understand how capture the id of current "field" (this.id) for to build the id of precedent number and to read its value. thanks for any help Simple html:

$('.editable-text').editable('save.php',{
                id:'pk',
                type:'number',
                tooltip:'____',
                placeholder:'Grams',
                max:2000,
                width:50
                
});

                
$('.editable-text2').editable('save.php',{
                id:'pk',
                type:'number',
                tooltip:'____',
                placeholder:'Grams',
                max:function(id){return $('#'+id+'_wInit').text()},
                width:50
                
});

console.log('precedent value first row: '+$('#1_wEnd_wInit').text())

console.log('precedent value second row: '+$('#2_wEnd_wInit').text())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/2.0.17/jquery.jeditable.min.js"></script>

<span style="display: inline-block;width:80px;">Precedent</span>
&nbsp;
<span style="display: inline-block;width:80px;">Actual</span>
<br/>
<span style="display: inline-block;width:80px;" id="1_wEnd_wInit" class="editable-text" >1000</span>
&nbsp;
<span style="display: inline-block;width:80px;" id="1_wEnd" class="editable-text2">60</span>
<br/>
<span style="display: inline-block;width:80px;" id="2_wEnd_wInit" class="editable-text" >500</span>
&nbsp;
<span style="display: inline-block;width:80px;" id="2_wEnd" class="editable-text2" >20</span>


Solution

  • Alternative way is using event.currentTarget this will give reference to current element which is clicked i.e : editable-text2 then simply use .attr("id") to get id and set same to max.

    Demo Code :

    $('.editable-text').editable('save.php', {
      id: 'pk',
      type: 'number',
      tooltip: '____',
      placeholder: 'Grams',
      max: 2000,
      width: 50
    
    });
    
    
    $(".editable-text2").editable('save.php', {
      id: 'pk',
      type: 'number',
      tooltip: '____',
      placeholder: 'Grams',
      max: function() {
        //use currenttarget
        var id = $(event.currentTarget).attr("id")
        console.log($(event.currentTarget).attr("id"))
        console.log($('#' + id + '_wInit').text())
        return $('#' + id + '_wInit').text()
      },
      width: 50
    
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/2.0.17/jquery.jeditable.min.js"></script>
    
    <span style="display: inline-block;width:80px;">Precedent</span> &nbsp;
    <span style="display: inline-block;width:80px;">Actual</span>
    <br/>
    <span style="display: inline-block;width:80px;" id="1_wEnd_wInit" class="editable-text">1000</span> &nbsp;
    <span style="display: inline-block;width:80px;" id="1_wEnd" class="editable-text2">60</span>
    <br/>
    <span style="display: inline-block;width:80px;" id="2_wEnd_wInit" class="editable-text">500</span> &nbsp;
    <span style="display: inline-block;width:80px;" id="2_wEnd" class="editable-text2">20</span>