Set value on model directly from javascript

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Am using jquery autocomplete to query a custom webservice containing airport information.  I want to set a field on a model based on the selection made.

I first tried to set it using a jquery selector, but was unable to set an ID, or discover the ID of that field.  See comments in the code:

(function(skuid){	var $ = skuid.$;
$(document.body).one('pageload',function(){
   var $ = skuid.$;
var myModel = skuid.model.getModel('MyModelId');
var myComponent = skuid.component.getById('MyComponentUniqueId');
var htmlBody = 'Enter City/Airport: <input id="query" type="text" style="width:300px"/>'
$("#autoComp").html(htmlBody);
$(function(){
                                
            $('#query').autocomplete({
                source: 'https://xxxxxxxxxxxxxxxxx/airport/airportcodes.php?mode=autocomplete',
                search: function(event,ui){},
                response: function(event,ui){},
                select: function(event,ui){
                    //returns 3 character airport code after searching airport or city
                    var dcode = (ui.item.value.substring(1,4));
                     
                    //Would prefer to do this, but...
                    //Haven't found a way to specify the ID for a field in the Skuid UI
                    $('#Destination').val(dcode);
                   
                    //Next tried to get access to the field in the skuid model
                    var airportcodes = skuid.model.getModel('airportcodes').fields;
                    console.log(airportcodes);
                    
                    for (var j = 0; j < airportcodes.length; j++){
                        var fieldId = airportcodes[j].id;
                        switch(fieldId){
                            case 'Destination':
                                console.log(j);
                                //How to set the value of destination to dcode variable captured above?
                                break;
                        }
                    }                    
                }
                     });
                     
                     $('.ui-autocomplete-input').css({fontSize:'14px', fontFamily:'arial'});
                     $('.ui-autocomplete').css({fontSize:'14px', fontFamily:'arial'});
                });
});
})(skuid);
Photo of Jared Jones

Jared Jones

  • 2,214 Points 2k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Jared,

When you have the value, you can use .updateRow() to update the value in the skuid model. See skuid.model.Model
(Edited)
Photo of Jared Jones

Jared Jones

  • 2,214 Points 2k badge 2x thumb
Thanks Matt.  I am new to both Skuid and Javascript, and was trying to make it more complicated than it needed to be.  model.getFirstRow() was what I needed to see for it to make sense.

Here's the working code:

(function(skuid){	var $ = skuid.$;
$(document.body).one('pageload',function(){
   var $ = skuid.$;
var htmlBody = 'Enter City/Airport: <input id="query" type="text" style="width:300px"/>';
$("#autoComp").html(htmlBody);
$(function(){
                                
            $('#query').autocomplete({
                source: 'https://xxxxxxxxx/airport/airportcodes.php?mode=autocomplete',
                search: function(event,ui){},
                response: function(event,ui){},
                select: function(event,ui){
                    var dcode = (ui.item.value.substring(1,4));
                    var acmodel = skuid.model.getModel('Trip');
                    var row = acmodel.getFirstRow();
                    acmodel.updateRow(row,{Destination: dcode});
                }
                     });
                     
                     $('.ui-autocomplete-input').css({fontSize:'14px', fontFamily:'arial'});
                     $('.ui-autocomplete').css({fontSize:'14px', fontFamily:'arial'});
                });
});
})(skuid);
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Glad you were able to get this working!