Jquery Selectric not Loading on MVC Partial Views

Question

I have a SPA that I am working with that collects some data on the main page. I send the data to the controller, call a service and return a dataset to load into a partial view. The html select control is not getting styled using the jquery selectric elements that I would expect. I placed a select on the main page and it does style properly. I understand why it does not but is there a way to refresh the select control to get styled after the partial view loads

Main Form

Partial View

I added jquery Code to load the options on the select after the partial view renders and that works properly. I did that thinking that I could redraw the elements getting the selectric to apply but it didn't work. I even added a line to reinitialize selectric and that didn't change anything. Any thoughts?

<script type="text/javascript">
    $(function() {
        var text = ['--None--', 'Own', 'Rent'];
        var value = ['', 'Own', 'Rent'];
        var $select = $('#00N4100000e8OsC');

        for (var i = 0; i < text.length; i++) {
            var o = $('<option/>', { value: value[i] })
                .text(text[i])
                .prop('selected', i == 0);
            o.appendTo($select);
        }
        $('select').selectric('init');
    });
</script>

score 1 · Answer 1 · answered Apr 07 '20 at 08:09

1

are you sure this script is executed? use console.log and check in your console to make sure. one thing i noticed you should use $select in this line instead of $('select').selectric('init');

use this instead

$('#00N4100000e8OsC').selectric('init')

answered Apr 07 '20 at 08:09

mausinc

527
4
14

I did get it to work. I moved the js file with the selectric code into the partial view rather than the _layout.cshtml. Not the solution I would like but it does work. I tried updating the the initilizer with the file js file still in the _Layout.cshtml file and did get the error "selectric was not defined". The "test" select list on the index page is still working as expected. I assumed that as long as the js file was there, injecting code into the dom would have access to it, I knew I would have to initialize anything injected but it should still be able to access the file. – Tim Apr 07 '20 at 15:33
I got it. I'm an idiot. The key was to move the jquery script load into the head tag. Then call $('select').selectric('init'); on any partial view that contains a select. – Tim Apr 07 '20 at 18:33
life of an developer :) – mausinc Apr 08 '20 at 06:48

Jquery Selectric not Loading on MVC Partial Views

1 Answers1