On my page I have two modal windows. They are opened when user clicks buttons on the page. But I also want to be able to open second window when user clicks specific button on the first modal.
Here my JS code:
$(document).ready(function () {
$('.details-btn').on('click', function () {
$.ajax({
url: "/Device/Details",
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: 'html',
data: { id: $(this).attr('id') },
error: function (data) {
alert("wystąpił nieokreślony błąd " + data);
},
success: function (data) {
$('.modal-body').html(data);
$("#DetailsModal").modal('show');
$(".DeviceEdit-btn").on('click', function () {
$('#DetailsModal').modal('hide');
$("edit-btn").trigger('click');
});
}
});
});
$('.edit-btn').on('click', function () {
console.log("triggered");
$.ajax({
url: "/Device/Edit",
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: 'html',
data: { id: $(this).attr('id') },
error: function (data) {
alert("wystąpił nieokreślony błąd " + data);
},
success: function (data) {
$('.modal-body').html(data);
$("#EditModal").modal('show');
}
});
});
});
as you can in .details-btn click event I hide a modal( this works) and trigger click on the button which should show second modal. But second modal doesn't show up.
How modify this code to make this work.
Is a problem connected with this that edit-btn on click event is declared after details-btn where trigger is?
Your are Not placing the dot
$("edit-btn").trigger('click');
change with
$(".edit-btn").trigger('click');
Related
I am battling with a somewhat trivial issue here. After a close a modal box it appears that the order of rows and even the pagination changes. Does anyone have any idea what causes this issue and how it can be prevented? Is there a way of avoiding the page reload after closing the modal ? Here is my code below
$(function () {
$(".anchorDetail").click(function () {
debugger;
var $buttonClicked = $(this);
var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
$.ajax({
type: "GET",
//url: TeamDetailPostBackURL,
url:'/FilteredSearch/Client',
contentType: "application/json; charset=utf-8",
data: { "Id": id },
datatype: "json",
success: function (data) {
debugger;
$('#myModalContent').html(data);
$('#myModal').modal(options);
$('#myModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
}
});
});
$("#closebtn").click(function () {
$('#myModal').hide();
//e.preventDefault();
location.reload();
location.reload() is causing this behavior. You are able to get the modal to close without calling location.reload() in your closebtn click method.
Please try removing location.reload().
button Uptade
<button type="button" id="custom-icon" onclick="UpdateParents()"">Update</button>
function AJAX
function UpdateParents() {
var ParentsOBJ = { IDkids: $("#IDkids").val(), NameKids: $("#NameKids").val(), LastNameKids: $("#LastNameKids1").val(), NameFather: $("#NameFather").val(), NameMother: $("#NameMother").val(), PhoneMother: $("#PhoneMother").val(), PhoneFather: $("#PhoneFather").val() };
$.ajax({
type: "PUT",
url: "/api/Parents/" + ParentsOBJ.IDkids,
data: JSON.stringify(ParentsOBJ),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
Parents = JSON.parse(data);
$('#custom-icon').on('click',function () {
swal({ title: "update", text: "ok.", icon: "/up.jpg" });
setTimeout(function () {
location.reload();
}, 2000);
});
},
failure: function (errMsg) {
alert(errMsg);
}
});
$('#custom-icon').on('click',function ()
Only when I double-click the button does the operation take place.
I can understand why this is happening (click in click),
But can't solve the problem.
I will be happy to resolve!!!
The problem is that you double bind the $('#custom-icon'), and the 2nd bind takes place inside an ajax success callback, which takes in place only after the ajax request that has been triggered from the first click has been finished.
All you need to do is to remove the 2nd binding, as it's unnecessary because you already bind the click event from the html, your new code will look like this:
function UpdateParents() {
var ParentsOBJ = { IDkids: $("#IDkids").val(), NameKids: $("#NameKids").val(), LastNameKids: $("#LastNameKids1").val(), NameFather: $("#NameFather").val(), NameMother: $("#NameMother").val(), PhoneMother: $("#PhoneMother").val(), PhoneFather: $("#PhoneFather").val() };
$.ajax({
type: "PUT",
url: "/api/Parents/" + ParentsOBJ.IDkids,
data: JSON.stringify(ParentsOBJ),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
Parents = JSON.parse(data);
swal({ title: "update", text: "ok.", icon: "/up.jpg" });
setTimeout(function () {
location.reload();
}, 2000);
},
failure: function (errMsg) {
alert(errMsg);
}
});
A better practice here would be to accept a callback method from the UpdateParents function, and then pass the success as a callback.
Image Example
Image Example Keyboard
My auto commplete is adding extra spaces when data is selected from web services, how do i fix this?
i've tried mostly everything but isnt getting any results
Code:
https://jsfiddle.net/jz1e4tr6/1/
$(document).ready(function () {
$("#<%=TextBox1.ClientID%>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("/Normal/WebServices/AutoComplete.asmx/GetSubject")%>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
attr: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
An alternative "tweak" but not the right solution... before clicking submit in the code behind... i get the value from the textbox and into a variable. And trim the variable.
How to create the confirm box (modal popup) after i click this button:
<button id="sellButton" onclick="sendRequest(#item.Id)">Sell</button>
HERE POPUP MODAL (YES/NO)
When user will confirm, then this should happen
<script>
function sendRequest(id)
{
var request =
{
"itemId": id
};
$.ajax({
url: '/It/Sell',
data: JSON.stringify(request),
type: 'POST',
dataType: "html",
contentType: 'application/json; charset=utf-8',
error: function (err) {
alert('Error: ' + err.statusText);
},
success: function (result) {
$('#Table').html(result);
},
async: true,
processData: false
});
};
</script>
if(confirm('are you sure?')){
var request =
{
"itemId": id
};
$.ajax({
url: '/It/Sell',
data: JSON.stringify(request),
type: 'POST',
dataType: "html",
contentType: 'application/json; charset=utf-8',
error: function (err) {
alert('Error: ' + err.statusText);
},
success: function (result) {
$('#Table').html(result);
},
async: true,
processData: false
});
}
Have look at jquery.confirm. It should be able to solve your problem.
If you want to have nice modal confirm box with simple implementation i would recommend Bootstrap3 Dialog
Import necessary files to your project. And
function sendRequest(id)
{
BootstrapDialog.confirm('Are you sure you want to continue?', function(result){
if(result) {
//Send Ajax Request
}
});
}
More Info : https://nakupanda.github.io/bootstrap3-dialog/
I am using knockout with MVC in my project. when I pass viewModel on dropdown change It's getting continues ajax request to the server. How can I avoid the continues request??? any one can please help me on this???
My View
#ko.Html.DropDownList(m => m.RoomList, new { #class = "full-width", #id = "rmch" }, "Text", "Value").Value(m=>m.NoOfRooms)
Javascript
$(document).ready(function () {
$('#rmch').on("change", function (e) {
//viewModel.NoOfRooms = $(this).val();
$.ajax({
url: '#Url.Action("DropChange", "Home")',
type: 'POST',
data: ko.mapping.toJSON(viewModel),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data.redirect) {
location.href = resolveUrl(data.url);
}
else {
//ko.applyBindings(viewModel, document.getElementById("p_scentsFH"));
ko.mapping.fromJS(data, viewModel);
}
},
error: function (error) {
alert("There was an error posting the data to the server: " + error.responseText);
},
})
});
})
if I remove value part from the dropdownlist in the view It's working .but I need the value for the processing.
The simplest thing I can think of is to set the dropdownlist to readonly before updating it, then when you have finished adding the new items, remove the readonly attribute.
$(document).ready(function () {
$('#rmch').on("change", function (e) {
//viewModel.NoOfRooms = $(this).val();
$.ajax({
url: '#Url.Action("DropChange", "Home")',
type: 'POST',
data: ko.mapping.toJSON(viewModel),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
//this will disable the onchange event
$('#rmch').attr("readonly","readonly");
if (data.redirect) {
location.href = resolveUrl(data.url);
}
else {
//ko.applyBindings(viewModel, document.getElementById("p_scentsFH"));
ko.mapping.fromJS(data, viewModel);
}
//this will enable the onchange event for the next time you select something.
$('#rmch').removeAttr("readonly");
},
error: function (error) {
alert("There was an error posting the data to the server: " + error.responseText);
},
})
});
})