Danger_Fox Danger_Fox - 4 months ago 93
Ajax Question

jQuery and AJAX not working after deployed to server

I have a project that works fine on my local machine, but after its been deployed to the server, fails to work. If I put breakpoints in the javascript it hits them and goes through the code, but doesn't do what it's supposed to (jquery autocomplete). I've even made sure the script files I need are stored on the server. Is there something I'm over looking?

Code that needs to be run:

<script type="text/javascript">
$(document).ready(function () {
$("input.autocomplete").autocomplete({
appendTo: '.container',
source: function (request, response) {
$.ajax({
url: '/Home/GetUsers',
type: "POST",
dataType: "json",
data: { query: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item, value: item };
}));
}
});
}
});
})
</script>


_Layout.cshtml page where jquery is included:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/jquery-ui.css")
@Styles.Render("~/Content/themes/base/jquery-ui.autocomplete.css")
@Scripts.Render("~/bundles/modernizr")

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.20.js")"></script>

Answer

I needed to change the url to one that worked on the server. My final code looks like this:

<script type="text/javascript">
$(document).ready(function () {
    $("input.autocomplete").autocomplete({
        appendTo: '.container',
        source: function (request, response) {
            $.ajax({
                url: '/Lookup/Home/GetUsers',
                type: "POST",
                dataType: "json",
                data: { query: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item, value: item };
                    }));
                }
            });
        }
    });
})
</script>
Comments