We Keep Coding

setAttribute also also setting the value for the following element

I'm pretty sure this one is silly but I can't seem to figure it out myself.
This is a Django website containing a little bit of Javascript.
In my HTML, I have a button that should send a few values to a Javascript function. The javascript function should then find and update some divs in the HTML.
The strange thing is that the value assigned to the setAttribute statement is automatically also used for the following innerHTML statement (overruling whatever was configured there).
HTML Button:
<button class="btn btn-outline-dark" onclick="monthStats(
{{simple_total_monthly_sent_volume}},
{{average_monthly_delivery_rate}},
{{average_monthly_unique_open_rate}},
{{total_monthly_unique_open_volume}},
{{average_monthly_unique_click_rate}},
{{average_monthly_rejection_rate}},
)">Month</button>
Javascript:
function monthStats (sentvolume,
deliveryrate,
uniqueopenrate,
uniqueopenvolume,
uniqueclickrate,
rejectionrate
) {
document.getElementById("sent").innerHTML = (sentvolume).toLocaleString("en-US");
document.getElementById("delivered").innerHTML = deliveryrate+"%";
document.getElementById("uniqueopened").innerHTML = uniqueopenrate+"%";
document.getElementById("uniqueopened").setAttribute("title", uniqueopenvolume.toString());
document.getElementById("uniqueclicked").innerHTML = uniqueclickrate+"%";
document.getElementById("rejected").innerHTML = rejectionrate+"%";
}
HTML divs that should get updated:
<div class="container">
<div class="row">
<div class="col">
<div id="sent" class="keymetric">{{simple_total_monthly_sent_volume|intcomma}}</div><div class="text-muted keymetricexplanation">sent volume</div>
</div>
<div class="col">
<div id="delivered" class="keymetric">{{average_monthly_delivery_rate}}%</div><div class="text-muted keymetricexplanation">delivery rate</div>
</div>
<div class="col">
<div id="uniqueopened" class="keymetric" data-bs-toggle="tooltip" data-bs-placement="top" title="{{total_monthly_unique_open_volume|intcomma}}">{{average_monthly_unique_open_rate}}%</div><div class="text-muted keymetricexplanation">unique open rate</div>
</div>
<div class="col">
<div id="uniqueclicked" class="keymetric">{{average_monthly_unique_click_rate}}%</div><div class="text-muted keymetricexplanation">unique click rate</div>
</div>
<div class="col">
<div id="rejected" class="keymetric">{{average_monthly_rejection_rate}}%</div><div class="text-muted keymetricexplanation">rejection rate</div>
</div>
</div>
</div>
Clicking on the Month button in the HTML results in the title and textvalue of the div with ID "uniqueopened" to be updated correctly by the Javascript. However, the setAttribute statement in the javascript is seemingly also updating the value of the following div with ID "uniqueclicked", overruling the Javascript statement targeting that div.

I'm still not sure what caused the original problem. But could solve my issue by using an alternative approach: instead of pushing all the values to one single javascript function, I created a separate javascript function that does only the setAttribute updates.

How to work with modal window in ASP NET 6?

I have a HTML code:
<div class="container">
<div class="row">
#foreach(var post in Model)
{
<div class="col-sm-8">
<div class="row">
<div class="post-body container shadow p-3 mb-3 rounded-3">
<h2>#post.Title</h2>
<p>#post.Description</p>
<button type="button" class="show-post-btn btn btn-secondary" data-bs-toggle="modal" data-bs-target="#wholePost" onclick="return showContent()">Show post...</button>
</div>
<div class="modal fade" id="wholePost">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">#post.Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>#post.Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar col-sm-4">
col2
</div>
}
</div>
I want to make that to when I click on "Show Post" button modal window is open with corresponding content. Currently, if there is two blog posts clicking on button result in displaying content from the first post even If I click on button in the second blog post.
I want to make that when I click on "Show post" in first blog post modal window opens with content from first blog post and when I click on button in the second blog post modal window open with content from second blog post.
I even don't understand where I should make this, in c# code or with javascript. Please provide me theory not a code if you could because I would like to guess on my own how to make this. Sorry in advance if there is post like that already and great thanks for your help.

You could do it on JS but need to propagate HTML with some additional info
just some concept code for example:
<button onclick="showContent(#post.Id);">Show post...</button>
...
<div class="modal fade" id="wholePost_#post.Id">
JS file
function showContent(id){
$("#wholePost_"+id).show();
}
There are probably some more ways to do it.

The way bootstrap modals work is that the data-bs-target attribute in your button needs to have the same id as the modal so that's why it keeps opening the modal for your first element.
What you need to do is give each modal its separate id, so instead of #wholePost id for all of the modals it should be like #wholePost1, #wholePost2, ... .

Is it possible to suppress Durandal navigation?

My web application makes use of bootstrap, knockout and durandal. Below is a snippet of the rendered html, that defines a row with five columns. Irrelevant details are left out.
<div class="row list-row" data-bind="click: function(vm, event) { $(event.currentTarget).trigger('durandal-navigation'); }">
<div class="col-xs-2">
...
</div>
<div class="col-xs-2">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-1">
...
</div>
<div class="col-xs-1">
<button class="btn btn-default btn-xs deletebutton" data-bind="click: DeleteClicked">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
Now when the mouse hovers over any of those divs, the css in place lits up the entire row which is how it is supposed to be, and a click navigates to the desired screen with durandal. The latter, however, should not be the case when the user clicks the button in the last column: only the DeleteClicked function should fire.
Is there any way to suppress the navigation here?

I've found a quite simple way around it by using sessionStorage: DeleteClicked now contains the line
sessionStorage.setItem("cancelNavigation", true);
The part of the application that actually implements the navigation:
$(document.body).on('durandal-navigation', function (event) { ... }
...performs a check on the status of "cancelNavigation" before calling router.navigate(...); and in addition of course removes the cancelNavigation key from sessionStorage. Works perfectly!

Adding div inside another div without separate scope

I have project, where I need to add popup form. Here is my project structure.
<body>
<div class="header">ART Compiler Explorer </div>
<div class="container">
<div class="box1">
<div id="inside" >
<label for="input-file" class="custom-file-upload">Select Java File</label>
<select class="tab" name="android" id="android"> </select>
</div>
<textarea id="editor" name="field1"><?php if(isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
</textarea>
</div>
<div class="box1 box2">
<div id="second" >
<select class="tabb" name="launguage" id="launguage" onchange='this.form.submit()' > </select>
<button type ="button" class="btn" onclick='this.form.submit()'>Refresh</button>
</div>
</div>
</div>
</body>
I want to add popup form under div id="inside"
which have code structure like:
<button class="add" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Add ToolChain</button>
<div id="id01" class="modal">
<div class="imgcontainer">
</div>
<div class="container_form">
</div>
</div>
The problem I am facing is The popup does not come in fully as in above link, instead it get hidden by first half text editor (see the blue colour line, which get shifted by left).
It seems popup div id "id01"make seperate space inside the div id ="inside", so not coming properly. Please suggest me how to tackle this problem as I have to add popup form under div id="inside", but this pop up form contain itself another div which make separate space.
Please help me to resolve this problem.

The popup is not coming over the textarea because of z-index, add z-index:4 to your popup modal so that it can come on top of the textarea.
.modal {
z-index:4
}

Best way to store data for website with dialog box [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm learning all the webdev, now for gaming community purpose I'm making a website which is similar to periodic table. It cointains for now about 25 "elements" but only blocks displayed without any info.
I want to make it open a dialog box (can't find any other name for it), similar to wowhead's table which contains item's info but I wan't it open on click, not on hover, and want it to act like lightbox, open on middle of screen with background grayed out.
Number of elements will rise to about 80, and here is my question:
Should I make for every such an element html file, which will be dispalyed in dialog, or use data base for it?

I think Bootstrap is probably to simplest solution for the layout and the Modal (the popup box).
You really only need one modal.
You can give each of your "blocks" a data attribute and store an item id there.
Then, when a user clicks a block, get the id from the attribute
use the id to get the information for the item from your database (myriad of ways to do that)
then populate that info into the modal.
Here's a contrived example (without the getting info from database part which could vary greatly depending on how you want to do that.)
$('.container').on('click', '.block',function(){
var id=$(this).data('id');
$('#blockId').html(id);
$('#myModal').modal({show:true});
});
/* CSS used here will be applied after bootstrap.css */
.block{
background-color:#ccc;
height:100px;
width:100px;
cursor:pointer;
}
#blockId{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-2"><div class="block" data-id="123"></div></div>
<div class="col-xs-2"><div class="block" data-id="456"></div></div>
<div class="col-xs-2"><div class="block" data-id="789"></div></div>
<div class="col-xs-2"><div class="block" data-id="234"></div></div>
<div class="col-xs-2"><div class="block" data-id="567"></div></div>
<div class="col-xs-2"><div class="block" data-id="678"></div></div>
</div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>The id of the block you clicked was <span id="blockId"></span> use that to get stuff from your database</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>