Django: User Profile Update Form Only Showing One User’s Data

I’m building an e-commerce website using Django, and I’m having trouble with updating user profiles. I want to display a list of users and provide a way to view and update each user’s profile. However, I’m currently only able to see and update the profile of the logged-in user.

Here is my current implementation:

views.py:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>def user_list(request):
users = CustomUser.objects.all()
return render(request, 'useradmin/user_list.html', {'users': users})
@login_required
def user_profile_update(request):
try:
profile = Profile.objects.get(user_name=request.user)
except Profile.DoesNotExist:
return render(request, 'useradmin/error.html', {'message': 'Profile does not exist.'})
if request.method == "POST":
image = request.FILES.get("image")
full_name = request.POST.get("full_name")
phone = request.POST.get("phone")
Address = request.POST.get("Address")
diamond_user = request.POST.get("diamond_user")
golden_user = request.POST.get("golden_user")
if image:
profile.image = image
profile.full_name = full_name
profile.phone = phone
profile.Address = Address
profile.diamond_user = diamond_user == 'on' # Checkbox values need special handling
profile.golden_user = golden_user == 'on'
profile.save()
messages.success(request, "Profile updated successfully")
return redirect("useradmin:user_profile_update")
context = {
"profile": profile
}
return render(request, 'useradmin/userprofile.html', context)
</code>
<code>def user_list(request): users = CustomUser.objects.all() return render(request, 'useradmin/user_list.html', {'users': users}) @login_required def user_profile_update(request): try: profile = Profile.objects.get(user_name=request.user) except Profile.DoesNotExist: return render(request, 'useradmin/error.html', {'message': 'Profile does not exist.'}) if request.method == "POST": image = request.FILES.get("image") full_name = request.POST.get("full_name") phone = request.POST.get("phone") Address = request.POST.get("Address") diamond_user = request.POST.get("diamond_user") golden_user = request.POST.get("golden_user") if image: profile.image = image profile.full_name = full_name profile.phone = phone profile.Address = Address profile.diamond_user = diamond_user == 'on' # Checkbox values need special handling profile.golden_user = golden_user == 'on' profile.save() messages.success(request, "Profile updated successfully") return redirect("useradmin:user_profile_update") context = { "profile": profile } return render(request, 'useradmin/userprofile.html', context) </code>
def user_list(request):
    users = CustomUser.objects.all()
    return render(request, 'useradmin/user_list.html', {'users': users})



@login_required
def user_profile_update(request):
    try:
        profile = Profile.objects.get(user_name=request.user)
    except Profile.DoesNotExist:
        return render(request, 'useradmin/error.html', {'message': 'Profile does not exist.'})

    if request.method == "POST":
        image = request.FILES.get("image")
        full_name = request.POST.get("full_name")
        phone = request.POST.get("phone")
        Address = request.POST.get("Address")
        diamond_user = request.POST.get("diamond_user")
        golden_user = request.POST.get("golden_user")

        if image:
            profile.image = image

        profile.full_name = full_name
        profile.phone = phone
        profile.Address = Address
        profile.diamond_user = diamond_user == 'on'  # Checkbox values need special handling
        profile.golden_user = golden_user == 'on'

        profile.save()
        messages.success(request, "Profile updated successfully")
        return redirect("useradmin:user_profile_update")

    context = {
        "profile": profile
    }
    return render(request, 'useradmin/userprofile.html', context)

urls.py:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>path('user_profile_update/', views.user_profile_update, name='user_profile_update'),
path('user_list/', views.user_list, name='user_list'),
</code>
<code>path('user_profile_update/', views.user_profile_update, name='user_profile_update'), path('user_list/', views.user_list, name='user_list'), </code>
path('user_profile_update/', views.user_profile_update, name='user_profile_update'),
path('user_list/', views.user_list, name='user_list'),

user_list.html:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>{% extends 'useradmin/base.html' %}
{% block content %}
<h1>User List</h1>
<ul>
{% for user in users %}
<li>
{{ user.email }} ({{ user.first_name }} {{ user.last_name }})
<a href="{% url 'useradmin:user_profile_update' %}">View/Update</a>
</li>
{% empty %}
<li>No users found.</li>
{% endfor %}
</ul>
{% endblock %}
</code>
<code>{% extends 'useradmin/base.html' %} {% block content %} <h1>User List</h1> <ul> {% for user in users %} <li> {{ user.email }} ({{ user.first_name }} {{ user.last_name }}) <a href="{% url 'useradmin:user_profile_update' %}">View/Update</a> </li> {% empty %} <li>No users found.</li> {% endfor %} </ul> {% endblock %} </code>
{% extends 'useradmin/base.html' %}

{% block content %}
  <h1>User List</h1>
  <ul>
    {% for user in users %}
      <li>
        {{ user.email }} ({{ user.first_name }} {{ user.last_name }})
        <a href="{% url 'useradmin:user_profile_update' %}">View/Update</a>
      </li>
    {% empty %}
      <li>No users found.</li>
    {% endfor %}
  </ul>
{% endblock %}

userprofile.html:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Update Profile</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Optional custom styles */
.preview-image {
max-width: 150px;
height: auto;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="card shadow-sm">
<div class="card-header bg-primary text-white">
<h2 class="mb-0">Update Profile</h2>
</div>
<div class="card-body">
<form method="POST" enctype="multipart/form-data" id="profileForm">
{% csrf_token %}
<div class="mb-3">
<label for="full_name" class="form-label">Full Name</label>
<input type="text" class="form-control" id="full_name" name="full_name" value="{{ profile.full_name }}" required>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number</label>
<input type="text" class="form-control" id="phone" name="phone" value="{{ profile.phone }}">
</div>
<div class="mb-3">
<label for="Address" class="form-label">Address</label>
<input type="text" class="form-control" id="Address" name="Address" value="{{ profile.Address }}">
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="diamond_user" name="diamond_user" {% if profile.diamond_user %}checked{% endif %}>
<label class="form-check-label" for="diamond_user">Diamond User</label>
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="golden_user" name="golden_user" {% if profile.golden_user %}checked{% endif %}>
<label class="form-check-label" for="golden_user">Golden User</label>
</div>
<div class="mb-3">
<label for="profile_picture" class="form-label">Profile Picture</label>
<input type="file" class="form-control" id="profile_picture" name="image" onchange="previewImage(event)">
<img id="preview" class="img-thumbnail mt-3 preview-image" src="{% if profile.image %}{{ profile.image.url }}{% endif %}" {% if not profile.image %}style="display: none;"{% endif %} width="150">
</div>
<button type="submit" class="btn btn-primary w-100">Update</button>
</form>
</div>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// JavaScript function to preview uploaded image
function previewImage(event) {
var preview = document.getElementById('preview');
var file = event.target.files[0];
var reader = new FileReader();
reader.onloadend = function() {
preview.src = reader.result;
preview.style.display = 'block'; // Show the preview image
}
if (file) {
reader.readAsDataURL(file); // Read the image file as a data URL
} else {
preview.src = "";
preview.style.display = 'none'; // Hide the preview image if no file selected
}
}
</script>
</body>
</html>
</code>
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Update Profile</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> /* Optional custom styles */ .preview-image { max-width: 150px; height: auto; } </style> </head> <body> <div class="container mt-5"> <div class="card shadow-sm"> <div class="card-header bg-primary text-white"> <h2 class="mb-0">Update Profile</h2> </div> <div class="card-body"> <form method="POST" enctype="multipart/form-data" id="profileForm"> {% csrf_token %} <div class="mb-3"> <label for="full_name" class="form-label">Full Name</label> <input type="text" class="form-control" id="full_name" name="full_name" value="{{ profile.full_name }}" required> </div> <div class="mb-3"> <label for="phone" class="form-label">Phone Number</label> <input type="text" class="form-control" id="phone" name="phone" value="{{ profile.phone }}"> </div> <div class="mb-3"> <label for="Address" class="form-label">Address</label> <input type="text" class="form-control" id="Address" name="Address" value="{{ profile.Address }}"> </div> <div class="form-check mb-3"> <input type="checkbox" class="form-check-input" id="diamond_user" name="diamond_user" {% if profile.diamond_user %}checked{% endif %}> <label class="form-check-label" for="diamond_user">Diamond User</label> </div> <div class="form-check mb-3"> <input type="checkbox" class="form-check-input" id="golden_user" name="golden_user" {% if profile.golden_user %}checked{% endif %}> <label class="form-check-label" for="golden_user">Golden User</label> </div> <div class="mb-3"> <label for="profile_picture" class="form-label">Profile Picture</label> <input type="file" class="form-control" id="profile_picture" name="image" onchange="previewImage(event)"> <img id="preview" class="img-thumbnail mt-3 preview-image" src="{% if profile.image %}{{ profile.image.url }}{% endif %}" {% if not profile.image %}style="display: none;"{% endif %} width="150"> </div> <button type="submit" class="btn btn-primary w-100">Update</button> </form> </div> </div> </div> <!-- Bootstrap JS and dependencies --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script> // JavaScript function to preview uploaded image function previewImage(event) { var preview = document.getElementById('preview'); var file = event.target.files[0]; var reader = new FileReader(); reader.onloadend = function() { preview.src = reader.result; preview.style.display = 'block'; // Show the preview image } if (file) { reader.readAsDataURL(file); // Read the image file as a data URL } else { preview.src = ""; preview.style.display = 'none'; // Hide the preview image if no file selected } } </script> </body> </html> </code>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Update Profile</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* Optional custom styles */
    .preview-image {
      max-width: 150px;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <div class="card shadow-sm">
      <div class="card-header bg-primary text-white">
        <h2 class="mb-0">Update Profile</h2>
      </div>
      <div class="card-body">
        <form method="POST" enctype="multipart/form-data" id="profileForm">
          {% csrf_token %}
          <div class="mb-3">
            <label for="full_name" class="form-label">Full Name</label>
            <input type="text" class="form-control" id="full_name" name="full_name" value="{{ profile.full_name }}" required>
          </div>
          <div class="mb-3">
            <label for="phone" class="form-label">Phone Number</label>
            <input type="text" class="form-control" id="phone" name="phone" value="{{ profile.phone }}">
          </div>
          <div class="mb-3">
            <label for="Address" class="form-label">Address</label>
            <input type="text" class="form-control" id="Address" name="Address" value="{{ profile.Address }}">
          </div>
          <div class="form-check mb-3">
            <input type="checkbox" class="form-check-input" id="diamond_user" name="diamond_user" {% if profile.diamond_user %}checked{% endif %}>
            <label class="form-check-label" for="diamond_user">Diamond User</label>
          </div>
          <div class="form-check mb-3">
            <input type="checkbox" class="form-check-input" id="golden_user" name="golden_user" {% if profile.golden_user %}checked{% endif %}>
            <label class="form-check-label" for="golden_user">Golden User</label>
          </div>
          <div class="mb-3">
            <label for="profile_picture" class="form-label">Profile Picture</label>
            <input type="file" class="form-control" id="profile_picture" name="image" onchange="previewImage(event)">
            <img id="preview" class="img-thumbnail mt-3 preview-image" src="{% if profile.image %}{{ profile.image.url }}{% endif %}" {% if not profile.image %}style="display: none;"{% endif %} width="150">
          </div>
          <button type="submit" class="btn btn-primary w-100">Update</button>
        </form>
      </div>
    </div>
  </div>
  <!-- Bootstrap JS and dependencies -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // JavaScript function to preview uploaded image
    function previewImage(event) {
      var preview = document.getElementById('preview');
      var file = event.target.files[0];
      var reader = new FileReader();

      reader.onloadend = function() {
        preview.src = reader.result;
        preview.style.display = 'block'; // Show the preview image
      }

      if (file) {
        reader.readAsDataURL(file); // Read the image file as a data URL
      } else {
        preview.src = "";
        preview.style.display = 'none'; // Hide the preview image if no file selected
      }
    }
  </script>
</body>
</html>

When I navigate to the user_profile_update URL, I can only see and update the profile of the logged-in user. I want to display a list of users and allow updating their profiles individually.

What I’ve Tried:
1.Updated the user_profile_update view to accept user_id.
2.Modified the URL patterns to pass user_id.
3.Updated the user list template with links to the profile update page for each user.

Expected Outcome:
When I click “View” on the user list page, I should be directed to the update form for that specific user.

Actual Outcome:
Only the logged-in user’s profile form is displayed for updates.

Additional Information:
Django version: 3.x
Python version: 3.x
Any other relevant configurations or settings

What am I missing or doing wrong? Any help would be appreciated!

  • python
  • html
  • django
  • django-views
  • django-urls

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa Dịch vụ tổ chức sự kiện 5 sao Thông tin về chúng tôi Dịch vụ sinh nhật bé trai Dịch vụ sinh nhật bé gái Sự kiện trọn gói Các tiết mục giải trí Dịch vụ bổ trợ Tiệc cưới sang trọng Dịch vụ khai trương Tư vấn tổ chức sự kiện Hình ảnh sự kiện Cập nhật tin tức Liên hệ ngay Thuê chú hề chuyên nghiệp Tiệc tất niên cho công ty Trang trí tiệc cuối năm Tiệc tất niên độc đáo Sinh nhật bé Hải Đăng Sinh nhật đáng yêu bé Khánh Vân Sinh nhật sang trọng Bích Ngân Tiệc sinh nhật bé Thanh Trang Dịch vụ ông già Noel Xiếc thú vui nhộn Biểu diễn xiếc quay đĩa Dịch vụ tổ chức tiệc uy tín Khám phá dịch vụ của chúng tôi Tiệc sinh nhật cho bé trai Trang trí tiệc cho bé gái Gói sự kiện chuyên nghiệp Chương trình giải trí hấp dẫn Dịch vụ hỗ trợ sự kiện Trang trí tiệc cưới đẹp Khởi đầu thành công với khai trương Chuyên gia tư vấn sự kiện Xem ảnh các sự kiện đẹp Tin mới về sự kiện Kết nối với đội ngũ chuyên gia Chú hề vui nhộn cho tiệc sinh nhật Ý tưởng tiệc cuối năm Tất niên độc đáo Trang trí tiệc hiện đại Tổ chức sinh nhật cho Hải Đăng Sinh nhật độc quyền Khánh Vân Phong cách tiệc Bích Ngân Trang trí tiệc bé Thanh Trang Thuê dịch vụ ông già Noel chuyên nghiệp Xem xiếc khỉ đặc sắc Xiếc quay đĩa thú vị

Filed under: Kiến thức lập trình - @ 12:16

Thẻ:

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa
Thiết kế website Thiết kế website Thiết kế website Cách kháng tài khoản quảng cáo Mua bán Fanpage Facebook Dịch vụ SEO Tổ chức sinh nhật