I've a parent view which contains a table of data. This View contains two modal dialog as shown in below code:-
<div id='myModal' class='modal fade in' data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content" style="width: 400px; height:250px;">
<div id='firstModelContent'></div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" id="callBackModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content" style="width: auto;">
<div id='secondModalContent'></div>
</div>
</div>
</div>
On each row click of table, firstModal dialog will popup with row data as parameter. Now the requirement is to initiate the second modal popup from the "submit button" of first modal.
I'm able to load a partial view as the firstmodal dialog with row parameters using AJAX. But I'm unable to load a partial view as secondmodal dialog on a button click of firstmodal partial view. Instead while debugging the secondmodal doesn't gets checked. It will simply redirect to partial view on a full screen page. The html link that gets auto-generated from the firstmodal dialog partial view looks like below:-
<a class="btn btn-primary" data-modal="" href="/SampleController/Update?ID=867448&status=Yes" title="Update Details">Yes</a>
And the AJAX code for second modal is like below **in the parent page JavaScript **:-
$(function () {
$("a[data-modal]").on("click", function (e) {
debugger;
var $buttonClicked = $(this);
//var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
$.ajax({
type: "GET",
url: '#Url.Action("Update", "SampleController")',
contentType: "application/json; charset=utf-8",
data: { "Id": id },
datatype: "json",
success: function (data) {
debugger;
$('#myModalContent').html(data);
$('#callBackModal').modal(options);
$('#callBackModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
}
});
//$("#closbtn").click(function () {
// $('#callBackModal').modal('hide');
//});
});
});
But the first modal popup on "button" click doesn't open the second modal pop.
Can anyone please suggest how to perform this operation?
Looking forward to hearing from you.
When you click the link :
<a class="btn btn-primary" data-modal="" href="/SampleController/Update?ID=867448&status=Yes" title="Update Details">Yes</a>
it will not execute your ajax call.
You must change it to "button" :
<button type="button" class="btn btn-primary btn-yes">Yes</a>
jQuery:
$(".btn-yes").on("click", function (e) {
var $buttonClicked = $(this);
//var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
$.ajax({
type: "GET",
url: '#Url.Action("Update", "SampleController")',
contentType: "application/json; charset=utf-8",
data: { "Id": id },
datatype: "json",
success: function (data) {
debugger;
$('#myModalContent').html(data);
$('#callBackModal').modal(options);
$('#callBackModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
}
});
Related
I have a form in which I am posting data using ajax using jquery. Problem is, when I alert #Model.Id or when I try to pass the value in FormData in the view, I can't see the alert and when I keep the breakpoint in the Controller, I get the breakpoint fine upon clicking the Post Comment button. I also get all values on the form except for the Id Please help.
(And please see the document ready function, there I can access the Id fine. Only when I click the Post Comment button, I have the problem with the Id.)
Here is my View
#model KGSBlog.Models.BlogData
#{
Layout = null;
}
<html>
<body>
<form id="formPostComment" method="post" asp-controller="BlogData" asp-action="PostComment">
<div class="row">
<div class="col-md-6">
<input type="text" placeholder="Name *" name="name" required>
</div>
<div class="col-md-6">
<input type="email" placeholder="Email *" name="email" required>
</div>
</div>
<textarea name="message" placeholder="Message *" id="message" cols="45" rows="10" required></textarea>
<button type="submit" id="btnPostComment" class="btn btn-main m-bottom-40">Post Comment</button>
</form>
<!-- jQuery -->
<script src="~/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="~/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
LoadPartialView(#Model.Id); //Here I can access the Id fine.
$('#formPostComment').validate({
rules: {
name: {
required: true,
minlength: 4
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
}
}
});
});
$(function () {
$("#btnPostComment").click(function () {
alert(#Model.Id); // I cannot see this alert.
var url = $("#formPostComment").attr("action");
var formData = new FormData();
formData.append("Name", $("#name").val());
formData.append("Email", $("#email").val());
formData.append("Comment", $("#message").val());
formData.append("BlogId", #Model.Id); //This value is always 0.
$.ajax({
type: 'POST',
url: url,
data: formData,
processData: false,
contentType: false,
success: function (response) {
LoadPartialView(response.blogId);
$('#formPostComment')[0].reset();
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
function LoadPartialView(blogId) {
$.ajax({
type: 'POST',
url: "/BlogData/UpdateCommentsPartial",
data: { "blogId": blogId },
success: function (data) {
$("#haveToReloaddiv").html(data);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
})
}
</script>
</body>
</html>
When I hit the Post Comment button I see the break point in the Controller action method with all the values of the form, but the Id is always 0.
this is my drop down :#Html.EditorFor(m => m.CustomerBasicInfo.CheckUpDR)
i want it to be updated either whenever it's been clicked or when a reload button hit. i mean i wonder if i can reload it even by clicking on it but if its not possible i want it to reload by hitting reload button.
for example here i put a button and it call an ajax function:
<div class="row">
<div class="col-md-11">
#Html.EditorFor(m => m.CustomerBasicInfo.CheckUpDR)
</div>
<div class="col-md-1">
<a href="#" class="btn" sdata-placement="top" onclick="ReloadDropDown()">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
and here is the ajax function :
function ReloadDropDown() {
debugger;
$.ajax({
type: "GET",
url: '#Url.Action("FillCheckDrDropDown", "CustomerInfoControler")',
data: { },
success: function (res) {
$("#CheckUpDR").value(res);
alert('Successfully called');
},
error: function (jqxhr, status, exception) {
alert('Exception:', exception);
}
});
}
and here is the controller for loading data:
public JsonResult FillCheckDrDropDown()
{
var model = _service.GetCheckUpDRLists();
return Json(model, JsonRequestBehavior.AllowGet);
}
with considering that i'm very new to ajax would you pleas help me where i'm going wrong that my ajax function doesn't work and what i can do to update the drop down.thank you.
I am trying to send the value of <textarea> to a method in some controller but doesn't run well. I will post the code to make it clear:
Here is the method
public ActionResult SubmitText(string txtRendered)
and here is the ajax to call
$.ajax({
url: '/Form/SubmitText',
type: 'Get',
dataType: 'json',
data: { txtRendered: $("textarea#render").val() },
success: function (data) {
alert("success");
},
error: function () {
alert('error');
}
});
and here is the textarea
<textarea id="render" name="txtRenderd" class="span6">
<form class="form-horizontal" >
<fieldset>
<legend>Form Name</legend>
<div class="control-group">
<label class="control-label" for="textinput-0">Text Input</label>
<div class="controls">
<input id="textinput-0" name="textinput-0" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
</fieldset>
</form>
</textarea>
actually it is complicated, since I am trying to pass a form as a text as you can see
I'm listing a list of clients in a partial view
#{
List<Clients> clientsList = ViewBag.ClientsList;
}
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<li class="dropdown">
Clients <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
#foreach (Clients c in clientsList)
{
<li>#Html.ActionLink(c.NomClient, "Index", "Home", new {c.ID}, null)</li>
}
</ul>
</li>
What I want is, when a user click on a client in the dropdown list, it send the client to ID to a method on a controller, without clicking on a submit button, with or form for example.
I tried with an ActionLink, but only by passing the id in the URL and I would like to not have the clientId in the URL.
How can I do that ?
thx
Do as
HTML:
<ul class="dropdown-menu" role="menu">
#foreach (Clients c in clientsList)
{
<li>#c.NomClient</li>
}
</ul>
javascript:
// assuming you're using jQuery
$(".dropdown-menu").change( function (event) {
$.ajax({
url: "Home/Index/" + $(this).val(),
data: { id = $(this).val() /* add other additional parameters */ },
cache: false,
type: "POST",
dataType: "html",
success: function (data, textStatus, XMLHttpRequest) {
//do stuff
}
});
});
You can use Jquery for that.
Create a class on your li and an event on click on this class. Simply redirect your page with a window.location.href and a #Url.Action().
JQuery
$(".dropdownclient").click(function(){
window.location.href="#Url.Action('Method','Controller')/"+$(this).data("id");
});
HTML
<ul class="dropdown-menu" role="menu">
#foreach (Clients c in clientsList)
{
<li class='dropdownclient' data-id="#c.ClientID">#Html.ActionLink(c.NomClient, "Index", "Home", new {c.ID}, null)</li>
}
</ul>
Try this with jQuery. Your ID will not be part of the URL.
<ul class="dropdown-menu" role="menu">
#foreach (Clients c in clientsList)
{
<li><button data-action="do-stuff" data-url="#Url.Action("Index", "Home")" data-id="#c.ID">#c.NomClient</button></li>
}
</ul>
$("[data-action='do-stuff']").on('click', function (event) {
var opt = $(this).data();
$.ajax({
url: opt.url,
data: { id = opt.id },
cache: false,
type: "POST"
success: function (data, textStatus, XMLHttpRequest) {
//do stuff
}
});
});
#Html.DropDownListFor(m => m.NomClient, new SelectList(ViewBag.ClientsList,"Key", "Value"), "Select", new { #class = "dropdown-menu" })
$(".dropdown-menu").change(function (event) {
$.ajax({
url: "Home/Index/",
data: { id = $(this).val() /* add other additional parameters */ },
type: "POST",
success: function (data) {
//do stuff
}
});
});
I have a problem as follow : click button delete , then show modal popup , in modal, i have one button is "OK", when i click button "OK" , process event click of button "OK", such as call action delete via ajax.
my code snippet.
#foreach (var item in Model)
{
<tr>
<td>
#Ajax.ActionLink(" Delete", "", "", new { id = #item.UserProfileID }, new AjaxOptions()
{
HttpMethod = "GET",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "",
OnSuccess = "ShowModal()"
}, new { #class = "fa fa-times btn btn-danger btn-xs", #id = "bt_del_profile" })
</td>
</tr>
}
<div id="myModal" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-footer">
<button type="button" id="bt_del_ok" class="btn btn-success btn-sm">Ok</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function ShowModal() {
$("#myModal").modal('show');
}
$('#bt_del_ok').click(function (e) {
e.preventDefault();
$.ajax({
url: '/Profile/DelProfile',
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
cache: false,
//processData: false,
data: { id: #item.UserProfileID },
success: function (result) {
alert("OK");
},
error: function (result) {
alert("Error delete");
}
});
});
</script>
The problem in here data: { id: #item.UserProfileID }, . I can not get ID in here although when i show devtool chrome , i see <a class="fa fa-times btn btn-danger btn-xs" data-ajax="true" data-ajax-method="GET" data-ajax-success="ShowModal()" href="/Home/Index/P000000002" id="bt_del_profile"> Delete</a>
Can you tell me about this? and give me some advices.
Thank you.
Even though you are using #item.UserProfileID within your java script, it's actually asp.net. If you had this value coming from javascript, you would use it like data: { id: '12345' },
Which means your code should be data: { id: '#item.UserProfileID' }. That should fix your problem.
Some 'Ideas'
You can change your show modal like this.
<div aria-hidden="true" class="modal fade myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-footer">
<button type="button" id="bt_del_ok" class="btn btn-success btn-sm">Ok</button>
</div>
</div>
</div>
Then change your ShowModal like below.
function ShowModal(userProfileId) {
$(".myModal").prop('id', userProfileId);
$(".myModal").modal('show');
}
Then in delete event;
var userProfileId = $(".myModal").prop('id');
data: { id:userProfileId },