We Keep Coding

something like confirm("Are U sure?") JavaScript

I use
string js = #" return confirm('Are you sure you want to do this?');";
myAspButton.OnClientClick = js;
event rises after "OK" clicking and nothing happen after "Cancel"
I want to create my custom modal, but server event fired before any button click!
how to implement my own function like confirm(Are you sure you want to do this?') which returns value after button click?
my code:
string js = #"dialog('Are you sure you want to do this?',
function() {
return true;
},
function() {
return false;
}
);";
myAspButton.OnClientClick = js;
JS code:
function dialog(message, yesCallback, noCallback) {
$('.title').html(message);
var dialog = $('#modal_dialog').dialog();
$('#btnYes').click(function() {
dialog.dialog('close');
yesCallback();
});
$('#btnNo').click(function() {
dialog.dialog('close');
noCallback();
});
}
HTML code:
<div id='modal_dialog'>
<div class='title'>
</div>
<input type='button' value='yes' id='btnYes' />
<input type='button' value='no' id='btnNo' />

There's some modifications to make on your code...
You cannot bind a click event many times on the same element or it will trigger many times, so first you need to remove the bind to add it again with another callback.
Also, you can make an "overlay", that covers the entire page until some button is clicked. See the css part to take a look on what I did.
See the example below and check if this it's something you need.
$("#dialogBtn").on("click", dialog.bind(this, 'Are you Sure?', yesCallback, noCallback));
function dialog(message, yesCallback, noCallback) {
var modal = $("#modal_dialog");
modal.show();
$('.title').html(message);
$('#dialogBtnYes').off("click").on("click", function() {
modal.hide()
yesCallback.call();
});
$('#dialogBtnNo').off("click").on("click", function() {
modal.hide()
noCallback.call();
});
}
function yesCallback(){
console.log("YES");
}
function noCallback(){
console.log("NO");
}
#modal_dialog{
display: none;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0, 0.1);
z-index: 1000;
position: absolute;
top: 0;
left: 0;
}
#modal-content{
padding: 12px;
border: 1px solid;
box-shadow: 1px 1px 3px black;
background-color: #fff;
margin: auto;
position: relative;
width: 50%;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Dialog' id="dialogBtn"/>
<div id='modal_dialog'>
<div id="modal-content">
<div class='title'></div>
<input type='button' value='yes' id='dialogBtnYes' />
<input type='button' value='no' id='dialogBtnNo' />
</div>
</div>

How to add "Loading icon" and dim the background when something is process in backend?

I'm newbie to asp.net, javascript.
I have multiple views in a page in my ASP.NET application which is implemented using MVC5 Razor engine. Each view looks like a panel and they are cshtml files. Not aspx. Each panel has submit buttons individually where they are connected to its own API via Ajax.BeginForm option.
I want to know how can I add a Processing/Loading icon in the center of the screen and dim the background until submit has finished and returned back to my view ??
#using (Ajax.BeginForm("FilterReport", "Report", new AppAjaxOptions()
{
ExtendOnSuccess = "ReportView.onFilteringCompleted(data)",
UpdateTargetId = "filterContent",
}))
{
//some <div> .... </div> here
<button type="submit" class="btn btn-primary">#LanguagesFacade.GetValue(DictionaryKey.Filter)</button>
}
Signature of the API looks like this:
public PartialViewResult FilterReport(ReportFilterViewModel reportFilterViewModel)
Please let me know how to implement a loading icon on screen during the execution of this API simultaneously ??
Thanks in advance.

Here is a sample snippet. This should help you
//for demo
$('button').on('click', function() {
showLoadingIcon(); //call this when you want to show loading icon
});
//----------------------------Core functionality----------------------------------//
function showLoadingIcon() {
var loadingImage = '<div class="loading-div">' +
'<span class="loading-icon " style="opacity:none;">' +
'<i class="fa fa-refresh fa-2x fa-spin" style="margin-left: 47px;"></i>' +
'</span></div>';
$('body').append(loadingImage);
}
function hideLoadingIcon() { //call this when you want to hide loading icon
$('#loading_icon_div').remove();
}
div {
background-color: pink;
width: 400px;
height: 400px;
}
.loading-div {
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 0.5);
z-index: 9999;
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow: hidden;
}
.loading-icon {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0px 0px -50px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>show loading icon..</button>
some random text goes here..
</div>

How do I start with the tab expanded (toggle)?

So I am modifying a web page and there is a table on the bottom of the page that starts minimized. When you click the arrow it opens upward to reveal the table. I am attempting to modify it so that it already starts off opened when the page loads.
HTML Snippet:
<div class="row" id="cp-toggle">
<div class="col-sm-12">
<div class="col-sm-2 col-sm-offset-5 toggle-button">
<a><span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
<div class="col-sm-12" style="height: calc(100% - 25px);max-height: 250px;background-color:#d3d3d3;">
<div style="height: 100%;max-height: 250px;">
<div style="height: 25px;padding-top: 4px;">
<div style="float: left;padding-right: 9px;">
<span> Posts: </span> <span id="posts_count"></span>
</div>
</div>
<div style="overflow-y: scroll;height: 100%;max-height: 225px;">
<table id="result_table" class="table" style="display:table;" >
<thead class="result_thead"></thead>
<tbody class="result_tbody"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Javascript:
var control_panel= (function(){
var container = $('#cp-toggle div:first-child');
var btn = $('#cp-toggle div:first-child').find("div").first();
var table_panel = $('#cp-toggle div:first-child div:nth-child(2)').first();
var open_css = "glyphicon-chevron-up";
var close_css = "glyphicon-chevron-down";
var open = function(){
container.find("span").first().switchClass(open_css, close_css);
var h = table_panel.height() + 25;
container.css("top", "calc(100% - "+ h +"px)");
};
var close = function(){
container.find("span").first().switchClass(close_css, open_css);
container.css("top", "calc(100% - 25px)")
};
var isOpen = function(){
return _.contains(container.find("span").first().attr('class').split(/\s+/), close_css);
};
var toggle = function(){
if (isOpen()){
close();
} else {
open();
}
};
btn.on('click', toggle);
return {
open: open,
close: close,
toggle: toggle,
isOpen : isOpen
};
}());
CSS Snippet:
#cp-toggle > div:first-child {
top: calc(100% - 25px);
position: fixed;
z-index: 25;
}
.toggle-button {
height: 25px;
padding-top: 3px;
background-color: #d3d3d3;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
text-align: center;
cursor: pointer;
}
#cp-toggle a {
color: #111;
}
#cp-toggle a:hover {
color: #777;
}
.tab-pane { height: 100%;}
#email-body { height: calc(100% - 80px); }
.body-view { height: 100%; overflow-y: scroll; }
.marked {
color: #ffd700;
}
.marked:hover {
color: #ffd700;
}
I have tried modifying the javascript to call control_panel.open(); at the end. I have tried altering the toggle to start with open();. None of these seem to have any effect on the code. I am not sure if I am looking in the correct area or if I am doing something incorrectly.

Try this (you tried something similar in a comment, but I'll explain in a minute...):
<script>
window.addEventListener('load', function() {
control_panel.open();
});
</script>
The problem with your original attempt...
<script>onLoad=control_panel.open();</script>
... was that it was setting a variable called 'onLoad' with the value of whatever was returned by running the function control_panel.open(), which it did immediately instead of waiting until the page was loaded. Instead, in my example I'm setting an 'onload' listener on the window, so that when the window finishes loading, then it'll run the control_panel.open() function that it is now aware of.

<button> JQuery onclick works only once

I have a button onclick event that works fine like here:
// create function to remove "popup-open" classes
// function used in onclick attribute
(function( $ ){
$.fn.popupClose = function() {
$( "body" ).removeClass( "popup-open" )
$( ".overlay_btn" ).removeClass("popup-open");
return this;
};
})( jQuery );
// if a <button> exists
// onclick read button ID value
// add "popup-open" class to span with IDvalue as class, with fadein effect
if ( $( "button.popup" ).length )
{
$("button.popup").click( function()
{
var btnId = $(this).attr('id');
$( "body" ).hide().addClass( "popup-open" ).fadeIn(100);
$( "."+ btnId ).hide().addClass( "popup-open" ).fadeIn(200);
}
);
}
if ( $( "button.link" ).length )
{
$("button.link").click( function()
{
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
//alert(btnFormAction);
window.open(btnFormAction, btnTarget);
}
);
}
button {
padding: 10px;
font-size: 1.5rem;
background-color: #d5d5d5;
border: 3px solid #ddd;
margin: 15px;
box-shadow: 0px 0px 15px #888888;
cursor: pointer;
}
button:hover {
box-shadow: 0px 0px 10px #888888;
}
body:after {
content: "";
display: none;
position: fixed; /* could also be absolute */
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background: rgba(0,0,0,0.6);
}
.overlay_btn {
display: none;
padding: 10px;
width: 300px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #fff;
border-radius: 5px;
text-align: center;
z-index: 11; /* 1px higher than the overlay layer */
}
body.popup-open:after, .popup-open {
display: block;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<!--create a button with unique ID* -->
<button id="btn-popup01" class="popup">popup button 1</button>
<!-- create a span with the button#IDvalue as class value-->
<span class="overlay_btn btn-popup01">close
<h3>your content title 1</h3>
<p>your content 1</p>
</span>
<!--create a button with unique ID* -->
<button id="btn-popup02" class="popup">popup button 2</button>
<!-- create a span with the button#IDvalue as class value-->
<span class="overlay_btn btn-popup02">close
<h3>your content title 2</h3>
<p>your content 2</p>
</span>
<!--create a button with unique ID* -->
<button id="btn-link01" class="link" formaction="http://s.emp.re/1KAZEXZ" formtarget="_blank">link button 3</button>
<p>Here, you have a JS-less equivalent, but with much more CSS (LESS): http://codepen.io/maccadb7/pen/nbHEg</p>
</body>
</html>
Using the same code in this project: http://kine.sarabernaert.be/contact/
Button 'Maak Afspraak' gives a popup
on the popup there's a button 'Ga naar aanmelden' that links to a outside link.
I can't get working this link. When click, nothing happens. In my demo setup, same code is working well.
Any hints? Don't see what I'm doing wrong.
Thx!

Replace your .click() method to .on() method and place them inside $(document).ready at the bottom of the page
In your case, instead of if ( $( "button.link" ).length ) you can use something like below.
$("body").on('click', 'button.link', function(){
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
window.open(btnFormAction, btnTarget);
});
Overall, your scripts should probably look like this
$(document).ready(function(){
$("body").on("click", "button.popup", function(){
var btnId = $(this).attr('id');
$( "body" ).hide().addClass( "popup-open" ).fadeIn(100);
$( "."+ btnId ).hide().addClass( "popup-open" ).fadeIn(200);
}).on('click', 'button.link', function(){
var btnFormAction = $(this).attr('formaction');
var btnTarget = $(this).attr('formtarget');
window.open(btnFormAction, btnTarget);
});
$.fn.popupClose = function() {
$( "body" ).removeClass( "popup-open" )
$( ".overlay_btn" ).removeClass("popup-open");
return this;
};
});
I tested it on your site and it seems to be working after that. I got redirected to a login page I guess.
Hope this helps.

Pop up box using JQuery

I am new to JQuery and am trying to add a pop-up box to my page.
I'm using the following jQuery plugin (adopted from Ray Stone's leanModal):
(function($) {
$.fn.extend({
leanModal: function(options) {
var defaults = {
top: 100,
overlay: 0.5,
closeButton: null
};
var overlay = $("<div id='lean_overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function() {
var o = options;
$(this).click(function(e) {
var modal_id = $(this).attr("href");
$("#lean_overlay").click(function() {
close_modal(modal_id)
});
$(o.closeButton).click(function() {
close_modal(modal_id)
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
$("#lean_overlay").css({
"display": "block",
opacity: 0
});
$("#lean_overlay").fadeTo(200, o.overlay);
$(modal_id).css({
"display": "block",
"position": "fixed",
"opacity": 0,
"z-index": 11000,
"left": 50 + "%",
"margin-left": -(modal_width / 2) + "px",
"top": o.top + "px"
});
$(modal_id).fadeTo(200, 1);
e.preventDefault()
})
});
function close_modal(modal_id) {
$("#lean_overlay").fadeOut(200);
$(modal_id).css({
"display": "none"
})
}
}
})
})(jQuery);
My CSS looks like this:
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
#signup {
width: 404px;
padding-bottom: 2px;
display:none;
background: red;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
-moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}
My initialization script looks like this:
<script type="text/javascript">
$(function() {
$("#signup").leanModal();
});
</script>
And, finally, this is the HTML that I'm using:
<p id="examples" class="section box">
<strong>Example:</strong>
<a id="go" rel="leanModal" name="signup" href="#signup">With Close Button</a>
</p>
<div id="signup">
<div id="signup-ct">
<div id="signup-header">
<h2>This is a test</h2>
<p>testing.</p>
<a class="modal_close" href="#"></a>
</div>
</div>
</div>
With this code, the pop-up isn't coming up & I have a feeling that there must be a very simple fix for this, but I'm breaking my brain trying to figure it out. Any help you can give would be greatly appreciated!

I understand others are suggesting to use the existing library (highly recommended). But, if you want to solve the problem with your specific code, here's what I think you're doing wrong:
You're hooking into the wrong element with your 'leanmodal' call.
I've created a jsFiddle that pops up the dialog you want when the link is clicked. You can access it here:
http://jsfiddle.net/eWUgE/
Basically, I've modified the following line:
$("#signup").leanModal();
to become:
$('#go').click(function() {
$(this).leanModal();
});

definitely one of the best solutions is to use the jquery UI. You can only download the modal plugin if you do not need the entire library.
Chears