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.

score 3 · Answer 1 · edited Oct 29 '12 at 04:28

3

I've had the same issue. The answers given here are not to the point.

Anyway, I solved it with a pretty simple and neat solution:

Just don't add the 'selected' key and value.

Every time you open the select box it's automatically on the value of the cell...

Hope this helps.

edited Oct 29 '12 at 04:28

Nikhil

16,194
20
64
81

answered Mar 22 '12 at 13:15

Doron Sagi

31
2

I have been searching for this answer for hours, this worked perfectly thank you so much! – seaofinformation Nov 02 '17 at 04:38

score 1 · Answer 2 · edited Mar 22 '12 at 22:53

1

In my case I had to trim the value. This is because of mysterious white spaces.

$('.edit').editable('/xxx/TableRowUpdate', {
...
data: function (value, settings) {
return " {'a':'category a','b':'category b','selected': '" + $.trim(value) + "'}";
},
...

Hope this can help!

edited Mar 22 '12 at 22:53

Alex Lockwood

83,063
39
206
250

answered Feb 23 '12 at 07:50

Pietro

11
1

score 0 · Answer 3 · answered Jul 10 '09 at 10:51

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'
    });
});

score 0 · Answer 4 · answered Nov 25 '09 at 19:58

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);
}

score 0 · Answer 5 · answered Mar 22 '11 at 00:03

There are two ways to pre-select the current selected value.

If it is pure client side you can override the data function:

 $('.edit').editable('/xxx/TableRowUpdate', {
   ...
   data: function (value, settings) {
     return " {'a':'category a','b':'category b','selected': '" + value + "'}";
   },
   ...

If it is server side you can use

$('.edit').editable('/xxx/TableRowUpdate', { 
     ...    
     loadurl: '/xxx/FileCategoryList',
     loadtype: "POST",
     loaddata: function(value, settings) {
                  return {selectedValue: value};
               },

The server side code (c# MVC example) would look like

public JsonResult FileCategoryList(string selectedValue)
{
  var categories = new Dictionary<string, string>{{"a", "a category"}, {"b", "b category"}, {"selected", selectedValue}};
    return Json(categories, JsonRequestBehavior.DenyGet);
}

Jeditable setting default selected value after change

5 Answers5