Filipe Costa Filipe Costa - 5 months ago 10
jQuery Question

.load start new path

in my project im trying to add a modal bootstrap to 1 of my views and i use

.load()
to load that view, the thing is when i try to load the view it only appears black, i tried to use
console.log()
to watch the errors and i saw this

http://localhost:38212/Desafios/Details/Solucoes/Details?id=14


when i click the div to trigger the modal, i am in
/Desafios/Details
, and I want to go to
/Solucoes/Details
and not all the url, I don't want to add the
.load()
url to the previous url that i had. How can i do that?

Here is my jquery function

$("#VisualizarSolucao").click(function (event) {
var id = $(this).attr("data-id");
$("#modal").load("../Solucoes/Details?id=" + id, function () {
$("#modal").modal();
})
event.preventDefault()
});


i am loading the js in a external file, here is the VisualizarSolucao id that is called on the click event

<div class="col-md-10" style="border-left:2px solid black">
<p style="text-align:left;padding-top:5px">
<a href="" id="VisualizarSolucao" data-id="@i.SolucaoId" style="font-weight:900">@i.SolucaoTitulo</a>
</p>
<br />
<div class="col-md-offset-4 col-md-8" style="text-align:right">
<text>Criado por <a href="#">@i.User.UserName</a> no dia @i.DataCriacao</text>
</div>
</div>

Answer

The url in the .load() function would need to be "/Solucoes/Details?id=" + id, however you should always use the @Url.Action() method to ensure your url's as correctly generated.

Since the script is in an external file, and razor code is not parsed in external files, change you html to

<a href="#" class="VisualizarSolucao" data-url="@Url.Action("Details", "Solucoes", new { id = i.SolucaoId })">

Note that the id is changed to a class name (your generating duplicate id attributes in a loop which is invalid html). You should also remove the inline styles and use css instead.

Then change the script to (no need for event.preventDefault())

$('.VisualizarSolucao').click(function() { // class name selector
    var url = $(this).data('url'); // use data(), not attr()
    $("#modal").load(url, function () {
        $("#modal").modal();
    })
});