# Using Javascript and AJAX in the Fetch()API method: returns no values as a response

**URL:** <https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856>\
**Category:** Templates & Frontend\
**Created:** [August 14, 2024, 10:15am UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856 "2024-08-14T10:15:52Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 19, 2024, 9:55am UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/21 "2024-08-19T09:55:34Z")

</div>

Please be patient with me, … what I have found online about Django Template Partials indicates that forms will play a part in utilizing an HTML fragment, however, my app isn’t exactly making use of any forms. I’d appreciate your comments ??

---

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 19, 2024, 10:16am UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/22 "2024-08-19T10:16:35Z")

</div>

After reading the Django Tutorial to get a sense of how a database can be accessed through views throughout the web app, I am wondering if I could possibly need to use an if statement to loop through each one of the elements in my project. I’ve read some posts about looping through the entire selection of data for example ??

---

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 19, 2024, 12:10pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/23 "2024-08-19T12:10:27Z")

</div>

Forms.py

```auto

class FormData(forms.ModelForm):
  

class Meta:
   model = assignments
     lastAssignmentSelected = table1.objects.all()
     print lastAssignmentSelected
  #assignments_id = forms.CharField(selection = lastAssignmentSelected)
  fields = " __all__" 

```

Views.py

```auto

class getlastAssignmentSelected(View):
    def data(self, request, *args, **kwargs):
        form = FormData(request.POST)
        if form.is_valid():
            options_value=request.POST['assignments']
  value=request.POST['value']
    form.save()
     print(table1,options_value)

return render(request, 'main/lastAssignmentSelected', context={"assignemnts":table1, "value":options_value})

```

As you can see, I’ve also tried incorporating the form class with form.ModelForm as well, but still haven’t been able to get it right.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 19, 2024, 12:24pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/24 "2024-08-19T12:24:23Z")

</div>

I think at this point you need to break this down into its separate parts and look at this piece by piece. I’m getting the impression that you’re getting confused between what’s happening in the server in Django and what needs to happen in the browser in JavaScript.

So let’s start with the very beginning, and the JavaScript you need to call the view. Ignore _everything else_ for now.

Do you have working code that lets you select an element on your page, create the correct url, and issue the request to the server?

If yes, we can proceed to the next step. (If not, lets get this working first.)

---

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 19, 2024, 12:46pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/25 "2024-08-19T12:46:34Z")

</div>

> [@KenWhitesell](#):
>
> Do you have working code that lets you select an element on your page, create the correct url, and issue the request to the server?

Hi. Thanks for your response. As far as I can make out the only working code related to selecting an element on the current web page is either:

```auto
selectAssignment = document.getElementById('assignments');

```

OR

```auto

document.getElementById("assignments").innerHTML = lastAssignmentSelected;

```

I am sure the following url could work if lastAssignmentSelected is the variable that determines the option value that is returned in the new table:

```auto

path('getfirstAssignemntSelected/<lastAssignmentSelected>', views.getfirstAssignmentSelected, name='lastAssignmentSelected')

```

But, as for issuing the request to the server - I am not sure whether that would look something like the following example from Django Responses and Objects:

```auto

if request.method == "GET":
    do_something()
elif request.method == "POST":
    do_something_else()

```

Let me know what you think ?  
Otherwise, I would be so glad to start from the beginning and get this working.

---

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 19, 2024, 12:50pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/26 "2024-08-19T12:50:51Z")

</div>

> [@KenWhitesell](#):
>
> So let’s start with the very beginning, and the JavaScript you need to call the view. Ignore _everything else_ for now.

As far as I understand, I only have Javascript that is meant to be a section of code that results in values being brought into a new table. I think when you say Javascript needed to call the view - I immediately think of the getfirstSelectedAssignment view that I’ve defined and expect to act as the view where the table reads lastAssignmentSelected.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 19, 2024, 1:00pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/27 "2024-08-19T13:00:23Z")

</div>

> [@consarnproject](#):
>
> Hi. Thanks for your response. As far as I can make out the only working code related to selecting an element on the current web page is either:

I thought you were trying to trigger this request based upon selecting something from a drop-down?

I’m referring to this select list:

> [@consarnproject](#):
>
> ```auto
> <td style="border: 1px solid gray;">{% csrf_token %}<select class="form-select"
> onchange="onChange(e)" name="year_date" id="year_date">
> <option value="YearDate1">2025</option>
> <option value="YearDate2">2024</option>
> <option value="YearDate3">2023</option>
> </select>
> </td>
> 
> ```

And this event listener:

> [@consarnproject](#):
>
> ```auto
> function onChange(e) {
> let lastAssignmentSelected;
> 
> // Returns the text value of the selected Assignment.
> 
> lastAssignmentSelected = e.target.options[e.target.selectedIndex].text;
> 
> fetch(`http://localhost:8000/getfirstAssignmentSelected/${lastAssignemntSelected}`)
> .then(function(res) {
> return res.json(); 
> })
> 
> ```

This is the JavaScript code that is going to call the Django view by issuing the http request.

Is this working as desired?

---

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 19, 2024, 1:19pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/28 "2024-08-19T13:19:07Z")

</div>

Hi. I apologize. I do not know how to check whether this call has been made successfully. I do not know whether to check if -

```auto

lastAssignmentSelected = e.target.options[e.target.selectedIndex].text;

```

is working. OR  
whether -

```auto

console.log("assignments:", lastAssignmentSelected)

```

is working.

Please guide me here.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 19, 2024, 1:21pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/29 "2024-08-19T13:21:11Z")

</div>

You’re using that to create a url that the `fetch` call is going to use.

Are you generating the correct url?

You can either use `console.log` in your JavaScript to check that value, or look at the request being issued on the server to see the url being requested.

---

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 19, 2024, 1:22pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/30 "2024-08-19T13:22:27Z")

</div>

> [@KenWhitesell](#):
>
> code that lets you select an element on your page

OK. YES. the code above allows me to select an element inside table1. On the Task Schedule web page

---

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 19, 2024, 1:29pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/31 "2024-08-19T13:29:01Z")

</div>

I think I have checked now and in my web browser’s javascript Console, no values can be seen. I am not 100% sure ?

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 19, 2024, 1:29pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/32 "2024-08-19T13:29:50Z")

</div>

Is the fetch issuing a request to the correct (desired) url?

---

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 19, 2024, 1:32pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/33 "2024-08-19T13:32:30Z")

</div>

> [@KenWhitesell](#):
>
> url

According to me it is, because that is the same as the url path in the urls.py file ??

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 19, 2024, 1:41pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/34 "2024-08-19T13:41:34Z")

</div>

Not necessarily - The url you are submitting is supposed to have a parameter on it, `lastAssignmentSelected`.

If you make a selection from the select list, is the correct parameter being created as part of that url? Is the value you are sending what the view is going to expect?

---

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 19, 2024, 1:45pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/35 "2024-08-19T13:45:50Z")

</div>

> [@KenWhitesell](#):
>
> If you make a selection from the select list, is the correct parameter being created as part of that url? Is the value you are sending what the view is going to expect?

Not at this point - if I make a selection in the table on the web page, basically nothing happens apart from that column switching to that selection. No parameter as part of the url. But yes I think the value that will be sent once the user has made the selection is expected as the view getfirstAssignmentSelected.

---

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 19, 2024, 1:49pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/36 "2024-08-19T13:49:45Z")

</div>

![Screen Shot 2024-08-19 at 3.48.08 PM](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/9/7/97d1aafd092a640f60b3f0d7dc98c21e4f0c5b52.png)

a screen grab of how it is setup

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 19, 2024, 1:52pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/37 "2024-08-19T13:52:49Z")

</div>

And it looks like you have the event handler connected to the `Year` element, correct?

So what happens if you change the `Year`? Does it trigger the event handler? Does the event handler cause the fetch to issue a request? And you’re saying that this request does not include the parameter?

---

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 19, 2024, 2:20pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/38 "2024-08-19T14:20:36Z")

</div>

> [@KenWhitesell](#):
>
> And it looks like you have the event handler connected to the `Year` element, correct?

yes. that would be the portion of code I initially sent. Below is the part with the actual field I’d like to trigger the event handler on…

```auto

<td class="Assignment"> {%csrf_token %}
<select onchange="onChange(e)" name="Assignments" id="assignments">
<option value="optionText1">screening_results_reports</option>
<option value="optionText2">ighid_12046</option>
<option value="optionText3">ighid_12022</option>
<option value="optiontext4">amc_099</option><option value="optionText5">sll_qHPV</option>
<option value="optionText6">colpo_LEEP</option>
<option value="optionText7">clinical_admin_stocktake</option>
<option value="optionText8"></option>
</select>

```

No. the event handler isn’t being triggered. I can’t see, but I don’t believe the event handler is causing the fetch to issue a request either.  
There is no additional parameter linked to the request, it would be simply the names of these tasks directly as is I think.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 19, 2024, 3:09pm UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/39 "2024-08-19T15:09:27Z")

</div>

Ok, first:

- Remove the `onchange` attribute from the `select` element. (See [HTML attribute reference - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#event_handler_attributes) for why I’m suggesting this.)

- Keep these two lines, but move them to the bottom of that script. Also suggest you change the name of your event handler from `onChange` to something else to prevent confusion with any built-in API. (I’m suggesting `selectChanged` below):

> [@consarnproject](#):
>
> ```auto
> selectAssignment = document.getElementById('assignments');
> selectAssignment.addEventListener('change', selectChanged);
> 
> ```

- Enclose that code within the DOMContentLoaded function to ensure the table is loaded before it’s activated.

```auto
document.addEventListener("DOMContentLoaded", (event) => {
   var selectAssignment = document.getElementById('assignments');
   selectAssignment.addEventListener('change', selectChanged);
});

```

This _replaces_ the two lines above.

Finally, in your `selectChanged` method:  
` lastAssignmentSelected = e.target.value;`

You want to avoid using arbitrary text in a URL because of the possibility of it containing characters not suitable for a URL. Use the value instead.

---

<div class="post-metadata">

**Author:** ![consarnproject](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/consarnproject/32/23001_2.png) [@consarnproject](https://forum.djangoproject.com/u/consarnproject)\
**Post date:** [August 20, 2024, 8:08am UTC](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856/40 "2024-08-20T08:08:30Z")

</div>

OK. This is great ! thank you so much for your direction. We are getting somewhere.  
There was a response returned to the table now, however it is an error, a MultiValueDict, and I am reading up on it - so far I can make out that there is an issue with the form not having a field attributed to it. Not 100% sure here though and not sure if this is related to the [key]. I am sharing a screen shot as well as the traceback related to the forms.py file because I am accessing the table cell by using {{ form.data }} - simply by trial and error. I think the form FormData might need some work.

Screen grab:

 ![Screen Shot 2024-08-20 at 9.51.11 AM](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/4/f/4f1cdb240f2b19c04d9e3c6063b5ad2391baf3a9.png)

Traceback error:

```auto
from schedule_app import views
File "/Users/andrewchibwesha/Visual Studio Projects/test_app/schedule_project/schedule_app/
views.py", line 7, in <module>
from schedule_app.forms import FormData File
"/Users/andrewchibwesha/Visual Studio Projects/test_app/schedule_project/schedule_app/
forms.py", line 86, in <module>
class FormData(forms.ModelForm):
File "/Users/andrewchibwesha/Visual Studio Projects/test_app/schedule_project/.venv/lib/python3.12/site packages/django/forms/models.py", line 299, in __new__
raise ImproperlyConfigured(
django.core.exceptions.ImproperlyConfigured: 
Creating a ModelForm without either the 'fields' attribute or the 'exclude' attribute is prohibited; form FormData needs updating.

```

Looking forward to this last part.

[Previous page](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856.md?page=1)

[Next page](https://forum.djangoproject.com/t/using-javascript-and-ajax-in-the-fetch-api-method-returns-no-values-as-a-response/33856.md?page=3)