Develop Reference

JQuery Radio Button checked and change event

In my ASP.NET MVC application there are two radio buttons and one combo box.
Someone clicked to radiobutton 1, combo box load some data. If clicked to the radiobutton 2, loads different data to the combo box. Script was written using the ajax.
The code is working fine when User click changed the radio buttons. But for some users I have hidden the radiobutton 2. So for them only radiobutton 1 is visible, But at that situation, there is no data loaded to the combo box.
Want to know that also, If there is radiobutton checked when load the view, need to get related data to the combobox.
$(function() {
$('[id*=ddlTopEmployees]').select2().next().hide();
$('[id*=Approve_Type]').change(function() {
setDropDownProductsA($(this).val())
});
});
function setDropDownProductsA(xVal) {
try {
$("#ddlEmployees").empty().trigger("change")
$.ajax({
url: '../FindProductTypes',
type: 'POST',
dataType: 'json',
cache: false,
async: false,
data: {
AppLvlId: xVal
},
success: function(data) {
if (data.Success == true) {
$("#ddlEmployees").select2({
width: '100%',
data: JSON.parse(data.items)
});
}
}
});
} catch (err) {
console.log(err.message)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

use click instead of change
$('[id*=Approve_Type]').click(function() {
setDropDownProductsA($(this).val())
});

Automatically select the option in jquery select2, if only one option is present in dropdown, without clicking it, on page load

I have written the following select2 code:
$('#dropdownElem').select2({
placeholder: 'Select From Dropdown',
allowClear: true,
ajax: {
quietMillis: 10,
cache: false,
dataType: 'json',
type: 'GET',
url: function(){
return '/api/'
},
data: function (params) {
return {
model__icontains: params.term
};
},
processResults: function(data) {
if (data['modelDocs'].length == 1) {
$("#dropdownElem").append($("<option />")
.attr("value", data['modelDocs'][0].id)
.html(data['modelDocs'][0].text)
).val(data['modelDocs'][0].id).trigger("change");
}
return {
results: $.map(data['modelDocs'], function(obj) {
return {
id: obj.id,
text: obj.modelDoc
};
})
};
},
},
});
$('#dropdownElem').trigger("change.select2");
Now what I want to do is if the options returned by ajax call are only one then I should make that option selected automatically and if it is greater than one then the user can select the required by clicking.
For a single option I want it to be selected automatically without clicking. When I console logged the processResults it is being called only on clicking the dropdown and not on loading the page widget where this dropdown is shown.
How can I get the desired result?

Since I could not find a way to trigger click on select2 on page load, my solution was to add these lines on page load or whenever the widget containing that select2 is called in a function:
$('#dropdownElem').select2('open');
$('#dropdownElem').select2('close');
So since I am checking the length of options in processResults, I had to trigger click and close functionality on the dropdown.
select2 has methods open and close to replicate almost the same for my use case.

Triggering event on clicking OK button in Jquery Modal dialog box

I am trying to display a dialog box with just an OK button on response of an ajax call. When the user clicks OK, it should reload the page. But now page reload is immediately happening after the dialog box is popped up. It is not waiting for the user to click OK. FYI I am using Jquery Modal dialog box.
Simple browser alert() does the job for me, but I don't like the appearance of alert().
Any help is highly appreciated!
$.ajax({
url: "modules/mymod/save.php",
type: "POST",
data: $('#requestForm').serialize(),
statusCode: {404: function () {alert('page not found');}},
success: function (data) {
// alert(data);
modal({type: 'alert', title: 'Alert', text: data});
window.location.href = window.location.href;
}
});

Reference:
$.ajax({
url: "modules/mymod/save.php",
type: "POST",
data: $('#requestForm').serialize(),
statusCode: {404: function () {alert('page not found');}},
success: function (data) {
// alert(data);
modal({
type: 'alert',
title: 'Alert',
text: data,
buttons: [{
text: 'OK', //Button Text
val: 'ok', //Button Value
eKey: true, //Enter Keypress
addClass: 'btn-light-blue btn-square', //Button Classes
onClick: function() {
window.location.href = window.location.href;
}
}, ],
center: true, //Center Modal Box?
autoclose: false, //Auto Close Modal Box?
callback: null, //Callback Function after close Modal (ex: function(result){alert(result);})
onShow: function(r) {
console.log(r);
}, //After show Modal function
closeClick: true, //Close Modal on click near the box
closable: true, //If Modal is closable
theme: 'xenon', //Modal Custom Theme
animate: true, //Slide animation
background: 'rgba(0,0,0,0.35)', //Background Color, it can be null
zIndex: 1050, //z-index
buttonText: {
ok: 'OK',
yes: 'Yes',
cancel: 'Cancel'
},
template: '<div class="modal-box"><div class="modal-inner"><div class="modal-title"><a class="modal-close-btn"></a></div><div class="modal-text"></div><div class="modal-buttons"></div></div></div>',
_classes: {
box: '.modal-box',
boxInner: ".modal-inner",
title: '.modal-title',
content: '.modal-text',
buttons: '.modal-buttons',
closebtn: '.modal-close-btn'
}
});
}
});

Because your reload runs irrespectively of what is clicked. If you want to assign a callback function to the modal window:
jQuery UI dialog with boolean return - true or false
Also, there is no need to make location.href equal itself (or use the window object). location.reload() works just as well.

You can pass the dialog modal buttons attributes, each with a registered event, like this:
$.ajax({
url: "modules/mymod/save.php",
type: "POST",
data: $('#requestForm').serialize(),
statusCode: {404: function () {alert('page not found');}},
success: function (data) {
$("#dialog-confirm").dialog({
resizable: false,
height: 200,
modal: true,
buttons: {
Proceed: function() {
window.location.href = window.location.href;
},
Cancel: function() {
// Cancellation code here
}
}
});
}
});

Simple browser alert() does the job for me because alert() is an blocking call. If you omit the alert then your code is not bind with any event to check whether user clicked on a button or not, that's why the code block executes immediately and page reloads.
So bind the following code:
window.location.href = window.location.href;
inside some button click, to resolve the issue.

dont use window.location function in success.instead open the modal with ok button at success(how to do that, I think you know already) and assign some id to that button let say id="loction_btn".
then use just this
$('document').on('click','#location_btn',function(){
window.location.href = window.location.href;
});

X-Editable Save With A Custom Button

Here is a link to my fiddle:
https://jsfiddle.net/v58breo8/1/
I was wondering if id was possible to save my updated input to the page by clicking the save button. If you try to edit and then click save then the text will not have been changed.
I would also like the user to only be able to save their text when they hit the save button, right now if you hit enter after editing then it will act normally and the text will change.
Here is my JQuery:
$.fn.editable.defaults.mode = 'inline';
$.fn.editable.defaults.showbuttons = false;
$.fn.editable.defaults.type = 'text';
$('#edit-btn').click(function(e){
e.stopPropagation();
$('#username').editable('toggle');
$('#edit-btn').addClass('hidden');
$('#save-btn').removeClass('hidden');
});
$('#save-btn').click(function(){
$('#username').editable({
success: function (response, newValue) {
return $.ajax({
type: 'POST',
data: { user: newValue},
url: '/post'
});
},
name: 'username',
pk: 1,
placement: 'top',
type: 'text',
toggle: 'manual'
});
$('#edit-btn').removeClass('hidden');
$('#save-btn').addClass('hidden');
});

Dialog does not do autoposition

I use dialog from jQuery UI. On my website, content of the dialog is changing dynamically (custom autocomplete of typed text). I already set css max-height: 90%; on dialog, so on a long content, dialog should be fully visible. But, when dynamic content as automplete is generated, dialog is resized, but still in same position, so 40% of content is not visible, it os out of screen. How can I fix that, when long content is generated, dialog will be autpositioned to the middle of screen?
EDIT 1:
Here is litle part of code from my website:
$.ajax({
cache: false,
type: 'GET',
'url': URL_SAVE.expandVariables({}, {
'pres': self
}),
success: function(data) {
var label = $('<label>Open file:<label>').appendTo(dialogElement);
dt = data;
input = $('<input type="text" />').appendTo(dialogElement).autocomplete({
source: data,
autoFocus: true,
minLength: 0
});
dialog.open();
}
});
Here is demo, what is so similar to original jsFiddle
EDIT 2:
This is initialization code for dialog:
var dialogElement = $('<div></div>'),
input, dt, self = {
serverEditor: server('editor')
}, dialog = new Dialog(dialogElement, 'Open', {
'saveable': 'Open',
'width': 400,
'saveOnlyIf': function() {
return dt.has(input.val());
},
'ifNotSaved': function() {
alert('Please choose correct file name!');
}
}).on('save', function() {
$.ajax({
'type': 'GET',
'url': URL_SAVE.expandVariables({}, {
'pres': self
}) + input.val(),
'success': function(data) {
Presentation.unserialize(data);
}
});
});