We Keep Coding

Trying to define function inside html of popModal jQuery library

I am trying to copy the functionality of JSFiddle#1 into my JSFiddle#2
Brief Description of above two fiddles:
1) JSfiddle #1 : When a user selects third option from the dropdown menu, it displays the alert popup.
2) JSFiddle #2: I have tried to plug in the JSFiddle #1 code into this fiddle inside the html: $('#name_status_popup_dialog').html(), as shown in the fiddle (commented lines of code) but it doesn't work. The reason I am putting it inside html: $('#name_status_popup_dialog').html(), is because it is responsible for displaying the HTML contents in the dialog. Here is the documentation of html parameter used in the popModal library. Am I defining the function for the popup dialog correctly inside html() for JsFiddle #2? Please advise. Thanks

It's as simple as putting the code outside of html callback. See this Fiddle.
jQuery(function($) {
var id_value;
$(document).on('change', '#change_name_statusName', function checkSelection() {
const change_name_statusNameVal = this.value
console.log("Am I in change listner?");
if (change_name_statusNameVal == "First") {
id_value = 1000;
} else if (change_name_statusNameVal == "Second") {
id_value = 2000;
} else if (change_name_statusNameVal == "Third") {
alert("Are you sure you want to select third option?");
id_value = 3000;
} else if (change_name_statusNameVal == "Fourth") {
id_value = 4000;
}
});
$("#change_name_status").click(function() {
$('#change_name_status').popModal({
html: $('#name_status_popup_dialog').html(),
onOkBut: function() {
var change_name_statusNameVal = $("#change_name_statusName").val();
if (change_name_statusNameVal == "First") {
id_value_ = 1000;
} else if (change_name_statusNameVal == "Second") {
id_value_ = 2000;
} else if (change_name_statusNameVal == "Third") {
alert("Are you sure you want to select Third option?");
id_value_ = 3000;
} else if (change_name_statusNameVal == "Fourth") {
id_value_ = 4000;
}
}
});
});
});
Also, notice that I attached the event listener on the document not the element itself since the element is dynamically generated.

Header is not highlighted in type to filter

I am using a type to filter textbox,where in yser type the data they want to highlight. The data entered in the textbox is then checked against the row in html table.
Row containing the typed data is shown and other rows are hidden.
My problem is that this works as expected but the trouble is that it hides the header.Is there any way that it shows the header along with the highlighted row?
Below is the Script I am using :
function Search() {
var value = $('input[id$="txtSearch"]').val();
if (value) {
$('#table-2 tr:not(:first:hidden)').each(function () {
var index = -1;
//$(this).children('td.hiddencls').each(function () {
$(this).children('td').each(function () {
var text = $(this).text();
if (text.toLowerCase().indexOf(value.toLowerCase()) != -1) {
index = 0;
return false;
}
});
if (index == 0) {
$(this).show();
}
else {
$(this).hide();
}
});
}
else
$('#table-2 tr').show();
}
Kindly provide your valuable suggestions..

Putting this at the end of the Search() definition should work
$('#table-2 tr>th').parent().show();
(I'm assuming the header row has th tags, instead of td)
Otherwise try this
$('#table-2 tr:first').show();

JavaScript Echo Var Within Double Quote

Okay,
Another novice type question.
I have this array within the head section on my website and want to use it inline JavaScript:
var MyVariable = {"chkboxid":"chkbox"}
chkboxid is a id of a checkbox input.
Now, while validating the checkbox input on form submit, neither this works
$("form#myform").submit(function () {
if ($(MyVariable.chkboxid).is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
Nor This (check the double quote at the variable)
$("form#myform").submit(function () {
if ($("MyVariable.chkboxid").is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
However, if I hardcode the checkbox input id, it works. I mean "input#chkbox" in place of MyVariable.chkboxid.
$("form#myform").submit(function () {
if ($("input#chkbox").is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
How can I use that variable instead of hard coding the input id?

You are missing the "#" before the ID:
$("form#myform").submit(function () {
var element = $("#" + MyVariable.chkboxid)
if (element.is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
}
Note however that chkboxid is the key, the actual ID of the checkbox should be the value:
var MyVariable = {"chkboxid": "real_id_here"}

please check below code.hope it will work
$("form#myform").submit(function () {
if ($("#chkboxid").is("checked")) {alert("checked");
} else {
alert("not checked");
}
});
thanks,Ripa Saha

How to show multiple text fields on button click one by one

I need to add 2-3 text fields on button click one by one, where 'L' is the ID of the textfield. I am trying this code, but instead of using jQuery I want to use simple javascript because I am implementing this code in a Joomla environment.
function WrapperScript () {
JQuery('#wrapper1 button').click(function(){
for (var i=1;i<=4;i++)
{
var id='#L'+i;
var setting = JQuery(id).css('display');
if (setting=='none')
{
JQuery(id).css('display', 'block');
break;
}
}
});
}

if you need to make the same script without using jQuery here is a sample
function WrapperScript () {
//use an appropriate getter for the button
var button = document.getElementblahblah
button.onclick = function(){
for (var i=1;i<=4;i++)
{
var id='#L'+i;
var element = document.getElementById(id);
var setting = element.style.display;
if ( setting=='none' )
{
element.style.display = 'block';
break;
}
}
}
}

Changing jqtransform radio button class via JavaScript

I am trying to get my jqtransform'd radio buttons to switch to "checked" via my rowover javascript that I was already using.
Here is the script for the row over effect without the jqtransform:
function selectRowEffect(object, buttonSelect) {
if (!selected) {
if (document.getElementById) {
selected = document.getElementById('defaultSelected');
} else {
selected = document.all['defaultSelected'];
}
}
if (selected) selected.className = 'moduleRow';
object.className = 'moduleRowSelected';
selected = object;
// one button is not an array
if (document.checkout_address.shipping[0]) {
document.checkout_address.shipping[buttonSelect].checked=true;
} else {
document.checkout_address.shipping.checked=true;
}
}
function rowOverEffect(object) {
if (object.className == 'moduleRow') object.className = 'moduleRowOver';
}
function rowOutEffect(object) {
if (object.className == 'moduleRowOver') object.className = 'moduleRow';
}
//--></script>
Currently if I click on the row, it will actually select the radio button in my form but the jqtransform does not reflect that so it still looks like it is not clicked. I tried adding something like
jqTransformRadio.addClass("jqTransformChecked");
My JavaScript knowledge is quite limited. Any help is greatly appreciated.

I think you can change the your selectRowEffect() function like this:
function selectRowEffect(object, buttonSelect) {
if (!selected) {
if (document.getElementById) {
selected = document.getElementById('defaultSelected');
} else {
selected = document.all['defaultSelected'];
}
}
if (selected) selected.className = 'moduleRow';
object.className = 'moduleRowSelected';
selected = object;
// Get checkbox element inside the row, then trigger the 'click' event.
$('.jqTransformRadio', object).trigger('click');
}
I haven't tested the code yet, but I think it will work