Develop Reference

In Swashbuckle / Swagger; How do I hide a dropdown menu based on anothers selected value

I'm struggeling with this functionality of hiding a row based on a select:
<tr data-param-name="nodeGroup">
in web api, Program.cs:
app.UseSwaggerUI(options => {
options.InjectJavascript("/custom.js");
});
The javascript custom.js:
var providerSelect = null;
var nodeGroup = null;
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
// document ready
providerSelect = document.querySelector("[data-param-name='provider'] select");
nodeGroup = document.querySelector("[data-param-name='nodeGroup']");
if (providerSelect) {
providerSelect.addEventListener("change", function () {
var text = providerSelect.options[providerSelect.selectedIndex].text;
if (text == "EcoPlatform") {
nodeGroup.setAttribute("visibility", "visible");
}
else {
nodeGroup.setAttribute("visibility", "collapse");
}
});
}
}
};
The above does not work.
The page is not actually shown on readystate === 'complete'
providerSelect does not get populated before I click the downarrow on the "accordion". <noscript> is replaced on click.

Was solved like this:
document.addEventListener("change", function (event) {
var providerSelect = document.querySelector("[data-param-name='provider'] select");
if (event.target == providerSelect) {
var nodeGroup = document.querySelector("[data-param-name='nodeGroup']");
var selectedText = providerSelect.options[providerSelect.selectedIndex].text;
var dataset = document.querySelector("[data-param-name='datasetType']");
if (selectedText == "EcoPlatform") {
nodeGroup.style["visibility"] = "visible";
dataset.style["visibility"] = "visible";
}
else {
nodeGroup.style["visibility"] = "collapse";
dataset.style["visibility"] = "collapse";
}
}
});

Open a materialize modal not working with if codition

I want to open a modal window when some conditions are met. I looked for some code and tried to implement it however, it does not work for me.
I have a If condition also in place could that be the reason?
Complete JS code:
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
document.getElementById('btn').addEventListener('click',dostuff);
function dostuff() {
var userinfo = {};
userinfo.firstname = document.getElementById('nm').value;
userinfo.email = document.getElementById('mail').value;
userinfo.process = document.getElementById('process').value;
if (userinfo.firstname == "" || userinfo.email == "" || userinfo.process == "Choose your option"){
alert("Hello, \n\nAll Fields are required.\n\nPlease Select all the Fields.");
} else {
google.script.run.userClicked(userinfo);
document.getElementById('nm').value = "";
document.getElementById('mail').value = "";
var selc = document.getElementById('process')
selc.selectedIndex = 0;
M.FormSelect.init(selc);
document.addEventListener('DOMContentLoaded', function () {
var Modalelem = document.querySelector('.modal');
var instance = M.Modal.init(Modalelem);
instance.open();
});
}
}
Please focus on the below mentioned code as this is my real concern:-
document.addEventListener('DOMContentLoaded', function () {
var Modalelem = document.querySelector('.modal');
var instance = M.Modal.init(Modalelem);
instance.open();

After first click of radio button can not fire change event

My jquery change event of radio button not working after first click and does not give any error please help me. i stuck in this from last week.and also cant count proper value because of this problem.
$('input[name="emailing"]').change(function()
{
checkValue();
});
function checkValue(evt) {
alert('hi');
var package = $("#package_value").val();
var emailing = $('input[name="emailing"]:checked').val();
$('input[name="emailing"]').on("mousedown", function() {
var select = $('input[name="emailing"]:checked').val();
$("#selected").val(select);
}).on("mouseup", function() {
$('input[name="emailing"]').prop('checked', false);
$(this).prop('checked', true).checkboxradio("refresh");
});
var selected = $("#selected").val();
alert(selected);
var update = $("#update").val();
if(update != '')
{
var hiddenPackage = $("#hidden_pricing").val();
var hiddenRadion = $("#hidden_radio").val();
var totalValue = package - hiddenRadion;
if(emailing == 1)
{
$("#package_value").val('');
var value = Number(totalValue) + 38;
$("#package_value").val(value);
$("#hidden_package").val(value);
}
if(emailing == 2)
{
$("#package_value").val('');
var value = Number(totalValue) + 55;
$("#package_value").val(value);
$("#hidden_package").val(value);
}
if(emailing == 0)
{
$("#package_value").val('');
var value = Number(totalValue) + 0;
$("#package_value").val(value);
$("#hidden_package").val(value);
}
}
}

You should use delegate
$(document).delegate( "input[name='emailing']", "change", function() {
checkValue();
});

Use on() function with any element id instead of (document)
$(document).on('change', 'input[name="emailing"]', function() {
checkValue();
});

How to use variable in function after load PHP file in jQuery?

How to use variable "hotel" after load step-02.php file?
$(function () {
var hotel = [];
$('#forPrice').on('click', function() {
$('select').each(function() {
if($(this).val() > 0 && $(this).val() < 10) {
var room = {};
room["room"] = $(this).attr('room');
room["price"] = $(this).attr('price');
room["val"] = $(this).val();
room["html"] = $(this).parents(".selectRowRoom").html();
hotel.push(room);
}
});
console.log(hotel);
});
$('#forPrice').click(function () {
$('#Step-01').hide();
$('#Step-02').show();
$('.hiddenAndShow').hide();
$( "#Step-02" ).load( 'step_02.php' );
});
})
I need
room["html"] = $(this).parents(".selectRowRoom").html();
to show after loading step-02.php.
step-02.php:
<div class="thisRoom">
// Insert room["html"] = $(this).parents(".selectRowRoom").html();
</div>

jQuery load() is a shortcut for $.ajax, which is asynchronous, you have to wait for the result to be able to access it.
Luckily load() has a callback that fires when the content is inserted and ready for accessing
$(function() {
var hotel = [];
$('#forPrice').on('click', function() {
$('select').each(function() {
if ($(this).val() > 0 && $(this).val() < 10) {
var room = {};
room["room"] = $(this).attr('room');
room["price"] = $(this).attr('price');
room["val"] = $(this).val();
room["html"] = $(this).parents(".selectRowRoom").html();
hotel.push(room);
}
});
console.log(hotel);
});
$('#forPrice').click(function() {
$('#Step-01').hide();
$('#Step-02').show();
$('.hiddenAndShow').hide();
$("#Step-02").load('step_02.php', function() { // callback here
$("#Step-02").find('.thisRoom').html(JSON.stringify(hotel));
});
});
});

Make hotel global and save key number of room in data attr. Like this :
$(function () {
window.hotel = []; // new
$('#forPrice').on('click', function() {
$('select').each(function() {
if($(this).val() > 0 && $(this).val() < 10) {
var room = {};
room["room"] = $(this).attr('room');
room["price"] = $(this).attr('price');
room["val"] = $(this).val();
room["html"] = $(this).parents(".selectRowRoom").html();
$(this).data("numRoom", hotel.length); // new
hotel.push(room);
}
});
console.log(hotel);
});
$('#forPrice').click(function () {
$('#Step-01').hide();
$('#Step-02').show();
$('.hiddenAndShow').hide();
$( "#Step-02" ).load( 'step_02' );
});
})
//After :
hotel[$(this).data("numRoom")]["html"] = $(this).parents(".selectRowRoom").html();

detect when 2 calendar values changed

I am making a financial report where user choose 2 dates search_date1 and search_date2, and then a monthly report is generated.
I created first a daily report with only one calendar and when it is changed I apply some AJAX script to it and it works correctly:
var myApp = {};
myApp.search_date = "";
document.getElementById('search_date').onchange = function (e) {
if (this.value != myApp.search_date) {
var d = $("#search_date").val();
$.ajax({
...
});
}
}
Now I can't know how to detect if both calendars are changed to apply AJAX script according to their values.
EDIT
Is it correct to do the following:
var myApp = {};
myApp.search_date1 = "";
myApp.search_date2 = "";
document.getElementById('search_date1').onchange = function (e) {
if (this.value != myApp.search_date1) {
var d1 = $("#search_date1").val();
document.getElementById('search_date2').onchange = function (e) {
if (this.value != myApp.search_date2) {
var d2 = $("#search_date2").val();
$.ajax({
...
})
}
});
}
});

try this:
var temp = {
from: null,
to: null
}
document.getElementById('from').onchange = function(e){
temp.from = e.target.value;
goAjax();
}
document.getElementById('to').onchange = function(e){
temp.to = e.target.value;
goAjax();
}
function goAjax(){
if(temp.from && temp.to && new Date(temp.from) < new Date(temp.to)){
//do ajax call
console.log('valid')
}
}
<input type="date" id='from'/>
<br>
<input type="date" id='to'/>

I would have captured the change event for both elements :
$("#search_date1, #search_date2").on('change',function(){
var d1 = $("#search_date1").val();
var d2 = $("#search_date2").val();
$.ajax({...});
});

What you do in your edit may work, but it would be better (and easier) do something like this
var myApp = {};
myApp.original_search_date1 = $("#search_date1").val();
myApp.original_search_date2 = $("#search_date2").val();
myApp.search_date1 = $("#search_date1").val();
myApp.search_date2 = $("#search_date2").val();
document.getElementById('search_date1').onchange = function (e) {
if ($("#search_date1").val() != myApp.search_date1) {
myApp.search_date1 = $("#search_date1").val();
sendAjax();
}
});
document.getElementById('search_date2').onchange = function (e) {
if ($("#search_date2").val() != myApp.search_date2) {
myApp.search_date2 = $("#search_date2").val();
sendAjax();
}
});
function sendAjax() {
if (myApp.original_search_date1 !== myApp.search_date1 &&
myApp.original_search_date2 !== myApp.search_date2) {
$.ajax({
...
});
}
}

Cant you just set a variable to check if its been changed with true/false then run the script if both variables are true.
Something like,
var searchOneToggled = false,
searchTwoToggled = false;
$('#search_date_one').on('input', function() {
searchOneToggled = true;
runYourFunction();
});
$('#search_date_two').on('input', function() {
searchTwoToggled = true;
runYourFunction();
});
function runYourFunction() {
if(searchOneToggled === true && searchTwoToggled === true) {
alert('hello world');
}
}