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.
Related
I've created the click event in that after click the pop up gets open. And in that pop their is a statement in which I've changing the enable and disable keyword dynamically so, when I run the server for first time, the value is get assign to let variable but after clicking on the same button the value of variable is doesn't get change in the pop up box.
HTML
<div class="modal" id="action-confirm-box" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
#*<h5 class="modal-title">%MODALNAME%</h5>*#
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Do you want to %STATUS% the rule with Options ?</p>
</div>
<div class="modal-footer">
<button type="button" id="continue-confirm-box" class="btn btn-primary">Continue</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
JavaScript
const changeStatusText = function (value) {
let statusText = $('#action-confirm-box').find('div.modal-body').html();
if (value) {
console.log("Inside IF");
statusText = statusText.replace('%STATUS%', 'disable');
}
else {
console.log("Inside else");
statusText = statusText.replace('%STATUS%', 'enable');
}
$('#action-confirm-box').find('div.modal-body').html(statusText);
};
So In this when code get run and we click on button the pop gets open for first time and %STATUS% value get assign but on 2nd click the %STATUS% value is remaining same for If and else statement. I didn't getting what's wrong here
const operateEvents = {
'click .btn-icon': function (e, value, row, index) {
console.log("operateEvents ", row);
changeStatusText(row.enabled);
$('#action-confirm-box').modal('show');
$('#continue-confirm-box').click(() => changeStatus(row, index));
}
};
Add an element in the html to update the content
<div class="modal" id="action-confirm-box" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
#*<h5 class="modal-title">%MODALNAME%</h5>*#
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Do you want to <span class="status_text">%STATUS%</span> the rule with Options ?</p>
</div>
<div class="modal-footer">
<button type="button" id="continue-confirm-box" class="btn btn-primary">Continue</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Then update the content of that element via javascript
const changeStatusText = function (value) {
//Use the ternary operator to toggle the text
$('#action-confirm-box .status_text').html(value ? "disable" : "enable");
}
I'm simply trying to launch a Bootstrap 4 modal from my Javascript code in my Vue 3 app. Every time the execution reaches the modal launch line however, I get this error: $ is not defined at eval
The other common questions about this seem to reference not including jQuery into the project more than once, i'm not sure if that's the issue causing the problem i'm seeing.
Code below, what am I doing incorrectly to launch the Bootstrap modal?
Html
<!-- Modal -->
<div
class="modal fade"
id="errorModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">
{{ modalTitle }}}
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{ modalMessage }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Javascript
<script>
export default {
methods: {
doNetworkedThings(requestHeader, profile) {
let that = this;
axios
.post(
"http://localhost:8080/endpoint",
profile,
requestHeader
)
.then(function(response) {
console.log("Success");
})
.catch(function(error) {
//show error modal
$('#errorModal').modal({ //TODO: fails on this line
keyboard: false,
backdrop: "static"
})
});
},
},
};
</script>
you can add this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
its works for me
Here is my bootstrap modal code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">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">
ok so the content goes here good good
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
and the javascript code to trigger after 2 seconds once the page is loaded
$(window).ready(function() {
setTimeout(function(){
$('#exampleModalCenter').modal('show');
}, 2000);
});
I'm looking for a code to trigger this function just once for a user and not to keep repeating each time when they visit the page again.
So, i have decided to use browser localstorage method to save this event and detect again whether it was already triggered or not.
I'm open for suggestions, if there is any better way to do this.
Thanks.
ohk so you want to save trigger status in localStorage...
$(document).ready(() => {
console.log(window.localStorage.modal);
if (window.localStorage.modal != "true") {
setTimeout(function(){
$("#exampleModalCenter").modal('show');
window.localStorage.modal = true;
}, 2000);
}
})
This code will check first if the modal value exist or modal value is false which in first case condition will be true so modal will be visible and localstorage modal value will be true. After that for other cases it will not trigger because modal value !== true condition.
note - but if they clear the localstorage it will not be able to help you.
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).
here i want to show bootstrap modal on onclick event. Onclick event alert() is coming but $(document.body).append() (modal code) is not initializing it seems... i am not getting any error in console also...
this is my code...
(function() {
tinymce.create('tinymce.plugins.wpc', {
init : function(ed, url) {
ed.addButton('wpc', {
title : 'Add Contact Us form',
image : url+'/dd_note.gif',
onclick : function() {
alert("hii"); // it's coming on onclick event
$(document.body).append('<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">Forms List</h4> </div> <div class="modal-body"> <script> showForms("'+url+'"); </script></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button data-dismiss="modal" type="button" class="btn btn-primary" onclick="addForm()">Add Page</button> </div> </div> </div> </div>');
$('#myModal').modal();
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);
})();
can anyone suggest me what's going wrong with my code?
Thanks in advance
In your html there are is script tag and some browsers does not allow to add it as text so u have to create script dom element from javascript and then append it or try something like this:
to replace in your appending html:
<script> showForms("'+url+'"); </script>
to:
<script> showForms("'+url+'");</' + 'script>
to allow browser to know that it is script tag.
working demo for appending this html
Try this
(function() {
tinymce.create('tinymce.plugins.wpc', {
init : function(ed, url) {
ed.addButton('wpc', {
title : 'Add Contact Us form',
image : url+'/dd_note.gif',
onclick : function() {
alert("hii"); // it's coming on onclick event
$('body').append('<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">Forms List</h4> </div> <div class="modal-body"> <script> showForms("'+url+'"); </script></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button data-dismiss="modal" type="button" class="btn btn-primary" onclick="addForm()">Add Page</button> </div> </div> </div> </div>');
$('#myModal').modal('show');
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);
})();