We Keep Coding

Show/Hide div Ajax Jquery

Kinda stuck a lot of hrs on this
but i cant find out .parent() or next() or .next All() for this
I want to show div named .SubQuestion on ajax success when .input-range slider value is something
Eveything work perfect except
$(this).next(".SubQuestion").show();
and
$(this).next(".SubQuestion").hide();
i can not find my div class display and css does not work
<div class="row">
<div class="col-9 my-1 input-ranges" id="range">
#{ var questionId = Model.QuestionAndAnswer[i].QuestionId;
var AcceptableScore = Model.QuestionAndAnswer[i].QuestionAcceptableScore;
}
#Html.TextBoxFor(model => model.QuestionAndAnswer[i].Ans_Score, htmlAttributes: new { #id = questionId, #tag = AcceptableScore, #class = "input-range", #min = "1", #max = "10", #step = "1", #type = "range" })
YourScore <span class="range-value">1</span>
</div>
<div class="col-3">
<a data-toggle="collapse" href="#ScoreComment_#i" role="button" aria-expanded="false" aria-controls="collapseExample">
<div class="fs-3x text-center text-info"><i class="la la-comment-o"></i></div>
</a>
</div>
<div class="col-12 bg-info SubQuestion" style="display:none">
<h1>Result</h1>
</div>
<div class="col-12">
<div class="collapse my-1" id="ScoreComment_#i">
#Html.TextAreaFor(model => model.QuestionAndAnswer[i].Ans_Score_Note, new { #class = "form-control p-1 w-100", #maxlength = "4000", #rows = "4", #placeholder = "توضیحات" })
</div>
</div>
</div>
<script>
$(function ($) {
console.log($.ajax);
$('.input-range').on('change', function () {
$(this).next('.range-value').html(this.value);
var questionId = $(this).attr("id");
var QAScore = $(this).attr("tag");
var rangevalue = $(this).nextAll('.range-value').first().text();
if (rangevalue < QAScore) {
$.ajax({
url: "/Question/GetSubQuestion",
type: "POST",
datatype: "json",
data: { QuestionId: questionId },
success: function (data) {
$(this).next(".SubQuestion").html(data);
$(this).next(".SubQuestion").show();
}
});
}
else {
$(this).parent().nextAll(".SubQuestion").hide();
}
});
});
</script>

Here was the solution
Thanks to #AndrewLohr
$(function ($) {
$('.input-range').on('change', function () {
$(this).next('.range-value').html(this.value);
let subQuestion = $(this).parent().nextAll(".SubQuestion").show();
var questionId = $(this).attr("id");
var QAScore = $(this).attr("tag");
var rangevalue = $(this).nextAll('.range-value').first().text();
if (rangevalue < QAScore && rangevalue!=10) {
$.ajax({
url: "/Question/GetSubQuestion",
type: "POST",
datatype: "json",
data: { QuestionId: questionId },
success: function (data) {
subQuestion.html(data);
subQuestion.show();
}
});
}
else {
$(this).parent().nextAll(".SubQuestion").hide();
}
});
});

jQuery unobstrusive validation fetch server response and display it

I have a form like following:
#using (Html.BeginForm("DoRegister", "User", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="inputBox">
#Html.TextBoxFor(m => m.FirstName, new { #class = "form-control", #type = "text", #aria_describedby = "emailHelp" })
<label>First name</label>
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger", #style = "float:right;" })
</div>
<div class="inputBox">
#Html.TextBoxFor(m => m.LastName, new { #class = "form-control", #type = "text", #aria_describedby = "emailHelp" })
<label>Last name</label>
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger", #style = "float:right;" })
</div>
<div class="inputBox">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control", #type = "email", #aria_describedby = "emailHelp" })
<label>Email</label>
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger", #style = "float:right;" })
</div>
<div class="inputBox">
#Html.TextBoxFor(m => m.Password, new { #class = "form-control", #type = "password" })
<label>Password</label>
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger", #style = "float:right;" })
</div>
<div class="inputBox" style="overflow: hidden;clear: both;height: 80px;">
<div class="g-recaptcha" style="padding-top:15px; float:left;transform:scaleX(1.385) !important;-webkit-transform:scaleX(1.385) !important;transform-origin:0 0;-webkit-transform-origin:0 0;" data-sitekey="somekey"></div>
</div>
<button type="submit" class="btnregister">Create Account</button>
}
For this form I've enabled jQuery unobstrusive validation where I added these script tags:
Bingo, it works like expected! Now I'm just missing the part where I wanna handle the response from the server when the form is submitted...
For example I have tried:
<script>
$(document).ready(function () {
$('form').submit(function (event) {
event.preventDefault();
if ($(this).valid()) {
var formdata = new FormData($(this).get(0));
$.ajax({
url: this.action,
type: this.method,
data: formdata,
processData: false,
contentType: false,
success: function (result) {
// element is div holding the ParticalView
alert("OK!");
}
});
}
return false;
});
});
</script>
In this part:
if ($(this).valid()) {
I'm getting an error:
Uncaught TypeError: $(...).valid is not a function
And these are the scripts that I've included:
<script type="text/javascript" src="~/siteContent/frontpage/js/jquery-3.2.1.min.js"></script>
<script src='#Url.Content("~/siteContent/js/jquery.validate.min.js")'></script>
<script src='#Url.Content("~/siteContent/js/jquery.validate.unobtrusive.js")'></script>
What am I doing wrong here??
Can someone help me out?

Once try js files position change
i) either top of body part
ii) end body part
if you are using Layout multiple time loades jquery-3.2.1.min.js file
first load js file and then put your validate.min.js,jquery.validate.unobtrusive.js

<script type="text/javascript" src="~/siteContent/frontpage/js/jquery-3.2.1.min.js"></script>
<script src='#Url.Content("~/siteContent/js/jquery.validate.min.js")'></script>
<script src='#Url.Content("~/siteContent/js/jquery.validate.unobtrusive.js")'></script>
Put your script here after you have referenced all the scripts.
<script>
$(document).ready(function () {
$('form').submit(function (event) {
event.preventDefault();
if ($(this).valid()) {
var formdata = new FormData($(this).get(0));
$.ajax({
url: this.action,
type: this.method,
data: formdata,
processData: false,
contentType: false,
success: function (result) {
// element is div holding the ParticalView
alert("OK!");
}
});
}
return false;
});
});
</script>
Hope it works :)

MVC AJAX post sending updated model data

I'm trying to send a post request to the Action with the Model data after the value of some of it's properties is changed :
#{
JsonSerializerSettings jss = new JsonSerializerSettings {
ReferenceLoopHandling = ReferenceLoopHandling.Ignore };
}
<div id="contents">
<!--Lead Stage-->
#if (Model.LeadStagesNav != null)
{
for (int i = 0; i < Model.LeadStagesNav.Count; i++)
{
#Html.HiddenFor(a => a.LeadStagesNav[i].PermissionId)
<div class="form-group" style="margin-bottom:10px">
#Html.Label("Lead Stage", new { #class = "col-md-2" })
<div style="display:inline-block;position:relative">
#Html.DropDownListFor(model => model.LeadStagesNav[i].Name, null, new { #class = "form-control", #style = "width:200px", onchange = "ChangeValue()" })
</div>
#if (ViewData["LeadStagesNav[" + i + "].LeadStatus"] != null)
{
<!--Lead Status-->
#Html.Label("Lead Status", new { #style = "margin-left:15px;margin-right:15px" })
<div style="display:inline-block;position:relative">
#Html.DropDownListFor(model => model.LeadStagesNav[i].LeadStatus, null, new { #class = "form-control", #style = "width:200px", onchange = "ChangeValue()" })
</div>
if (ViewData["LeadStagesNav[" + i + "].LeadSubStatus"] != null)
{
#Html.Label("Lead Sub Status", new { #style = "margin-left:15px;margin-right:15px" })
<div style="display:inline-block;position:relative">
<!--Lead Sub Status-->
#Html.DropDownListFor(model => model.LeadStagesNav[i].LeadSubStatus, null, new { #class = "form-control", #style = "width:200px" })
</div>
}
}
</div>
<!--Delete Button-->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Delete Lead Stage"
onclick="document.getElementById('index').value = #i"
name="submit" class="btn btn-default" />
<input type="hidden" id="index" name="index" />
</div>
</div>
}
}
</div>
<script type="text/javascript">
window.ChangeValue = function () {
var model = #Html.Raw(JsonConvert.SerializeObject(Model, Formatting.Indented, jss));
$.ajax({
method: "POST",
url: "/CmsPermissions/Edit",
data: { permission: model },
success: function (data) {
$("#contents").html(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
};
the thing is the The problem is that I get the old model data
posted to the Action instead of the
new data after the dropdown selected value has changed,
Anyone has any idea ?

that is because you are passing the old model as data
var model = #Html.Raw(JsonConvert.SerializeObject(Model, Formatting.Indented, jss));
you need to serialize your form and pass it an example is
function SubmitForm() {
var data = $("#YourFormID").serialize();
var url = "/YourURL/ACtion"
var form = $('#policyForm')[0]
var formdata = false;
if (window.FormData) {
formdata = new FormData(form);
}
return $.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: formdata ? formdata : data,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
error: function () {
$('#imgLoadingForPortal').modal('hide');
Lobibox.notify('error', {
size: 'mini',
rounded: true,
delay: false,
position: 'center top', //or 'center bottom'
msg: 'Something went wrong..please try again later',
sound: false,
delay: 5000,
});
}
})
}

Bootbox Dialog with Ajax Callback

I have this button on the UI where the customer will open a modal. The modal will load a partial view retrieved by Ajax.
$('#btnfeedback').on('click', function(e) {
e.preventDefault();
var debateModal;
$.get('#Url.Action("LoadFeedbackModal", "Home")', function() {
}).done(function(info) {
debateModal = bootbox.dialog(
{
message: info,
title: '<span class="fa fa-wechat"></span> Leave Feedback',
closeButton: true
});
debateModal.find('.modal-header').removeClass('modal-header').addClass('modal-header-info');
}).fail(function() {
debateModal = bootbox.alert({ message: "Problem try later", size: 'small' });
});
});
And this is my Controller:
[HttpGet]
public ActionResult LoadFeedbackModal()
{
return PartialView("Partials/_FeedbackModal", new FeedbackVm());
}
[HttpPost]
public ActionResult LoadFeedbackModal(FeedbackVm feedback)
{
try
{
var fb = Mapper.Map<Feedback>(feedback);
Db.Feedbacks.Add(fb);
Db.SaveChanges();
return Json(new { Mensaje = "Thanks for your feedback", Status = true }, JsonRequestBehavior.AllowGet);
}
catch (Exception exception)
{
return Json(new { Mensaje = "HUbo un problema :( Intenta luego", Status = false }, JsonRequestBehavior.AllowGet);
}
}
And this is my partial view:
#model TuGrietaLive.ViewModels.Admin.Index.FeedbackVm
#using (Html.BeginForm("LoadFeedbackModal", "Home", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<p>
Muchas gracias por tu Feedback. Para nosotros es muy importante.
<small>Si nos dejas tu correo te podemos contestar :)</small></p>
<div class="form-group">
#Html.LabelFor(m => m.FeedbackType, new { #class = "control-label col-md-2 col-xs-12" })
<div class="col-md-10 col-xs-12">
#Html.EnumDropDownListFor(model => model.FeedbackType, "Selecciona una Categoria", new { #class = "form-control", name = "FeedbackType" })
#Html.ValidationMessageFor(model => model.FeedbackType)
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2 col-xs-12">Email <small>(Opcional)</small></label>
<div class="col-md-10 col-xs-12">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control"} })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Comment, new { #class = "control-label col-md-2 col-xs-12" })
<div class="col-xs-12 col-md-10 ">
#Html.EditorFor(model => model.Comment, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Comment, "", new { #class = "text-danger", rows = 10 })
</div>
</div>
<button type="submit" id="btnsendFeedback" autofocus class="btn btn-block btn-success">
<span class="glyphicon glyphicon-envelope"></span>Enviar
</button>
</div>
}
I can successfully get the view and the modal draws the partial. Now I want to get the response of the server after submitting the form.
How can I get post action message? This code opens a new window with JSON object. I want to capture that and open a modal. This is killing me.

You should change button type of btnsendFeedback in your feedback dialog to button instead of submit:
<button type="button" id="btnsendFeedback" autofocus class="btn btn-block btn-success">
<span class="glyphicon glyphicon-envelope"></span>Enviar
</button>
and handle click event of btnsendFeedback upon receiving dialog content:
$('#btnfeedback').on('click', function (e) {
e.preventDefault();
var debateModal;
$.ajax({
url: '#Url.Action("LoadFeedbackModal", "Home")',
type: 'GET'
}).done(function (info) {
debateModal = bootbox.dialog(
{
message: info,
title: '<span class="fa fa-wechat"></span> Leave Feedback',
closeButton: true
});
debateModal.find('.modal-header').removeClass('modal-header').addClass('modal-header-info');
$('#btnsendFeedback').on('click', function (e) {
$.ajax({
url: '#Url.Action("LoadFeedbackModal")',
type: 'POST',
dataType: 'json'
}).done(function (result) {
console.log(result.Mensaje);
});
});
}).fail(function (xhr, status, error) {
debateModal = bootbox.alert({ message: "Problem try later", size: 'small' });
});
});

To begin, add an ID or class to your form so that we can hook into it's submit event:
#using (Html.BeginForm("LoadFeedbackModal", "Home", FormMethod.Post, new { #id="feedback-form" }))
Then you can use that selector to get the form:
var form = $('#feedback-form');
Alternatively, you could use find() to get the form from the modal:
var form = debateModal.find('form');
Next, add an event handler for the form's submit event:
form.on('submit', function(e){
});
You'll want to cancel the native event, and then use serialize() to prepare your AJAX data:
form.on('submit', function(e){
e.preventDefault();
var data = form.serialize();
});
Once you've done that, you can use $.post to submit the form data, handling it as you see fit:
form.on('submit', function(e){
e.preventDefault();
var url = form.attr('action');
var data = form.serialize();
$.post(url, data)
.done(function(response, status, jqxhr){
})
.fail(function(jqxhr, status, error){
});
});
Finally, put this all together in the shown.bs.modal event, so that it gets wired up once the dialog is visible:
debateModal.on('shown.bs.modal', function(){
var form = debateModal.find('form');
form.on('submit', function(e){
// prevent/cancel the native submit
e.preventDefault();
var url = form.attr('action'); // or use #Url.Action(), if you prefer
var data = form.serialize();
$.post(url, data)
.done(function(response, status, jqxhr){
/* Do what you need to with the response, and then close the modal */
debateModal.modal('hide');
})
.fail(function(jqxhr, status, error){
});
});
}

$.getJSON('#Url.Action("LoadFeedbackModal", "Home")').done(function(info) {
debateModal = bootbox.dialog(
{
message: info,
title: '<span class="fa fa-wechat"></span> Leave Feedback',
closeButton: true
});
debateModal.find('.modal-header').removeClass('modal-header').addClass('modal-header-info');
}).fail(function() {
debateModal = bootbox.alert({ message: "Problem try later", size: 'small' });
});
Suggest use getJSON instead of get, any question let me know.

send parameters to aspx webform codebehind method using ajax in asp.net mvc

I'm developing asp.net mvc 5 web application.
I want to send parameters to aspx web-form code-behind method using ajax in asp.net mvc
I have following aspx web page and relevant files
within that Incomplete_Prodcut.aspx.cs codebehind file I have webmethod which is
[WebMethod]
public static string OnSubmit(string type, string category, string country, string subsidary, string dateHERE)
{
return "it worked";
}
This is what I did upto now
.................
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group"></div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
#Html.LabelFor(m => m.Type, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(m => m.Type, Model.TypeList, "Select the type", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Type, "", new { #class = "text-danger" })
</div>
</div>
</div>
..............................
<div class="row">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" id="report" value="Generate Report" class="btn btn-success submit" />
</div>
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
................................
<script type="text/javascript">
$('#report').click(function () {
var type = $('#Type');
var category = $('#Category');
var country = $('#Country');
var subsidary = $('#Subsidary');
var dateHERE = $('#Date');
var dataValue = { type: type.val(), category: category.val(), country: country.val(), subsidary: subsidary.val(), dateHERE: dateHERE.val() };
$.ajax({
type: "POST",
url: "/Report/Incomplete_Prodcut.aspx/OnSubmit",
data: dataValue,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
},
success: function (result) {
alert("We returned: " + result);
}
});
});
</script>
}
but once I click "Generate Report" button Im getting following error
Internal Server Error