We Keep Coding

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!

alert() following display change suspends the change until alert() completes [duplicate]

This question already has answers here:
Why does alert appear before background changes?
(3 answers)
Closed 4 years ago.
I can work around this by putting the change to display inside setTimeout(), but can someone explain why this happens? Using either of these 2 lines, the change to display isn't completed until the alert() goes away. Thanks for your help.
//$('#' + divId).hide();alert('test');
document.getElementById(divId).style.display = 'none'; alert('test');
the div here is popup window, below. It is later modified and made visible.
<div id="reportOptsDiv" style="display: none;">
<div class="centerDiv">
<div class="row">
<div class="col-xs-12">
<div id="reportOptsDataDiv">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="margin-top: 15px; text-align: center">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"
onClick="addressBook.saveOptions('rtype',
'reportOptsDiv');">Save</button>
<button type="button" class="btn btn-default" onClick="addressBook.cancelOptions('reportOptsDiv');">Cancel</button>
</div>
</div>
</div>
</div>
</div> <!-- end of reportOptsDiv -->

The alert() blocks the UI thread and hence the display. So you won't see the changes until the function completes.

MVC #foreach and JavaScript Confusion

I'm trying to make a button in a Bootstrap popover that passes a Razor value to another JavaScript function called killDatabase when running through a Razor foreach. The code produces a list of buttons that you can select but I also want to be able to hit a button and delete one of the options. The code doesn't throw any errors, and everything works perfectly except the fact that any of the delete buttons will always delete the last element, not the one that it's supposed to be associated with. I'm assuming this is because the function gets called on an onclick and so at that point #str is just the last element's name, but I'm wondering if there's any way to store that value to be unique for each element? I've tried adding a JavaScript variable within the foreach but still ran into the same problem.
<div class="btn-group-vertical btn-block" data-toggle="buttons" id="btns">
#foreach (var str in Model)
{
<div id="popover-content" hidden>
Are you sure you would like to permanently delete this query from the database?<br />
<button onclick="killDatabase('#str')" class="btn btn-primary btn-sm" style="float:left; margin-bottom: 10px;">Yes</button>
<button class="btn btn-sm btn-primary" style="float:left;">No</button>
</div>
<label class="btn btn-default" style="height:auto">
<div class="form-group" style="height:auto; padding-bottom: 10px;">
<input type="radio" name="query" value="#str" />
<span class="pull-left">#str</span>
<span class="pull-right">
<button class="btn btn-sm btn-danger" style="margin-top:-2px;" data-toggle="popover" title="Confirm Deletion" data-placement="bottom">
<span class="glyphicon glyphicon-trash"></span></button></span>
</div>
</label>
}
</div>

So I'm going to close this question because it was me being really confused about AJAX. That's what it boiled down to: I had a bad AJAX call and I was trying to do things on a popover that was initialized after the page was loaded so any time I would try and use the #str value in that popup, it would only take the most recent value. I've reworked the code into a more streamlined, less buggy design, and it works fine now. Thanks to everyone who tried to help

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>

Using Bootstrap, I can only get the text to act like a link, not the whole button?

I'm just learning how to use html and css and my teacher has asked us to use Bootstrap. It's really cool, obviously, but when I try to make a button, only the text within the button actually acts like a link as opposed to the whole rectangular button. I'm not sure if I need more than just the minified bootstrap javascript file to make them work or what.
Here's my html, and I also added the line "$('.nav-tabs').button()" to my head as well as the javascript file from bootstrap. Any advice? I know my html is probably pretty janky, my teacher isn't the best at explaining things so I've just been fiddling with things until they seem to work.
<div class="btn-toolbar">
<div class="row-fluid">
<div class="span2 offset2">
<div class="btn btn-primary">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20profile%20-%20final.html">
Profile
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20writing%20-%20final.html">
Writing
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20music%20-%20final.html">
Music
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20photos%20-%20final.html">
Photography
</a>
</div>
</div>
</div>

remove the class="btn btn-primary" from the div tag, put it on the a tag
see http://twitter.github.com/bootstrap/base-css.html#buttons
...typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Looks like you are not adding the class on the a tag.
You need to use something like this New button This should give you a button with the text New button.
You use Big Button
For a large blue button.