Set value on model directly from javascript

Questions
1

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: '<a target="_blank" rel="nofollow" href="https://xxxxxxxxxxxxxxxxx/airport/airportcodes.php?mode=autocomplete" title="Link https//ut-sfdepot1wencorgroupcom1443/airport/airportcodesphpmodeautocomplete">https://xxxxxxxxxxxxxxxxx/airport/airportcodes.php?mode=autocomplete</a>',
                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);
2

Jared,

When you have the value, you can use .updateRow() to update the value in the skuid model. See skuid.model.Model

3

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: '<a href="https://xxxxxxxxx/airport/airportcodes.php?mode=autocomplete" title="Link: https://ut-sfdepot1.wencorgroup.com:1443/airport/airportcodes.php?mode=autocomplete">https://xxxxxxxxx/airport/airportcodes.php?mode=autocomplete</a>',
                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);
4

Glad you were able to get this working!