Jeditable setting default selected value after change.

Question

My app allows the user to update a field via a drop down box using jeditable. When the program is loaded i created this function to get the selected value and set it as the selected value in jeditable.

But after i change the value, the selected tag stays set as the old value. how can i make it change to the new value?

this is the function

function updateType(ID,type){
$(document).ready(function(){

    $('#tweekType-'+ID).editable("edit.php?type=tweekType", {  

    data   : " {'copywriting':'Copywriting','design':'Design','code':'Code', 'selected':'"+type+"'}",
    type   : 'select'

    });
});

this is the wrapper around the tag.

<span id="tweekType-<?php echo $getTweaksReturned->tweekID; ?>">
<?php type($getTweaksReturned->type); ?>
<script>updateType('<?php echo $getTweaksReturned->tweekID; ?>','<? echo $getTweaksReturned->type; ?>'); </script>
</span>

The same tag is replicated on the page the returns the new variable.

Answer 1

Your code looks pretty un-jQuery like but it probably works. Is there a reason you are binding Jeditable to each id separately? Also is there a reason you are calling document.ready inside a function? Just give the span a class and bind to a class.

<span class="tweek" id="tweekType-<?php echo $getTweaksReturned->tweekID; ?>">
<?php type($getTweaksReturned->type); ?>
</span>

and the bind Jeditable to it inside inside document.ready (not a function). If select has value matching the text you click then it will selected by default. Note the design != Design. Do something like:

$(document).ready(function(){
    $('#tweekType-'+ID).editable("edit.php?type=tweekType", {  
       data   : " {'Copywriting':'Copywriting','Design':'Design','Code':'Code'}",
       type   : 'select'
    });
});

Or you can alternatively load the content of select from external url which returns and JSON array. Then the text and value of select do not need to match:

$(document).ready(function(){
    $('#tweekType-'+ID).editable("edit.php?type=tweekType", {  
       loadurl : "http://www.example.com/select.php",
       type    : 'select'
    });
});

Answer 2

I haven't submitted values to a php script but when you call another javascript function with jeditable you have to return the value to be updated from the function so:

$(".selector").editable(someFunction, {
    indicator: "Saving...",
    tooltip: "Click to edit...",
    data: " {'3':'3','4':'4','5':'5'}",
    type: 'select',
});

then:

function someFunction(value, settings) {
  // do some magic
  return(value);
}