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.
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.
I'm going crazy trying to figure this one out.
First, I'm using entity framework and models etc. So, in my view I'm looping through all my objects, every object has unique properties - one of these properties i want to send to my controller, which does some things, and then reloads the page.
My controller class is as follows:
public IActionResult Index()
{
return View(_context.Modules.ToList());
}
[HttpPost]
public IActionResult LoadModule(string packageName)
{
//... do some things here
return RedirectToAction("Index");
}
My view is as follows:
<div class="container">
<div class="row">
#foreach (var m in Model)
{
<div class='col-sm-4'>
<div class="card border-secondary mb-3">
<div class="card-body">
<div class="row">
<button class="btn btn-outline-primary" id="SendValue"
type="submit" value="#m.IntegrationPoint">
Execute Package
</button>
</div>
</div>
</div>
<br />
</div>
}
</div>
</div>
And my Jquery/Ajax:
<script>
$(document).ready(function() {
$("#SendValue").click(function(){
var val = $(this).val();
$.ajax({
type:"POST",
url: '/ExampleModuleController/LoadModule',
dataType: 'json',
data:{String:val}
})
.fail(function(){alert("fail")})
.done(function(){alert("success")})
});
});
</script>
A link to fiddle for easier view of html.
What am i doing wrong here? It doesn't even seem to register my button click or anything.
Add below code to your view
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Change the url: '/ExampleModuleController/LoadModule',into url: '#Url.Action("LoadModule", "ExampleModule")?IntegrationPoint=' + val ,
Also , in Controller, change the parameter name to string IntegrationPointin LoadModule action.
Note: Because the .fail(function(){alert("fail")}) in the front, so it will alert fail message.
result:
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.");
}
});
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 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 },