ng-show not triggered when input checkbox selected via javascript - javascript

I have an html page where clicking on a checkbox causes a new section of the page to become visible. The HTML looks like this:
<input id="formcheck" ng-model="collapseform" type="checkbox">Fill in the Test Form
<div id="mainformdiv" class="wizard-div" ng-show="collapseform">
<div>
<div class="main-block">
...and so on
</div>
</div>
</div>
This part works fine - by default that part of the page is hidden, and when I select the checkbox, the rest of the page appears. When I deselect it, the rest of the page is hidden again.
Further down on that same page there is a table, and when you select a node in that table it calls a controller function that causes some internal values to be set - this part works as well, so the controller seems to be set up correctly and all the functions can be called.
The problem I'm seeing is this: I want to add a bit to the controller function that gets called when the table node is selected, and what I want it to do is, in addition to setting the internal values (which it does correctly), also check the checkbox, and cause the hidden part of the page to be displayed in response. I thought if I checked the checkbox through the javascript that would accomplish this, so I added this to the internal value setting function:
if (document.getElementById("formcheck").checked == false) {
document.getElementById("formcheck").checked = true;
}
That kind of works - the checkbox does get checked off when that piece of code is called, however, unlike when I click the checkbox with a mouse, it does not seem to trigger the ng-show, and so the hidden part of the page is not made visible. Is there something else I need to do in order to make this work?
Thanks!

You should be able to change the value of the model. Since NgModel provides two-way binding, it watches the $scope variable as well.
For example do
$scope.collapseform = false
instead of
if (document.getElementById("formcheck").checked == false) {
document.getElementById("formcheck").checked = true;
}

Related

.attr('checked', true)Will Not Re-add on button click

I have a form with a 'Reset' button. When i select my radio button the data from my DataTable is passed and pre-pops my fields. This working fine and does in fact pre-populate the relevant radio button
JQuery
if (modifyRecordData.startTime == 'Anytime') {
$('#anyTimeRadioButton').attr('checked', true);
$('#specificTimeRadioButton').removeAttr('checked');
$('#startEndTimeFields').hide();
} else {
$('#anyTimeRadioButton').removeAttr('checked');
$('#specificTimeRadioButton').attr('checked', true);
$('#startEndTimeFields').show();
$('#startTimeHr').val(modifyRecordData.startTimeHr);
$('#startTimeMin').val(modifyRecordData.startTimeMin);
$('#endTimeHr').val(modifyRecordData.endTimeHr);
$('#endTimeMin').val(modifyRecordData.endTimeMin);
}
Data returned
Page loaded
Now the issue, if the user, after data load goes to update the details and selects the other radio button the hidden fields are displayed (again correct)
Then user clicks the 'Reset' button and it fails in the correct function
$('#resetButton').mousedown(function (event) {
buttonclicked = "Reset";
event.stopImmediatePropagation();
modifyRadioButtonSelection(modifyRecordData);
})
and then goes back to the initial loaded data and it does drop in the IF code above
Debuging
Then it re-hides the hidden section (which is correct) but it does not re-tick the radio button as expected.
If i dont have the following code in the IF it leaves the previously selected one checked although the data falls in the IF
$('#specificTimeRadioButton').removeAttr('checked');
No idea whats going wrong at all. I even tried adding the following the 'Reset' button function but it just will not re-check the correct `radio button
$('#anyTimeRadioButton').removeAttr('checked');
$('#specificTimeRadioButton').removeAttr('checked');
Historically, there's been a lot of ambiguity and confusion between three related but different concepts:
The value of the HTML attribute in the source code.
The value of the HTML attribute in DOM tree.
The value of the JavaScript property.
To address that, jQuery/1.6.1 introduced the prop() method, which I suggest you adopt.

LinkButton value lost on PostBack

I have a table that I'm creating rows/cells in the code behind, and adding various controls to each cell. There is also as submit button on the form.
One of the cells contains an SPLinkButton. I have a Javascript function that changes the innerText/textContent based on user action from the default value set in the code behind. Prior to clicking the Button to run code behind, the end user does see the updated text of the SPLinkButton.
When the submit button is clicked, this is the only control that reverts its value back to the default value during the button's postback. A Label/TextBox/DDL all preserve their values. If I wrap the control in IsPostBack, the cell the control is added to will be null (or if I wrap the entire table, there will be no rows). Note that I'm using the value of another item to uniquely append the SPLinkButton ID on a per-table row basis.
What is different about LinkButton/SPLinkButton and postback behavior?
EDIT: I converted the SPLinkButton to a TextBox, providing similar functionality. While I dislike the presentation compared to the textbox (look and feel, as well as the SPLinkButton would automatically expand the modal size when needed), it does function. I would love to get SPLinkButton working and go back to using it, if possible.

Javascript to enable, disable drop down menu in JSP file having Java code only, no HTML directly

Let me introduce the design.
Each field in a JSP is made by a Map.
The label name, the input type (drop down or other), the input values, the default values, etc are added to the Map, say Map nameAttributes.
There is another class, GeneralWriter writer, to which I do not have access, which takes the values from Map, parses them and writes the proper HTML code.
After writing the Map, writer.writeSelectBox(nameAttributes); is called.
Now, the requirement is:
There is a drop-down menu, depending upon its selected value, some other drop-down menus are disabled (shown in UI, but not modifiable) or enabled.
Since, I am not writing HTML code for the added field, I can not write the function call events to do my job.
I have observed that a JS function is called on onMouseOut event from the fields, as seen in "View Source".
So I thought I might write my code there to check the field value and impact other drop-down menus.
But if I write alert in the JS function (just to check), it won't alert me, means the function is not called and I can not write the enable/disbale code.
Is there any way to achieve the job. The enabling and disabling should depend on what user selects in one of the drop downs.
Sample code:
<%
Map nameAttr = new HashMap();
nameAttr.put(GeneralConst.INPUT_MESSAGE, Const.MSG_FIELD_NAME);
//.....
writer.writeAllSelectBox(nameAttr);
%>
Urgent help needed, thanks.
In View Source of the JSP page, its clear that for some fields onChange and onMouseOut events etc. were added, and in the GeneralWriter class, those things were being written out to the out stream as follows
out.println("<td nowrap><select name=" + strName);
out.println(" style=\"width:" + strWidth + "px\"");
out.println(" onChange ="+onChange);
So, I added my own method there rather than using existing code and introduced the onChange event. The "onChange" variable that you see (the right one) is of java.lang.String type and this had to be passed from the JSP itself, as to what behavior I want or which particular function to call for a particular JSP.
Now I added the following in JSP
<body>
<script>
window.onload = setModeForPara2('MEMBERTYPE','MEMBERSTATE','CKSTATUS') ;
function resetevent(uri){
setModeForPara2('MEMBERTYPE','MEMBERSTATE','CKSTATUS') ;
}
</script>
</body>
where the parameters are the names of the drop down menus, and setModeForPara2() is a JS function to disable/enable as my requirement was stated in original post. It checks if MEMBERTYPE is 0, then render disabled state and gray color to MEMBERSTATE and CKSTATUS drop-down menus, else enable them and remove gray color.
The resetevent(uri) is also a JS function called when the Reset button is clicked to render the disabled state to the State and Status fields.
So that way, setModeForPara2() function is called whenever:
1. the page is loaded,
2. the value of first drop-down (MEMBERTYPE) is changed, and
3. the Reset button is clicked.
Resolved.

jquery submit form once

I am trying to write a custom magento module and i've got it all complete and working perfectly except one problem.
The module is a form with 4 radio buttons. They are all blank on the checkout page and I have them set up so that when you click one it submits the form and reloads the cart page with the "additional fees" in the subtotal.
My problem is that I need the first option to "auto submit" on page load. But I've tried ALOT of different things and can't come up with a way to use the jquery .submit() function to ONLY submit the form once. as it is now it works how I want it, except it loads the page in an endless loop.
Any way to say submit() only once?
I'd set the default radio button server-side rather than having an extra submit/refresh cycle, but if you insist on doing it client-side...
I assume on subsequent refreshes the previous selection will be retained (because your server-side code echoes back the previously selected values?), so can you perhaps test whether any radios are checked and if not assume that that is the first and only time to auto-submit?
$(document).ready(function() {
var $radios = $('#yourFormId input[name="yourRadioButtonGroupName"]');
if (!$radios.is(":checked")) {
// No radios currently checked, so check the first and submit
$radios.eq(0).prop("checked",true);
$("#yourFormId").submit();
}
});
The .is() method will "Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments."

Checkbox not being checked when running function

I have a checkbox that when it is clicked it submits the form to the server to store the detail. All works fine except that after the form is submitted I update a div to say submitted but the checkbox isn't ticked. The page isn't refreshed of course and upon page refresh it is ticked.
I thought I might be able to check the box myself as I'm using jQuery but I have a lot of these checkboxes each with a dynamic name so I'm not sure how I would call them. I thought something like:
$('input[name=("favourite" + id)]').attr('checked', true);
might work but no luck. If I don't call the function on the checkbox being ticked the checkbox behaves normally.
Thanks for anything that could help.
You should break your string in order to introduce the value of the id variable into your selector, you can do it like this:
$('input[name="favourite' + id + '"]').attr('checked', true);
Try doing
$('input[name=("favourite" + id)]').checked = true;
instead.
The issue may be that setting the attribute is not automatically interpreted by your browser as changing the DOM property. This is a bit confusing, but on browsers like Firefox, etc, HTML attributes and DOM properties are stored separately (most are named the same, but there are exceptions - such as the class attribute being represented by the className property).
Changing properties affects the behavior of the Elements, while attributes do not always have the same effect - on some browsers they are only parsed during initial render.

Categories