This code overloads js alert
<div id="alert" class="modal fade" data-backdrop="static" data-keyboard="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 id="alert-title" class="modal-title">ALERT!</h4>
</div>
<div class="modal-body">
<p id="alert-text">One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
window.alert = function () {
$("#alert-text").html(arguments[0]);
if (arguments.length > 1)
$("#alert-title").html(arguments[1]);
}
but the behaviour is wrong; alert is no longer blocking. So it morphed into this
var wait = {};
function waitFor(id){
if ($("#" + id).attr("aria-hidden") == true)
wait[id] = false;
else
setTimeout(waitFor,300,id);
};
window.alert = function () {
$("#alert-text").html(arguments[0]);
if (arguments.length > 1)
$("#alert-title").text(arguments[1]);
wait.alert = false;
setTimeout(function () {
$("#alert").modal();
waitFor("alert");
}, 300);
while (wait.alert) {
//do nothing
}
}
Now it pauses, but stalling the UI thread is a dismal idea since it interferes with rendering.
I could turn alert into a promise but that's not backwardly compatible.
Is it possible to create a drop in replacement for alert, or should I give up and just modify every call to alert?
Per accepted answer below the code becomes
<div id="alert" class="modal fade" data-backdrop="static" data-keyboard="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 id="alert-title" class="modal-title">Message from application</h4>
</div>
<div class="modal-body">
<p id="alert-text">One fine body…</p>
</div>
<div class="modal-footer">
<button id="alert-close" type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
alert = function () {
$("#alert-text").html(arguments[0]);
if (arguments.length > 1) {
$("#alert-title").html(arguments[1]);
}
var deferred = $.Deferred();
$("#alert-close").one("click", function () {
deferred.resolve("resolve");
});
$("#alert").modal();
return deferred;
}
And you'd call it like this
alert("This is the text for the <b>alert</b> containing markup",
"This is a custom title").done(function () {
$(document.body).append("<p>This runs AFTER the alert closes<p>");
});
$(document.body).append("<p>This runs BEFORE the alert closes");
It is not possible to create a complete, drop-in replacement for alert() with the exact same interface and blocking capability because there is no way to simulate that blocking capability that alert() has in your own Javascript.
You would have to use a non-blocking routine and thus would have to change the interface so the caller can know when the alert is done and continue their processing (like with Promises as you proposed).
Related
How do I call a JavaScript function from the page model? I am using razor page and asp.net core.
<section class="m-t2 m-b4">
<form method="post">
//Codes here
//....
<button type="submit" class="btn btn-danger">
Reject
</button>
</div>
</div>
</form>
</section>
<!-- Modal -->
<div class="modal" tabindex="-1" role="dialog" id="UpdateSucessModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal Body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
function OnPostReponseModal() {
$('#UpdateSucessModal').modal('show');
// Wait for 3 seconds, then redirect to the new page
setTimeout(function () {
window.location.href = '/Stage3/Index';
}, 2000); // 2000 milliseconds = 3 seconds
}
public void OnPost()
{
// retrieve some input from from using Request.Form
EnvelopeModel envelopeModel = new EnvelopeModel();
// Dummy data assuming update is successful
// _envelope.Update(envelopeModel)
bool isUpdateSuccess = true;
if (isUpdateSuccess) {
// Call the JavaScript function to show the modal and redirect after a few seconds
}
else {
Response.Redirect("//Fail");
}
}
Changing the button type to "button" and add onclick to the JavaScript function. It works but the backend won't go into the OnPost() to do the update first.
My modal is like this :
<div id="modal-account" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
{!! Form::open(['url' => 'member/profile/setting/account/add','class'=>'form-horizontal']) !!}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">Add</h4>
</div>
...
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success">Save</button>
</div>
{!! Form::close() !!}
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
My routes is like this :
Route::group(['middleware' => 'auth', 'prefix'=>'member', 'as'=>'member.'], function () {
...
Route::group(['prefix' => 'profile', 'as'=>'profile.'], function () {
...
Route::get('setting/account', 'Member\UserBankController#create');
Route::post('setting/account/add', 'Member\UserBankController#store');
...
});
...
});
My controller is like this :
public function store(CreateUserBankRequest $request)
{
dd('test');
...
}
When the first time I run the modal, and then click the submit button, it successfully runs the statements in the store function, which displays the word : test.
But after that, I tried again the second and so on, it can not display the word : test.
Sometimes it can be. Sometimes it can not.
Whether there are any people who can explain, why it happened and what is the solution?
Demo and Full Code is like this : https://jsfiddle.net/oscar11/xzxrp7nn/2/
My HTML Code is like this :
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg check_session" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="row">
<label for="idTourDateDetails">Tour Start Date:</label>
<div class="form-group">
<div class="input-group">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
My Javascript Code is like this :
$(".check_session").click(function(){
$.ajax({
success : function(response)
{
response = 'no_session';
if(response != 'exist_session')
{
alert('Please login');
}
}
})
});
When response != 'exist_session', I want the system display alert message without display modal. So only display alert message.
Any solution to solve my problem?
Thank you
You remove data-toggle and data-target in button
<button class="btn btn-primary btn-lg check_session">Launch demo modal</button>
then you can call it in javascript.
$(".check_session").click(function(){
$.ajax({
success : function(response)
{
response = 'no_session';
if(response != 'exist_session')
{
alert('Please login');
} else {
$('#myModal').modal()
}
}
})
});
Working Demo
https://jsfiddle.net/xzxrp7nn/4/
Using the example of bootstraps modal
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I was wondering if there is a way to make this, some sort of dynamic via jQuery.
My goal is to have something like a variable called $theModal which will be initialized and has properties for getting/setting the title, the content, the javascipt-functions to be called when Save/Cancel/Close is clicked etc.
Should all be generated via jQuery or should I have the markup in the code and use ids/custom data-attributes to catch the modal?
Maybe some class-structure?
var $theModal = new MyModal();
Next question would be, how to create a clone in case a modal is already open?
I would make/guess
var $theClone = $theModal.clone().init();
$theClone.title = "Title of the second modal";
$theClone.content = $.ajax(url);
$theClone.saveAction = saveTheContentOfTheContent;
$theClone.show();
Is this possible or am I totally wrong with my assumptions?
Your idea isnt too bad, but...
You could have one modal in your html code.
Then in the space Where your title would be you could use the $scope type.
Then in your js file you could specify the strings you want in arrays and just change to the one you want in the parameter of an ng-click function.
index.html
<p>This is the modal view.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{msgArray.title}}</h4>
</div>
<div class="modal-body">
<p>{{msgArray.body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{msgArray.btn}}</button>
</div>
</div>
</div>
</div>
script.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.msgArray1 = {
title : "Modal 1",
body: "This is the co to say anything you want here.",
btn : "Close",
};
$scope.msgArray2 = {
title : "Modal 2",
body: "This is the co to say anything you want here.",
btn : "Close",
};
$scope.msgTemp = {
title : "",
body: "",
btn : "",
};
$scope.openModal = function(modal){
if(modal == "modal1"){
$scope.msgTemp = $scope.msgArray1;
}
if(modal == "modal2"){
$scope.msgTemp = $scope.msgArray2;
}
$("#myModal").modal('show');
}
});
http://plnkr.co/edit/nV3iq1U1ymcsBAXT6g2y?p=preview
Your idea is very good and it is already implemented by somene. Check out this link
This link demonstrate you every possible case scenario in which your idea can be used. It also has some tremendous features which we don't have even thought of.
I am using Javascript to generate html like this
for (var count = 0; count < data.length; count++) {
var provider = data[count].Provider;
var icon_provider = provider.toLowerCase();
html=html+"some code here";
html = html + "<div class=\"icon\"><i class=\"fa fa-" + icon_provider + "\"></i></div>More info <i class=\"fa fa-arrow-circle-right\"></i></div></div>";
}
I am calling a function called "myFunction" when clicked.
function myFunction() {
$('#myModal').modal('show')
}
all this is in a indexInvoice.js file.
Now i have a index page which has all the scripts.
<!--javascript for the index page-->
<script type="text/javascript" src="js/IndexInvoice.js"></script>
<!--jQuery for modal window from bootstrap-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
and the div where html is generated through javascript(from indexInvoice.js) is this.
<div id="row1" class="row">
<!--Modal window-->
<div class="modal fade" data-target="#myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
this is modal window
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div><!-- /.row -->
The div has a std modal window code from bootstrap.
Now the Issue is when I click the that element, I am not able to get the modal window. Although when a put a alert in myFunction it shows the alert.
it should be $('#myModal').modal("show"); check the double quotes