How to change RequiredField dynamically? - javascript

I have a dropdownlist and when I selected a value from it I am checking the value from another table and according to returning value I change the visibility of a layout item. Now I need to set it Required if it is visible(If the value from ajax is 3 or 5). How can I do it? Here is my ajax that set visible or not.
Edit: I want to set liGid required when in if condition.
`$.ajax({
type: "POST",
url: "TestPage.aspx/GetCode",
data: '{"XKod":"' + s.GetValue().toString() + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.d.GrupKodu == 3 || msg.d.GrupKodu == 5) {
fytbTab0.GetItemByName('liGid').SetVisible(true);
}
else {
fytbTab0.GetItemByName('liGid').SetVisible(false);
}
}
});`

Add the line
fytbTab0.GetItemByName('liGid').required = true;

Related

want to fethch value in hidden field from dropdown in js

From ddlCountryName dropdown i want fetch value in hdnCountryCode
function getWorkCenter() {
debugger;
var SelectedCountryCode = $('#ddlCountryName').val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "FocussedMktBenefit.aspx/GetWorkCenter",
data: '{"sPlant":"' + SelectedCountryCode + '"}',
dataType: "json",
success: function (data) {
var jsonProcessDetails = jQuery.parseJSON(JSON.stringify(data.d));
},
error: function (Result) {
alert("Error with AJAX callback");
}
});
}
Data also coming from .cs page using FocussedMktBenefit.aspx/GetWorkCenter but how to get in hidden field is problem.
<select id="hdnCountryCode" style="display:none;">
<option value="123">aaa</option>
<option value="456">bbb</option>
</select>
do you mean this ?
I guess you want to do something like this.
var jsonProcessDetails = jQuery.parseJSON(JSON.stringify(data.d));
$("hdnCountryCode").val(jsonProcessDetails);
Or if you are on aspx page and your Hidden field is runat="server" then
var jsonProcessDetails = jQuery.parseJSON(JSON.stringify(data.d));
$("[id$=hdnCountryCode]").val(jsonProcessDetails);

How do I prevent reset the select box after ajax post action?

I want to make the option I selected fix to after AJAX POST.
Currently I am doing the work manually.
I put the value at OnChange in the HiddenField,
and after doing AJAX POST, re-insert the value selected in "ddlUserCont".
<select id="ddlUserCont" onchange="ddlUserCont_Onchange(this);"></select>
function ddlUserCont_Onchange(obj) {
document.getElementById("<%=hidSelddlUserCont.ClientID %>").value = obj.value;
}
-> After AJAX POST action..
function btnTest_Click() {
// ... Some logic
$.ajax({
type: "POST",
cache: false,
url: "../../WebServices/WebService.asmx/GetTest",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
OnSuccess_GetTest(data, sTestVal);
},
error: function (request, status, error) {
console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
}
function OnSuccess_GetTest(response, sTestVal) {
var items = response.d;
// ... Some logic
var sSelPageName = document.getElementById("<%=hidSelddlUserCont.ClientID %>").value;
document.getElementById("ddlUserCont_" + sSelPageName).selected = "true";
}
Do I use UpdatePanel ?
Why is it getting reset? is the page reloading? or is some other script resetting it?
function OnSuccess_GetTest(response, sTestVal) {
var items = response.d;
// ... Some logic
var sSelPageName = document.getElementById("<%=hidSelddlUserCont.ClientID %>").value; // get the value from the hidden field
document.getElementById("ddlUserCont).value = sSelPageName; // set it on the select options element
}
Just make sure that select has an option child element with value=<sSelPageName> at the time.

Having issues on if-else statement on the text changed event

I have a little bit issue here on my html text changed event in regards with my if-else statement. Here's the scenario, I have the html layout below which has a dropdown list of all locations. Now, if type in your location on the input text box which has id of "#searchloc" it will query as you typed in and rebind the record list on the "#dropdownlist" div element. So my problem is, I want to rebind the "#dropdownlist" div element back to its default which shows all locations once I clear back or empty the "#searchloc" input textbox but the "#dropdownlist" div element remained clear or empty. Below I tried to use if-else statement to do this but I notice that under the else{...} statement it won't fire the function or even the alert method. How do I handle this type of issue in jquery?
HTML Layout:
<input type="text" id="searchloc" class="searchloc" onchange = "QueryLocation();" onkeydown="this.onchange();" onkeyup="this.onchange();" onkeypress = "this.onchange();" oninput = "this.onchange();" placeholder="Search Location" />
<div id="dropdownlist" data-bind="foreach: PopulateAllLocation" >
<div id="alllocationdiv" > <label id="listlocation" class="listlocation" data-bind="text: CityTown"></label></div>
</div>
jQuery:
// Change the dropdownlist result as text input change
function QueryLocation() {
if ($("#searchloc").val() != null) {
var dataObject = {
CityTown: $("#searchloc").val()
};
$.ajax({
url: '/OnlineStore/SearchLocation',
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: dataObject,
dataType: 'json',
success: function (data) {
self.PopulateAllLocation(data);
},
error: function () {
console.log('err')
}
});
}
else {
// Under this else statement won't fire any of this function...???
DisplayLocations();
alert("Textbox is empty...");
}
}
When you check for a value of an empty textbox in Javascript its not null its "" i.e empty string instead. So in your if condition the value is never equal to null, that is the reason the else part is never executed.
function QueryLocation() {
if ($("#searchloc").val() != "") {
var dataObject = {
CityTown: $("#searchloc").val()
};
$.ajax({
url: '/OnlineStore/SearchLocation',
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: dataObject,
dataType: 'json',
success: function (data) {
self.PopulateAllLocation(data);
},
error: function () {
console.log('err')
}
});
}
else {
DisplayLocations();
alert("Textbox is empty...");
}
}

model validation summary errors alert box is disabled on .hide()

I have a postcode finder on my mvc web application form which is optional. If I dont get a post code match I appened the .validation-summary-errors with my own custom error message. Once the error has been corrected I remove all instances of class postcode in .validation-summary-errors and apply the hide method. The problem is when hiding the validation-summary-errors div disables the validation popup to show other form errors when submitting the form.
my javascript code
$("#AddressFinder").click(function () {
var postcode = $("#Address_Postcode").val();
$(".postcode-error").remove();
$(".validation-summary-errors").hide();
if (!postcode) {
$(".validation-summary-errors ul").append("<li class='postcode-error'>Please include a postcode to search.</li>");
$(".validation-summary-errors").show();
}
else {
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
url: "/Postcode/GetAddress",
data: "{ 'postcode':'" + postcode + "' }",
success: function (data) {
if ($.isEmptyObject(data)) {
$(".validation-summary-errors").append("<li class='postcode-error'>There are no addresses matching your postcode</li>");
$(".validation-summary-errors").show();
}
else {
vm.addresses(data);
addressList.show();
}
}
});
}
});
how can i hide the valiidation-summary-errors div without it disabling when submitting the form to the controller?
Managed to fix my issue. Your not suppose to use hide() or show(). Just add or remove the validation-summary-validation.
$("#AddressFinder").click(function () {
var postcode = $("#Address_Postcode").val();
if (!postcode) {
$(".validation-summary-errors ul").append("<li class='postcode-error'>Please include a postcode to search.</li>");
$(".validation-summary-errors").removeClass("validation-summary-valid");
}
else {
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
url: "/Postcode/GetAddress",
data: "{ 'postcode':'" + postcode + "' }",
success: function (data) {
if ($.isEmptyObject(data)) {
$(".validation-summary-errors").append("<li class='postcode-error'>There are no addresses matching your postcode</li>");
$(".validation-summary-errors").removeClass("validation-summary-valid");
}
else {
vm.addresses(data);
addressList.show();
$(".postcode-error").remove();
$(".validation-summary-errors").addClass("validation-summary-valid");
}
}
});
}
});
This way you still get the model validation messeges working when the form is submitted.

Can not set value to element

Im trying to set a value to element (id ctl30_txtTextBox) in javascript.
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "IndexMask.aspx/AttachBarcodeFile",
dataType: "json",
data: params,
success: function() {
$("#<%= DummyPostbackButton.ClientID %>").click();
var someOtherName = "abc";
var element = document.getElementById("ctl30_txtTextBox");
element.Value = someOtherName;
alert(element.value.toString());
},
error: function(request, status, error) {
alert("Error attaching barcode file.");
}
});
Im getting the element, but the value is never set.
If i set a value on the page the alert is displayed with the correct value.
What am i doing wrong?
Javascript is case-sensitive, so it should be:
var element = document.getElementById("ctl30_txtTextBox");
element.value = someOtherName;
element.Value
that
v
is in lowercase. Javascript Value method name is .value method not .Value
You can use jQuery to do it:
$('#ctl30_txtTextBox').val(someOtherName);
It should work.

Categories