Develop Reference

showDialogPopup Refresh Page after Click

I have a dialog box which displays an OK button once the process completes.
I would like to refresh the page once user clicks OK.
However, in my existing code, there isn't a code to handle the behaviour after clicking OK.
Below is my current code
$.ajax({
type: "POST",
url: wsurl + "BackendRequest",
data: '{ sDomain : "' + domain + '", sUserName : "' + username '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
document.getElementById('btnGenerate').disabled = true;
showDialogPopup('Generate Request', data.d);
//window.location.reload();
},
error: function (objXMLHttpRequest, textStatus, errorThrown) {
showDialogPopup('Generate Request', data.d);
//window.location.reload();
}
});
The current window.location.reload(); refreshes the page immediately.
Is there a way to refresh the page only after user clicks OK in the showDialogPopup method?

You should write an onclick event for your "Ok" button.
try the code below:
<a onclick="OpenModal()">Open Modal</a>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<button onclick="ReloadPage()">Ok</button>
</div>
</div>
</div>
<script>
//Opens the popup
function OpenModal() {
$("#myModal").modal('show');
}
//Reloads the page
function ReloadPage() {
window.location.reload();
}

You can use confirm popup modal with return type boolean
success: function (data) {
const isConfirmed = confirm('Generate Request');
if(isConfirmed) {
console.log('Ok button clicked', data.d)
window.location.reload();
}
}

jquery - how to prevent submit form continuously

I have a form in modal as follows:
<!-- 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">Modal Header</h4>
</div>
<form id="Myform" action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="button" onclick="submitform()" value="Submit">
</form>
</div>
</div>
</div>
Javascript
function submitform() {
//try
//event.stopImmediatePropagation();
//event.stopPropagation();
//check validate is valid
if (formValid) {
$("#Myform").trigger("submit");
}
}
$("#Myform").submit(function (e) {
e.preventDefault();
// e.stopImmediatePropagation();
$.ajax({
type: this.method,
cache: false,
url: this.action,
enctype: 'multipart/form-data',
data: new FormData(this),
processData: false,
contentType: false,
success: function (data) {
$('#create-media').modal('toggle');
}
},
error: function (error) {
console.log(error);
}
});
});
Currently, when the user click on the submit button, the data will be sent to the server to process, during the time waiting for the results returned, the modal has not been closed, the user can click to submit more times. I do not want this to happen.
I want to prevent users submitting continuously, do not allow users to click on the second submit button, the user must wait for the results returned, if successful, the modal will be closed.
I was thinking of disabling the submit button, but that's not safe, because the user can enable that button because of javascript on the user machine.
I tried using event.stoppropagation () and event.stopimmediatepropagation () but it did not work.
Am I doing something wrong? How do I prevent users from submitting continuously?
Thanks AlL

Follwing CertainPerformance idea, I would suggest you use a variable. However, instead of placing the variable at the beginning of the code, I would suggest to use the beforeSend callback provided by Ajax, it will be called right before sending the request.
var isBusy = false;
$("#Myform").submit(function (e) {
e.preventDefault();
if(isBusy) {
return;
}
$.ajax({
type: this.method,
cache: false,
url: this.action,
enctype: 'multipart/form-data',
data: new FormData(this),
processData: false,
contentType: false,
beforeSend: function(xhr) {
isBusy = true;
},
success: function (data) {
$('#create-media').modal('toggle');
isBusy = false;
},
error: function (error) {
console.log(error);
isBusy = false;
}
});
});
You can learn more about the beforeSend callback here
P.S. You could also use the $.ajax.active variable, which returns the amount of active ajax request, this might be a more elegent method.

Give your submitform function a persistent alreadySubmitted variable. Also, try attaching the button handler from Javascript instead of HTML, and preventDefault:
const submitform = (() => {
let alreadySubmitted = false;
return (e) => {
e.preventDefault();
if (alreadySubmitted) return;
alreadySubmitted = true;
if (formValid) {
$("#Myform").trigger("submit");
}
}
})();
document.querySelector('#Myform input[type="button"]').addEventListener('click', submitForm);

Submit button not posting on modal

I have a form on a bootstrap modal with two buttons. This form is tied to an action named "DeleteWidgetConfirmed" I am trying to remove a widget from the database and from the front end, the panel gets removed from the front end but does not seem to get removed from the database.
Here is my Modal
<div class="modal fade" id="deleteWidgetModal" 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">Delete widget?</h4><!--add depending on which panel you have clicked-->
</div>
<div class="modal-body" id="myModalBody">
<!--Depending on which panel insert content-->
#using (Html.BeginForm("DeleteWidgetConfirmed", "Dashboard", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
Do you wish to delete this widget?
<div class="form-group">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" value="DeleteWidgetConfirmed" class="btn btn-danger btn-ok" id="delete-widget">Delete</button>
</div>
</div>
</div>
}
</div>
</div>
</div>
Here is my action:
// POST: DashboardModels/Delete/5
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult DeleteWidgetConfirmed(int? id)
{
if(id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
DashboardModel dashboardModel = db.dashboards.Find(id);
db.dashboards.Remove(dashboardModel);
db.SaveChanges();
return new EmptyResult();
}
From my javascript I get the ID from the panel and store it into a variable, I then get the action attribute from my form and append the ID to the action attribute.
$(document).ready(function () {
$('#columns').on('click', '.glyphicon.glyphicon-trash', function (event) {
var panel = this;
//get id here
//toggle the modal
$('#deleteWidgetModal').modal('show');
var widgetID = $(this).closest('.panel.panel-default').attr('data-widgetid');
document.getElementById('delete-widget').onclick = function (event) {
event.stopPropagation();
//we make an ajax call to the controller on click
$.ajax({
url: '#Html.Raw(Url.Action("Dashboard", "DeleteWidgetConfirmed"))',
data: { id: widgetID},
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function(data){
var parentElement = $(panel).closest(".col-md-4.column");
var targetElement = $(panel).closest(".panel.panel-default");
targetElement.remove();
//parentElement.addClass("expand-panel");
checkEmptyPanelContainers();
$('#deleteWidgetModal').modal('hide');
},
error: function (response) {
}
})
}
})
});
I have a hunch that maybe within my javascript I have overridden the default behaviour of the event.
What I want to achieve ultimately is
within the onclick event for the button to remove the panels(which works)
remove the entry within the database related to that panel.
When executing the post method do not refresh.

Try using AJAX to asynchronously post to your controller:
$(document).ready(function () {
$('#columns').on('click', '.glyphicon.glyphicon-trash', function (event) {
var panel = this;
//get id here
//toggle the modal
$('#deleteWidgetModal').modal('toggle');
var widgetID = $(this).closest('.panel.panel-default').attr('data-widgetid');
$.ajax({
url: '/Dashboard/DeleteWidgetConfirmed/',
type: 'POST',
data: { id: widgetid },
dataType: 'json',
contentType: 'application/json; charset=utf-8',
error: function (xhr) {
// request failed, handle here!
},
success: function (result) {
// request succeeded! handle that here. close the modal? remove the item from the UI?
}
});
}
});
});
How you handle the success callback depends on the UI, you can use the data- attributes to do so quite easily.
You need to decorate your action method as POST if you do this:
[HttpPost]
public ActionResult DeleteWidgetConfirmed(int id) {
...
}

on click save data of drop down list using Java Script , Jquery or Ajax

I have a drop down list. I am trying to save data of that drop down list on click event without using a button. I have tried some code but it is not working please help.
Here is the view of my drop downlist
#model MyYello.Admin.Models.FeedBack
#{
ViewBag.Title = "Feed Back";
}
#*#using (Ajax.BeginForm("SelectFeedBack", "Admin", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "mainContent" }, new { #id = "formId" }))
*#
<form method="post" id="formId" action="#Url.Action("SelectFeedBack","Admin")">
#Html.ValidationSummary(true);
<fieldset>
#Html.HiddenFor(item => item.FeedBackId)
<legend>Create Notes</legend>
<div class="editor-label">
#Html.LabelFor(item => item.FeedBackDrpDown, "Select feed Back")
</div>
#Html.DropDownList("FeedBack")
<input type="hidden" id="isNewNote" name="isNewNote" value="false" />
#* <p>
<input type="Submit" value="Save" id="Save" />
</p>*#
#* #Url.Action("CreateNote", "Admin")*#
</fieldset>
</form>
<script type="text/javascript">
$(function () {
$("#FeedBack").change(function () {
console.log("test");
$("#formId").submit(function () {
console.log("test1");
$.ajax({
type: "POST",
//url: urlAction,
data: {},
datatype: "JSON",
contentType: "application/json; charset=utf-8",
success: function (returndata) {
if (returndata.ok)
window.location = returndata.newurl;
else
window.alert(returndata.message);
}
});
});
});
});

You can adjust your onChange-Method like this:
$("#FeedBack").change(function () {
var urlAction = "/whatever/url/"; // someURL
// var urlAction = $("#FormId").attr("action"); // or grab the form-url?
var postData = {
"whateverName" : $(this).val() // selected drop-down-value
};
$.ajax({
type: "POST",
url: urlAction,
data: postData, // send postData-Object
dataType: "JSON",
contentType: "application/json; charset=utf-8",
success: function (returndata) {
// make shure that the attributes ok,newurl and message are available - otherwise this throws an error and your script breaks
if (typeof returndata.ok !== "undefined" && typeof returndata.newurl !== "undefined" && returndata.ok)
window.location.href = returndata.newurl;
else
window.alert(returndata.message);
}
});
});
this is how you just submit the select-field-value to whatever URL. Do you wish to submit the whole form when the dropdown changes?

Partial view render on button click duplicating Header / Footer

I am trying to create a back button on an application so a user can go back and change something that they may need to fix or update. I am using this javascript:
$(function () {
$(':button').click(function () {
$.ajax({
url: $(this).data('url'),
type: 'GET',
cache: false,
success: function (result) {
$('#step1').html(result);
}
});
return false;
});
});
and this code:
<input type="button" value="Back" id="back" class="btn btn-default cancel" data-url="#Url.Action("Index", "Home")" />
What's happening is when I click my back button it renders the header / footer twice with what seems to be inside my '#step1' div. How can i keep the header / footer form rendering twice?
Updated:
$(function () {
$(':button').click(function () {
$.ajax({
url: $("#step1").load($(this).data('url')),
type: 'GET',
cache: false,
success: function (result) {
$('#step1').html(result);
}
});
return false;
});
});