We Keep Coding

how to hide and show image and text tags according to values returned from array loop

I am trying to create a questionnaire here. The questions and options are being fetched from a database via API. Some of the options to choose from will be images. I inserted the image link to my database. I am looking for a way to hide text and show image if the option is an image and also show text and hide image if the option is a text
What i have tried so far;
my image link looks like something like this: "../../folder/img.jpg" so i recognize an image link by the first two parts of the string.
I already tried iterating over the options with a for each loop like this:
imgOption: boolean = false;
textOption: boolean = false;
this.opts.forEach(element => {
if ( element.slice(0, 2) == ".." ) {
this.imgOption = true;
this.textOption = false;
} else {
this.imgOption = false;
this.textOption = true;
}
});
But then, the whole value comes out as text
display result
Here is my template file:
<ul *ngFor = "let o of opts; let i = index">
<li (click)='onSelect(o, i)' id="{{i}}">
<span *ngIf='textOption'>{{o}}</span>
<img *ngIf='imgOption' src="{{o}}" alt="img" class="imgOption">
</li>
</ul>
I want the loop to return true or false to only the index that matches the condition stated and not display everything as an image or text. Please how do I go about this. Thanks in advance.

You should use a method to check whether it is a img option or text option inside your for loop. For example,
<ul *ngFor = "let o of opts; let i = index">
<li (click)='onSelect(o, i)' id="{{i}}">
<span *ngIf="checkOption('text',o)">{{o}}</span>
<img *ngIf="checkOption('img',o)" src="{{o}}" alt="img" class="imgOption"/>
</li>
</ul>
Then you can use that method to return true or false.
checkOption(type,o) {
if(type="img"){
if ( o.slice(0, 2) == ".." ) {
return true;
}else { return false;}
} else {
if ( o.slice(0, 2) == ".." ) {
return false;
}else { return true;}
}
}

Try something like this. Your array needs to store the show/hide state for each value, rather than having one variable set for all.
opts = [{imageOption: true, value: '../mylink.jpg'}, {imageOption: false, value: 'another value'}];
this.opts.forEach(element => {
if ( element.slice(0, 2) == ".." ) {
element.imageOption = true;
} else {
element.imageOption = false;
}
});
HTML
<ul *ngFor = "let o of opts; let i = index">
<li (click)='onSelect(o, i)' id="{{i}}">
<span *ngIf='!o.imageOption'>{{o.value}}</span>
<img *ngIf='o.imageOption' src="{{o.value}}" alt="img" class="imgOption">
</li>
</ul>

You have to manage imgOption and textOption for every opts elements, in your case variable is element.
You can follow below code where "element.value" is equivalent to your previous variable "element" and fix html code accordingly.
this.opts.forEach(element => {
if ( element.value.slice(0, 2) == ".." ) {
element.imgOption = true;
element.textOption = false;
} else {
element.imgOption = false;
element.textOption = true;
}
});

I had the similar requirement in my old project easiest way to go about this is to add two new properties imgOption and textOption to your Options model in UI and for each option value returned update imgOption and textOption according to your condition
once you make this changes your code should look something like below
this.opts.forEach(element => {
if ( element.value.slice(0, 2) == ".." ) {
element.imgOption = true;
element.textOption = false;
} else {
element.imgOption = false;
element.textOption = true;
}
});
HTML should be
<ul *ngFor = "let o of opts; let i = index">
<li (click)='onSelect(o, i)' id="{{i}}">
<span *ngIf='o.textOption'>{{o}}</span>
<img *ngIf='o.imgOption' src="{{o}}" alt="img" class="imgOption">
</li>
</ul>

sessionStorage return null

Im trying to achieve this piece of code but in my console it says thing is null which is weird because when I look in the console, sessionStorage isn't empty...
$(".btn-alert").click(function(){
var identifierOfSpan = $(this > "span").text();
for(var prop in sessionStorage){
var thing = JSON.parse(sessionStorage.getItem(prop))
if(thing.id == identifierOfSpan){
sessionStorage.removeItem(prop);
}
}
$(this).closest(".voyages").remove();
if(sessionStorage.length == 0){
alert("Message!");
location.href="reservation.html"
}
});
the button is supposed to delete the div and the sessionStorage item which looks like this
Html :
<div class="voyages">
<button class="btn btn-alert btn-md mr-2" tabindex="-1">delete the flight</button>
<span>ID : 4224762</span>
<div class="infos">
<img src="img/angleterre.jpg" alt="maroc">
<div>
<ul>
<li><h5>Angleterre, Londres (LON)</h5></li>
<li><h5>2 adulte(s)</h5></li>
<li><h5> Aucun enfants </h5></li>
<li><h5>Type : Couple</h5></li>
</ul>
</div>
</div>
<hr>
<h3>Options</h3>
<ul>
<li>voiture : 0</li>
<li>Hotel : 0 </li>
</ul>
<hr>
<h3>Prix :3713$</h3>

If I'm reading your question correctly, you want to...
Click on a button
Find the first sibling <span> element and parse a number out of its text content
Remove all sessionStorage items (JSON serialized objects) with matching id properties
For the ID, I highly recommend adding some data directly to the <button> to help you identify the right record. If you can, try something like
<button class="btn btn-alert btn-md mr-2" data-voyage="4224762"...
Try something like this
$('.btn-alert').on('click', function() {
const btn = $(this)
const id = btn.data('voyage')
// or, if you cannot add the "data-voyage" attribute
const id = btn.next('span').text().match(/\d+$/)[0]
// for index-based removal, start at the end and work backwards
for (let i = sessionStorage.length -1; i >= 0; i--) {
let key = sessionStorage.key(i)
let thing = JSON.parse(sessionStorage.getItem(key))
if (thing.id == id) {
sessionStorage.removeItem(key)
}
}
// and the rest of your code
btn.closest(".voyages").remove();
if(sessionStorage.length === 0) {
alert("Message!");
location.href = 'reservation.html'
}
})
The problem with using a for..in loop on sessionStorage is that you not only get any item keys added but also
length
key
getItem
setItem
removeItem
clear

how to get exact text value inside a tag in jquery when entities are used

I have a list inside a anchor tag like this
<a href="#" class = "set_priority" data-value = "{{$candidate->id}}" style="text-decoration: none;">
#if($candidate->priority == "")
<li> Prioritize</li></a><br>
#elseif($candidate->priority == "yes")
<li> Deprioritize</li></a><br>
#endif
I have used entity &nbsp for styling purpose. The above code generate html tag according to the response from the server. So it might look either one of these
<li> Prioritize</li>
<li> Deprioritize</li>
I want to alert something when the list item is clicked. I don't know how to compare when &nbsp is used
$('.set_priority').on('click',function(){
var priority_value = $(this).first().text();
if (priority_value = "Prioritize") {
alert('he Prioritised');
}
else if (priority_value = "Deprioritize") {
alert('Prioritised');
}
});
It always alerts alert('he Prioritised'); whatever may be the condition.

You should use comparison operator instead assignment operator and use trim method to remove spaces.
$('.set_priority').on('click',function(){
var priority_value = $(this).first().text().trim();
if (priority_value == "Prioritize") {
alert('he Prioritised');
}
else if (priority_value == "Deprioritize") {
alert('Prioritised');
}
});

replace &nbsp with empty in temporary variable, then compare it. like:-
var priority_value = $(this).first().text();
var temp = priority_value.replace(/ /gi,'');
if (temp == "DePrioritize") {
alert('he Prioritised');
}
else if (temp == "Deprioritize") {
alert('Prioritised');
}

I think you should set the click handler like this
$('set_property li').on('click', function(){
var priority = $(this).first().text(); // This will give you the actual clicked element
// .... rest is same
});

How to get which link has been clicked in jquery

Good day...
I have multiple links as below:
<li>Save</li>
<li>Save As</li>
<li>Save And Exit</li>
I wanna know which link has been clicked
I tried something like this:
if ($("#mmSaveForm").click() == "true") {
//do something
}
else if ($("mmSaveAs").click() == "true") {
//Do something
}
else if ($("#mmSaveExit").click() == "true") {
//Do something
}
I tried these links, questions & answers but they are not helping:
How can I get the button that caused the submit from the form submit event?
jQuery: how to get which button was clicked upon form submission?
how to detect which button is clicked using jQuery
jQuery - how to determine which link was clicked
I've been trying this the whole night, please help...
Thank you in advanced...

Why don't you target the class instead, grab the id and then use a switch statement.
$('.itemDisabled').on('click', function () {
var id = this.id;
switch(id) {
case 'mmSaveForm':
// code
break;
case 'mmSaveAs':
// code
break;
case 'mmSaveExit':
// code
break;
}
});

Try to use .is(selector) to identify the element which has been clicked,
$('a.noTxtSelect1').click(function(e){
e.preventDefault();
if($(this).is("#mmSaveForm")){
} else if($(this).is("#mmSaveAs")) {
} else if($(this).is("#mmSaveExit")) {
}
});

If your links have id attributes all starting with 'mm' you could use:
$('a[id^=mm]').on('click', function(){
console.log(this.id);
});
Or on one or more classes:
$('a.itemDisabled').on('click', function(){
-or-
$('a.itemDisabled.noTxtSelect1').on('click', function(){
In the click event, you can use switch to determine the link clicked, which you can fetch using this or $(this)
e.g.:
Demo Fiddle
$('a[id^=mm]').on('click', function () {
switch (this.id) {
case "mmSaveForm":
alert(this.id);
break;
case "mmSaveAs":
alert(this.id);
break;
case "mmSaveExit":
alert(this.id);
break;
}
});

You can use the [attr^="value"] ["starts with"] selector:
$('[id^="mmSave"]').click(function(event){
event.preventDefault();
var action = this.id;
// do your business
});

You're thinking about this the wrong way. In your
$(document).ready(function() {})
you register for click events. So something like
$(document).ready(function() {
$("#mmSaveForm").click(function() {
// handle the click
});
});

may be you can try this
$(function(){
$('.linkclass').click(function(){
var link_text = $(this).text();
alert('the clicked link text is '+ link_text);
});
});

Use common class like a itemDisabled for click event and get id ,
$(".itemDisabled").click(function (e) {
e.preventDefault();
var id = this.id;
if (id === "mmSaveForm") {
} else if (id === "mmSaveExit") {
} else {}
});

No need jquery please look this code
<!DOCTYPE html >
<html >
<head>
<script>
function clickbtn(t)
{
alert(t.id);
/*if(t.id==...)
{
dosomething();
}
else
{
dootherthing();
}
*/
}
</script>
</head>
<ul>
<li>Save</li>
<li>Save As</li>
<li>Save And Exit</li>
</ul>
<body>
</body>
</html>
It work ok .
Hope this help!

This is my html page (Django template):
<div class="col">
{% for blog in blogs %}
<div class="post">
<h3>{{ blog.title }}</h3>
<div class="date">
<p>Created: {{blog.date_created|date:'d M Y'}}</p>
</div>
<p>{{ blog.brief|safe }}</p>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="{% url 'blog:edit' pk=blog.pk %}">Edit</a>
</li>
<li class="nav-item">
<a class="nav-link" id="publish" href="{{blog.pk}}">Publish</a>
</li>
<li class="nav-item">
<a class="btn btn-danger" id="remove" href="{{blog.pk}}">Remove</a>
</li>
</ul>
<br>
</div>
{% endfor %}
</div>
In my javascript file, this is what have and it works.
$(document).ready(function() {
console.log("document is ready!!!")
$('#id_bloglist').on("click", 'a#publish,a#remove', function(e) {
e.preventDefault()
var pk = $(this).attr("href")
if ($(this)[0].id == 'remove'){
console.log("remove link clicked, calling deleteBlog with pk = " + pk)
}
else if ($(this)[0].id == 'publish'){
console.log("publish link clicked, calling publishBlog with pk = " + pk)
}
return false;
});
});

Comparing a variable defined from angularJS controller in HTML page

I'm pretty new to AngularJS so hopefully this is easy, I have the following HTML where I am trying to check if a current page is equal to zero and if so, I changed the class name of the tag to disabled. (currentPage is defined to be zero in my controller)
<script>
if ('{{currentPage}}' == 0) {
document.getElementById("prev").className = "disabled";
}
if ('{{currentPage}}' >= '{{eventslist}}'.length / '{{pageSize}}' - 1) {
document.getElementById("next").className = "disabled";
}
</script>
However, whenever I try to do a check like this, it never sees currentPage as zero. So then I added an else statement just to see what currentPage actually is.
<script>
if ('{{currentPage}}' == 0) {
document.getElementById("prev").className = "disabled";
} else {
document.getElementById("prev").innerHTML = "{{currentPage}}";
}
if ('{{currentPage}}' >= '{{eventslist}}'.length / '{{pageSize}}' - 1) {
document.getElementById("next").className = "disabled";
}
</script>
After doing this, sure enough, it does come back as zero. Any ideas why the if statement fails on something so simple? Thanks in advanced!

<div id="prev" ng-class="{'disabled': currentPage === 0}">
<span ng-if="currentPage !== 0">{{currentPage}}</span>
</div>
<div id="next" ng-class="{'disabled': currentPage >= eventsList.length / pageSize - 1}"></div>