ASP.NET MVC Render Partial View via Button click not render Bootstrap-select

Question

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é

I think you will find you answer here Render Partial View Using jQuery in ASP.NET MVC — Guilherme Lucena
– Guilherme Lucena, Commented Feb 4, 2016 at 18:33

Jorge F · Accepted Answer · 2016-02-05 18:21:46Z

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.

edited Feb 5, 2016 at 18:21

answered Feb 5, 2016 at 4:22

Jorge F

6931 gold badge12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

andrealmeida Over a year ago

It solved, at least partially. I had to change $("#yourElement").bootstrap-select(); to $('.selectpicker').selectpicker();

Vereonix Over a year ago

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.

Collectives™ on Stack Overflow

ASP.NET MVC Render Partial View via Button click not render Bootstrap-select

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related