Ajax GET request returns current HTML page

Question

Hi Im building Django first project. I use ajax to update product when user inputs keyword

This is my HTML:

<form id="productform" method="GET">{% csrf_token %}
            <label>Producto:</label>
            <div class="input-group">
                <span class="input-group-label"><i class="fi-magnifying-glass"></i></span>
                <input type="text" class="input-group-field" placeholder="Buscar.." id="keyprod" name="keyprod">
            </div>
</form>

When submitting form this is my JS:

$("#productform").submit(function (e) {
    e.preventDefault();
    var keyprod = $("#keyprod").val();
    $.ajax({
        type: 'GET',
        url: "ajax_get_products",
        data: {"keyprod": keyprod},
        success: function (response) {
            var sel = $("#productselect");
            sel.empty();
            console.log(response)
            for (var p in response) {
                sel.append('<option value="' + response[p]["id"] + '">' + response[p]["full_name"] + '</option>');
            }

        },
        error: function (response) {
            console.log(response)
        }
    })
})

This is my urls file:

app_name = "sales_app"

urlpatterns = [

    path(
        'sales/register/',
        views.LoadCurrentSaleInfo.as_view(),
        name='sale-register',
    ),
    path(
        'sales/register/<str:new>',
        views.LoadCurrentSaleInfo.as_view(),
        name='sale-register',
    ),
    path('sales/register/ajax_get_products',
         ajax_get_products, name="ajax_get_products"),   
]

And finally this is the code in my view:

def ajax_get_products(request):
    
    print("Im in ajax request") --> This is never shown

    if request.is_ajax and request.method == "GET":
        keyprod = request.GET.get("keyprod", None)
        products = Product.objects.search_key_word(keyprod, 'name')
        serializer = ProductSerializer(products, many=True)
        return JsonResponse(serializer.data, safe=False, status=200)

    return JsonResponse({}, status=400)

When I print the response in the console in my JS method, the current html page in which the form is being submitted is printed. What am I doing wrong any ideas? Thanks!

I attach my main url file too:

urlpatterns = [
    path('admin/', admin.site.urls),
    # users app
    re_path('', include('applications.users.urls')),
    re_path('', include('applications.home.urls')),
    re_path('', include('applications.clients.urls')),
    re_path('', include('applications.providers.urls')),
    re_path('', include('applications.products.urls')),
    re_path('', include('applications.sales.urls')),

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Answer 1

Based on the url patterns shown in your errors Not Found: /sales/register/sales/register/ajax_get_products is showing /sales/register/sales/register/ where this might be causing the problem what you want is /sales/register/ajax_get_products/ .

Here's what I'd suggest... For the time being try this.

path('ajax_get_products/', ajax_get_products, name="ajax_get_products"),

Within the Ajax call set the url as.

url: "/ajax_get_products/",

Answer 2

Your urlpattern sales/register/<str:new> means that it requires a string that will be passed to your view as a parameter called new , so you'll never reach sales/register/ajax_get_products because the previous path is preventing reach to this one. Django tests all patterns one by one in the order it appears in the urlpattern. So you can try some options here.

Reorder pattern:

urlpatterns = [
    path(
        'sales/register/',
        views.LoadCurrentSaleInfo.as_view(),
        name='sale-register',
    ),
    path('sales/register/ajax_get_products',
         ajax_get_products, name="ajax_get_products"),
    path(
        'sales/register/<str:new>',
        views.LoadCurrentSaleInfo.as_view(),
        name='sale-register',
    ),   
]

This will ensure that the pattern for ajax_get_products will be tested first, then it will fall back to the other pattern.

Change the pattern:

urlpatterns = [
    path(
        'sales/register/',
        views.LoadCurrentSaleInfo.as_view(),
        name='sale-register',
    ),
    path(
        'sales/register/new',
        views.LoadCurrentSaleInfo.as_view(),
        name='sale-register',
    ),
    path('sales/register/ajax_get_products',
         ajax_get_products, name="ajax_get_products"),   
]

This avoids conflicts of the patterns, one for rendering the new form, and the other for getting the products.