0
Gentlemen, I will try to explain my problem, I hope to be clear.
I’m using C# MVC5 in my app.
Today I have a page and in it a grid. In this grid there is a button to edit the record.
By clicking this button, I open a modal and it displays a form with the data to be edited.
I use ajax so that the modal content is created dynamically, according to the code below.
@Ajax.ActionLink(linkText: "Clique Aqui",
actionName: "Editar",
ajaxOptions: new AjaxOptions { UpdateTargetId = "modal",
InsertionMode = InsertionMode.InsertAfter })
<div id="modal"></div>
What happens is that, when clicking, it generates the content of the form and "puts" inside the div "modal". So far, so good. The problem happens that as the content is added via ajax, that is, after the page has already been loaded, I lose the css "piece" of the page, only part of it works.
I have one inside the form, and it for example does not "inherit" css.
If I put HTML inside the page, without ajax it works, but I need it done via ajax.
So I ask: How can I do a CSS re-load or force this new "piece" of HTML inserted in the source, use the full css and jquery?
The HTML inserted is this:
<form action="/CedenteDocumentos/Edit/1" method="post"><input name="__RequestVerificationToken" type="hidden" value="qshEjMnv9StRE3qk5uBu1VJ6rUuxvyl_b06t0kD3nE2ykez2IXWEBqXiqD3_XLQBvo92q0ExL9iY3HbG0s3dVN7Zd8UMWgsDAzGDvAm3D6o1"> <div class="modal-content">
<input type="hidden" id="Id" name="Id" value="1">
<div class="row">
<div class="input-field col l8">
<input class="validate text-box single-line" id="nome" name="Nome" placeholder=" " type="text" value="Documento 144444">
<label for="Nome">Documento</label>
</div>
</div>
<div class="row">
<div class="input-field col l6">
<select data-val="true" data-val-required="The Grupo field is required." htmlattributes="{ value = 0 }" id="Grupo" name="Grupo"><option value="">Selecione</option>
Enterprise Partners Representatives Group
<div class="input-field col l2" style="margin-top: -5px; margin-left: -10px;">
<input type="checkbox" id="ativo" name="ativo" class="filled-in" checked="checked" value="1">
<label for="ativo">Ativo</label>
</div>
</div>
<div class="row">
<div class="row">
<div class="col l10" style="margin-top: 30px;">
<button class="btn-floating btn-sm waves-effect waves-light green darken-1 right" style="transform: scale(1)" type="submit" name="action" title="Salvar">
<i class="mdi-action-done"></i>
</button>
</div>
</div>
</div>
</div>
If I put this code "in the hand" that is, without being inserted with ajax, it works perfectly, but when I put via ajax, part of the CSS does not work.
When adding new elements to a page, they automatically have access to all CSS rules and access jQuery functions. So it should work normally. Add to the question the content that is added to the modal div and the styles that should be applied to these elements, so we can help you.
– Bernardo Botelho
Inserting HTML is taking into account all the classes and selectors your CSS uses?
– Leonel Sanches da Silva