Re-Render PartialView

[fdsanto]

Hi ! i'm having trouble when I re-render a partial view, it seems like all BMVC's functionality stops to work, typeahead, icons, etc but no errors are shown on the console..

To re-render I call some action that returns a

return PartialView("_GridVentaPartial", ventaViewModel.ItemsVenta);

and to display the new info

 
            $.ajax({
                type: "POST",
                data: JSON.stringify(tdata),
                url: '@Url.Action("AgregarItem", "Venta")',
                async: true,
                processData: false,
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    $('#GridVentaPartialContainer').html(result); // div
                },
                error: function (xhr) {
                    alert('Error: ' + xhr.statusText);
                },
            });

I also inspected the re-generated html:

1st render

input autocomplete="off" class="form-control" data-provide="typeahead" data-updater="GetArticuloPorNombre" data-url="/Articulo/CheckArticuloPorNombre" data-val="true" data-val-length="El Nombre no puede tener mas de 80 caracteres." data-val-length-max="80" data-val-required="Ingrese el Nombre." id="d_Articulo_Nombre" name="d.Articulo.Nombre" type="text" value=""

2nd render

input autocomplete="off" class="form-control" data-provide="typeahead" data-updater="GetArticuloPorNombre" data-url="/Articulo/CheckArticuloPorNombre" id="d_Articulo_Nombre" name="d.Articulo.Nombre" type="text" value="Gr"

thanks!!

Franco

[DmitryEfimenko]

please show me example of BMVC syntax that you have in your partial

[fdsanto]

i use BMVC inside a Grid.mvc.. but i could probably drop the grid and set up a normal table if that fixes the issue

                @Html.Grid(Model).Columns(columns =>
                {
                    columns.Add(c => c.Articulo.Codigo)
                    .Titled("Código")                        
                    .Encoded(false)
                    .Sanitized(false)
                    .SetWidth(150)
                    .RenderValueAs(d =>
                        @
                            @Html.Bootstrap().TextBoxFor(x => d.Articulo.Codigo).TypeAhead(new TypeAhead().Controller("Articulo").Action("CheckArticuloPorCodigo").Updater("GetArticuloPorCodigo"))
                        );                    

                    columns.Add(c => c.Cantidad)
                        .Titled("Cantidad")
                        .Encoded(false)
                        .Sanitized(false)
                        .SetWidth(1)
                        .RenderValueAs(d =>
                        @
                            @Html.Bootstrap().TextBoxFor(x => d.Cantidad)
                        );

                    columns.Add(c => c.Articulo.Nombre)
                        .Titled("Nombre")
                        .Encoded(false)
                        .Sanitized(false)
                        .SetWidth(1)
                        .RenderValueAs(d =>
                            @
                                @Html.Bootstrap().TextBoxFor(x => d.Articulo.Nombre).TypeAhead(new TypeAhead().Controller("Articulo").Action("CheckArticuloPorNombre").Updater("GetArticuloPorNombre")).AppendIcon(new Icon("glyphicon glyphicon-info-sign").Popover(new Popover("Descripción", d.Articulo.Descripcion)))
                            );

                    columns.Add(c => c.PrecioUnitario)
                        .Titled("Precio Unitario")
                        .Encoded(false)
                        .Sanitized(false)
                        .SetWidth(1)
                        .RenderValueAs(d =>
                        @
                            @Html.Bootstrap().TextBoxFor(x => d.PrecioUnitario)
                        );
                    columns.Add(c => c.PrecioTotal)
                        .Titled("Precio Total")
                        .Encoded(false)
                        .Sanitized(false)
                        .SetWidth(1)
                        .RenderValueAs(d =>
                        @
                            @Html.Bootstrap().TextBoxFor(x => d.PrecioUnitario).Disabled()
                        );

                }).Sortable(false)

[DmitryEfimenko]

So I see that the difference between 1st render and 2nd render are these attributes:

data-val="true" data-val-length="El Nombre no puede tener mas de 80 caracteres." data-val-length-max="80" data-val-required="Ingrese el Nombre."

These are validation related attributes. The attributes that are needed for Typeahead to work are all still the same. Now. There is one thing you need to know about typeahead (and actually about any JQuery addon scripts even like datepicker). They need to be initialized when loaded. So if you are using TwitterBootstrapMvcJs-*.js, there is a code there that initializes typeahead on page load:

$(function () {
        $('[data-provide=typeahead]').each(function () {
            var self = $(this);
            self.typeahead({
                source: function (term, process) {
                    var url = self.data('url');

                    return $.getJSON(url, { term: term }, function (data) {
                        return process(data);
                    });
                }
            });
        });
    });

Though this does not account for any ajax requests. After ajax request you need to run this code again. Just include it in your partial, in the <script> tag, at the very bottom, and it should work.

I do not know what happens with Icons. Please show render 1, render 2 code html code for them.

[fdsanto]

that fixed it! thanks!! actually the icons are fine, it was a popover with the same problem.

thanks again!

[DmitryEfimenko]

awesome, closing the issue.