0

I'm relatively new in .Net MVC and Jquery/CSS and those things.

I'm developing a function that when i click in a button it is displayed a partial View. I Dont want it to be rendered when the page loads, jsut when i click the button. That action i already have working, my problem is related with the library Bootstrap-Select and the style aplying to components showed in the partial view.

I'm performing this action with the next snippet:

$("#btn-create-new").on("click", function () {
        $('#myTabs a[href="#new-product-form-create-new"]').tab('show');
        //var tab_content_height = $('.modal-new-product-form').height() - $('#myTabs').height();
        //$('.tab-content').height(tab_content_height);

        $("#new-product-form-create-new").load('@Url.Action("PreCreationForm", "Home", new { createAction = "new" })');
});

When i do this, i think the JS of Bootstrap-select is not executed. But when i render the PartialView in the View:

@Html.Partial("~/Views/Home/PreCreationForm.cshtml")

The style of Select component is correctly applied. I need the first approach because i need to execute some actions in the controller.

Probably a ver noob question, but i dont have much experience in this field.

Thanks everyone for the time, André

andrealmeida
  • 91
  • 1
  • 3
  • 13
  • I think you will find you answer here [Render Partial View Using jQuery in ASP.NET MVC](http://stackoverflow.com/a/1721623/5046368) – Guilherme Lucena Feb 04 '16 at 18:33

1 Answers1

4

I'm not sure if I understand correctly, but the problem is because when you are loading the partialview, the bootstrap-select was defined after the jquery document ready. So the bootstrap-select doesn't apply to the new element that was created AFTER document ready. You have to call the bootstrap-select method to initialize the "plugin" after the partialview was rendered

var variableHere = "new";
var urlAjax = '@Url.Action("PreCreationForm", "Home")';
$.ajax({
    url: urlAjax,
    type: "GET",
    cache: false,
    data: {createAction : variableHere},
    success: function(result){
         $("#new-product-form-create-new").html(result);
         //whatever the init function is called you change it
         $("#yourElement").bootstrap-select();
    }
});

I think thats what you meant.

Jorge F
  • 679
  • 1
  • 11
  • 24
  • 2
    It solved, at least partially. I had to change $("#yourElement").bootstrap-select(); to $('.selectpicker').selectpicker(); – andrealmeida Feb 05 '16 at 10:00
  • Incase anyone else looks at this niche issue and you have your dropdown options in a .net model. You just need to call $('.selectpicker').selectpicker(); to load the dropdown. – Vereonix Aug 26 '21 at 14:16