CODEWITHSUNDEEP
htmlselectrenderingmeteor
Josh Wulf
Josh Wulf

Reputation: 4877

HTML Select loses selection when re-rendered in Meteor

I have a couple of HTML elements on a page. Whenever the page context is invalidated and it re-renders the elements are re-rendered with no visual cue of the selected option.

If I check for the selection using $('.select1 option:selected') the selected option is returned. However, it is not rendered as selected. If it's a drop-down, then the first element shows up. If it's a multi-line select, the first (firefox) or last (chrome) element shows up with a greyed out select line on it.

If I then click the selected element a second time, it shows up as selected.

Anyone know how to fix this?

Upvotes: 0

Views: 862

Answers (2)

Josh Wulf
Josh Wulf

Reputation: 4877

I implemented the solution here: Meteor form state not being saved

Store the selected value in a session variable on click:

Template.packageViewer.events({
    'change .tagselect': function(){
        Session.set('tag', $('.tagselect :selected').html());}
    ,
    'change .groupselect': function(){
       Session.set('group', $('.groupselect :selected').html());}
    ,
    'change .packageselect': function(){
        Session.set('package', $('.packageselect :selected').val());}
});

Then set the select selected value in the post-render function:

Template.packageViewer.rendered = function(){
    $('.groupselect').val(Session.get('group'));
    $('.tagselect').val(Session.get('tag'));
}

Hacky, but works.

Upvotes: 2

user1173426
user1173426

Reputation:

Maybe you can use $('.select1').trigger("change"); function.

Upvotes: 0

Related Questions