Обновление поля URLField модели с помощью JavaScript

У меня есть страница, на которой отображается некоторая информация об администраторах сайта, такая как имя пользователя, навыки, профиль Instagram и биография. Администраторы могут редактировать информацию о своем профиле, и обновление сохраняется с помощью JavaScript fetch. Когда я нажимаю на кнопку сохранения, обновляется все, кроме профиля Instagram, который является полем URLField. Чтобы элемент Instagram был обновлен, мне нужно перезагрузить страницу. Как сделать так, чтобы он обновлялся без перезагрузки страницы? В консольном журнале все правильно.

about.js:

about.html:

{% for member in team_members %}
      <div class="col" id="border">
<!--If user is admin, show edit button-->
        {% if user.is_superuser %}
        <div class="position-relative" id="edit_button_{{member.id}}" style="display: block;">
          <button class="btn btn-lg position-absolute top-0 end-0" id="edit_profile" data-id="{{member.id}}" data-username="{{member.username}}">
          <i class="fa fa-edit fa-solid" style="color: white; margin-right: 5px;"></i></button>
        </div>
        {% endif %}
        
        <!--Edit form-->
            <div class="form-group" id="edit_{{member.id}}">
            </div>
     
          <!--Display username,skills,socials and bio-->
            <div id="remove_{{member.id}}" style="display: block;">
              <h3 class="username" id="username_{{member.id}}">{{member.username}}</h3>
              <p class ="skills" id="skills_{{member.id}}">{{member.skills}}</p>
              <p><a class="social-media" href="{{member.instagram}}" id="instagram_{{member.id}}"><i class="fa-brands fa-instagram fa-solid" style="color: #e3c142; margin-right: 5px;"></i></a>
              <a class="social-media" href="{{member.itch_profile}}" id="itch_{{member.id}}"><i class="fa-brands fa-itch-io" style="color: #e3c142;"></i></a>
              <div class="bio">
                  <strong class="username" id="secusername_{{member.id}}"  style="font-size: large;">{{member.username}}, </strong><p id="bio_{{member.id}}">{{member.bio}}</p>
              </div>
            </div>
        </div>
      </div>
      {% endfor %}

views.py:

@csrf_exempt
def edit_profile(request, member_id):
    if request.method != "POST":
        return JsonResponse({"error": "POST request required."}, status=400)
    team_members = Team.objects.get(id = member_id)

    body_unicode = request.body.decode('utf-8')
    body = json.loads(body_unicode)
    username = body['username']
    skills = body['skills']
    instagram = body['instagram']
    itch_profile = body['itch_profile']
    bio = body['bio']
    Team.objects.filter(id=member_id).update(username=f'{username}',skills=f'{skills}',instagram=f'{instagram}',itch_profile=f'{itch_profile}',bio=f'{bio}')
    return JsonResponse({"message": "Successful", "username": username, "skills": skills, "instagram":instagram, "itch_profile":itch_profile, "bio": bio}, status=200)

Вы присваиваете переменную instagram атрибуту href элемента edit_instagram, а не его значению. Поскольку запрос на выборку отправляет значение элемента edit_instagram, URL Instagram не будет обновлен в бэкенде, если переменная instagram присвоена атрибуту href.

Так что вы можете изменить строку кода, где вы присваиваете переменную instagram, на следующую:

var instagram = document.getElementById(`instagram_${memberID}`).value;

Также необходимо обновить значение элемента 'instagram' после успешного вызова выборки:

instagram.href = result.instagram;

Это должно обновить поле URL Instagram в бэкенде, не требуя перезагрузки страницы.

Присвоение переменной instagram самому элементу вместо его href:

var instagram = document.getElementById(`instagram_${memberID}`)

Затем, обновил href после вызова fetch, как советовала Nova:

instagram.href = result.instagram;
Вернуться на верх