We Keep Coding

Updating the URLField of model with JavaScript

I have a page that displays some information about website admins such as username, skills, Instagram profile and bio. The admins are able to edit their profile information and the update is being saved using JavaScript fetch. When I click on the save button everything except the Instagram profile which is a URLField gets updated. For Instagram element to be updated I need to reload the page. How can I make it get updated without reloading the page? Everything is correct in the console log.
about.js:
document.addEventListener("DOMContentLoaded", function(){
const button = document.querySelectorAll("#edit_profile")
button.forEach(function(button){
button.onclick = function(){
const username = document.getElementById(`username_${memberID}`);
const skills = document.getElementById(`skills_${memberID}`);
const bio = document.getElementById(`bio_${memberID}`);
var instagram = document.getElementById(`instagram_${memberID}`).href;
let edit_username = document.createElement("textarea");
edit_username.setAttribute("rows", "1");
edit_username.innerHTML = username.innerHTML
edit_username.id = `edit_username_${memberID}`;
edit_username.className = `form-control username ${usernameID}`;
let edit_skills = document.createElement("textarea");
...
let edit_instagram = document.createElement("textarea");
edit_instagram.setAttribute("rows","1");
edit_instagram.innerHTML = instagram;
edit_instagram.id = `edit_instagram_${memberID}`;
edit_instagram.className = "form-control social-media";
const saveButton = document.createElement("button");
saveButton.innerHTML = "Save";
saveButton.id = `saveButton_${memberID}`;
saveButton.className = "btn btn-success col-3";
saveButton.style.margin = "10px";
document.getElementById(`edit_${memberID}`).append(edit_username);
...
document.getElementById(`edit_${memberID}`).append(edit_instagram);
document.getElementById(`edit_${memberID}`).append(saveButton);
// When the save button is clicked
saveButton.addEventListener("click", function(){
edit_username = document.getElementById(`edit_username_${memberID}`);
...
edit_instagram = document.getElementById(`edit_instagram_${memberID}`);
fetch(`/edit_profile/${memberID}`,{
method: "POST",
body: JSON.stringify({
username: edit_username.value,
skills: edit_skills.value,
instagram: edit_instagram.value,
bio: edit_bio.value,
})
})
.then(response => response.json())
.then(result => {
console.log(result);
if(result[`error`]){
cancel(memberID)
}
else {
username.innerHTML = result.username;
secusername.innerHTML = result.username;
skills.innerHTML = result.skills;
instagram = result.instagram;
bio.innerHTML = result.bio;
}
})
})
}
});
})
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)

You're assigning the instagram variable to the href attribute of the edit_instagram element, rather than its value. Since the fetch request is sending the value of the edit_instagram element, the Instagram URL will not be updated in the backend if the instagram variable is assigned to the href attribute.
So you can change the line of code where you assign the instagram variable to the following:
var instagram = document.getElementById(`instagram_${memberID}`).value;
Also, you need to update the 'instagram' element value after successful fetch call:
instagram.href = result.instagram;
This should update the Instagram URL field in the backend without requiring a page reload.

Assigned the instagram variable to the element itself instead of its href:
var instagram = document.getElementById(`instagram_${memberID}`)
Then, updated the href after the fetch call as Nova suggested:
instagram.href = result.instagram;

How to make same buttons work independently HTML/jQuery

I'm making favorite buttons that saves them with localStorage in a different page. I added those favorite buttons to every paragraph. I don't want to write a lots of same codes for each of them. The question is that, is there any way to make same buttons work independently and save their parent objects to another page. So far I've made just one favorite button to one paragraph and I've managed to save it to a different page. Here's my code:
<form action="pages/login_screen.html">
<p>A<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span></p>
<p>B<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p>
<p>C<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p>
<p>D<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p>
<p>E<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p>
<script>
$(window).on('load',function(){
if(localStorage.toggled != "with_toggle"){
$(".heart").html('<i class="fa fa-heart" aria-hidden="true"></i>');
}else{
$(".heart").html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
}
});
$('.heart').toggleClass(localStorage.toggled);
$('.heart').on('click',function(){
if (localStorage.toggled != "with_toggle") {
$(".heart").html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
$('.heart').toggleClass("with_toggle", true);
localStorage.toggled = "with_toggle";
localStorage.removeItem("paragraphValue");
} else {
$(".heart").html('<i class="fa fa-heart" aria-hidden="true"></i>');
$('.heart').toggleClass("with_toggle", false);
localStorage.toggled = "";
var paragraph = document.querySelector(".heart").parentNode.innerHTML;
localStorage.setItem("paragraphValue", paragraph);
return false;
}
});
</script>
<form action="pages/login_screen.html">
Here's the second page:
<div id="favorites"><!--FAVORITES HERE--></div>
<script>
document.getElementById("favorites").innerHTML = localStorage.getItem("paragraphValue");
</script>

You need to save the likes in an array and save the array
NOTE I remove the span and added the class to the <i>
https://jsfiddle.net/mplungjan/c8zf07rh/
$(function() {
const swapToggle = ($heart, toggle) => {
$heart.toggleClass("fa-heart-o", toggle);
$heart.toggleClass("fa-heart", !toggle);
};
const $hearts = $(".heart");
const toggleString = localStorage.getItem("toggles");
console.log(toggleString)
const toggles = toggleString ? JSON.parse(toggleString) : $hearts.map(function() {
return $(this).hasClass('fa-heart')
}).get(); // get all hearts on page
$hearts.each(function(i, elem) { // initialise from localStorage
swapToggle($(this), toggles[i])
$(this).data("idx", i); // save position in array
})
$('.heart').on('click', function() {
const idx = +$(this).data("idx"); // position in array
toggles[idx] = !toggles[idx]; // actual toggling
swapToggle($(this), toggles[idx])
localStorage.setItem("toggles", JSON.stringify(toggles))
})
});

Laravel not getting redirected properly

In Laravel I have a web Route
Route::get('/signout', 'GlobalController#getLogout');
I use a logout option in my page as
<li>
<a href="{{ url('signout') }}">
<i class="icon-key font-red-thunderbird"></i> Log Out
</a>
</li>
The same way I have a ajax Change password success js script as
function parseError(response)
{
var res = 0;
$.each(response, function(i, item){
$('#'+i+'_message').html(item);
if(item!=1)
$('#'+i+'_message').css('display', (item!=1)?'block':'none');
else
res += parseInt(item);
});
if(res != 0 )
{
bootbox.alert("Password changed successfully..!");
window.location='/signout';
}
}
But the window.location='/signout'; is not touching the function getLogout() but the screen is changing to the login screen.
I have written a set of functions in getLogout which is not executing. What could be the problem.

You should try this:
<script>
// your "Imaginary javascript"
window.location.href = '{{url("yoururl")}}';
</script>
OR
<script>
window.location.href = '{{route("myRoute")}}';
</script>

Angular4- Displaying item in JSON that isn't always present in

Still building off of this question, to pull in media data from the tweet JSON that I've made a call to. At first, I thought it would be as simple as iterating through the JSON, but the entities.media.media_url are not always present, and will return undefined errors for the tweets that don't contain them. I tried creating a method that would pull the data if it exists, but I'm not able to get it to iterate.
tweets.component.html
<div class="tweet-container">
<div *ngFor="let item of tweetsdata" class="tweets-card">
<div class="tweet-text">
<p class="tweet-date">{{item.created_at | slice:0:10}}</p>
<p>{{item.text}}</p>
<!-- <img src={{getImage()}}> -->
<!-- <p>hello: {{item.entities?.media[0].media_url}}</p> -->
<p>{{getImage()}}</p>
<div class="interact-tweet">
<i class="fa fa-reply" aria-hidden="true"></i>
<i class="fa fa-retweet" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
tweets.component.ts
...
searchcall() {
const headers = new Headers();
// const searchterm = 'query=' + this.searchquery;
const searchterm = 'query=from%3Adailymuse%20%23' + this.searchquery;
headers.append('Content-Type', 'application/X-www-form-urlencoded');
this.http.post('https://localhost:3000/search', searchterm, {headers: headers}).subscribe((res) => {
this.tweetsdata = [
res.json().data.statuses[0],
res.json().data.statuses[1],
res.json().data.statuses[2],
res.json().data.statuses[3],
res.json().data.statuses[4]
];
console.log(this.tweetsdata);
this.screen_name = this.tweetsdata[0].user.screen_name;
this.user = this.tweetsdata[0].user.name;
this.profile_img_url = this.tweetsdata[0].user.profile_image_url_https;
this.user_id = this.tweetsdata[0].user.id_str;
});
}
getImage() {
if (this.tweetsdata.entities) // will keep returning undefined because it's not pointing to a specific tweet in the array, tweetsdata
{
const imgURL = this.tweetsdata.entities.media[0].media_url;
console.log(imgURL);
return imgURL;
} else {
console.log('nope');
}
}
I think *ngIf would make the most sense to use, but I'm unsure how to set up the statement to check if the key exists first, then present the link. This is what I've tried:
<p *ngIf="item.entities">{{item.entities.media[0].media_url}}</p>
Which technically works if there is an attached image present, but it breaks the code for the following tweets that don't contain an image. Am I setting up the if statement correctly?

I would like to show an error message after a user clicks on a save button if the URL they entered was invalid. Using Angular JS

I would like to show an error message AFTER a user clicks on a save button. The field that they need to complete is a URL link and it must be a valid url.. I have a working regex in place, I just have no clue how this is supposed to be done as I am very new to angular.
Here is what I have so far:
<div class="form-group">
<button type="button" class="btn btn-primary btn-block btn-lg"
ng-click="save()">
<spring:message code="journalist.social.submit.label"/>
<span class="glyphicon glyphicon-chevron-right"</span>
</button>
<span style="color: #d2232a;padding-left: 0px" class="btn"
ng-show="!canSave()">
<spring:message code="journalist.info.error.fill.all"/>
</span>
And in my scripts (The save button only works if the canSave function is true):
$scope.save = function () {
var res = [];
var files = [];
var ind = 0;
if ($scope.canSave()){ //save button should only work if the URL is valid
$scope.linkList.forEach(function (clip) {
if (!clip.link) {
return;
}
if (!CommonUtils.startsWithHttp(clip.link)) {
clip.link = CommonUtils.EMPTY_LINK + clip.link;
}
if (clip.imgData && clip.imgData.input) {
files.push({id: ind, file: clip.imgData.input, cropData: clip.imgData.cropData})
clip.logos = undefined;
}
ind = ind + 1;
res.push({
id: clip.id,
title: clip.title,
description: clip.description,
name: clip.name,
link: clip.link,
ordering: ind,
logoUrl: clip.logos ? clip.logos[clip.logoInd] : null
})
});
Journalist.updateClips(
files,
res,
$scope,
function (e) {
$scope.warningOnLocationChange = false;
Navigation.open($scope, ["journalist", "profile", "profile"]);
}
);
};
$scope.showUpload = function (clip) {
if(clip.link) {
clip.showUpload = true;
}
};
}}]
);
If you think the condition I have in my script for the save() function is not right then by all means tell me otherwise. How can I show an alert after the button is clicked? The alert shows before a URL is even entered (or as they are typing and will go away once the url is correct.) Thanks!