Using jQuery to hide drop-down, but it fails - javascript

There are two drop-downs i'm using in my document. One is visible, one i have to hide. Below is the script I have used to hide the drop-down:
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('span[ds="Product Plan Type"]').css('visibility', 'hidden');
});
</script>
Using the above code: initially the drop-down disappears, but if another drop-down is used to select any other option, when processed for that, the page refreshes and shows the drop-down back.
Could anyone suggest something?

if your second drop down is not required during first load then you can set them hidden in code itlsef like
<asp:DropDownList runat="server" style="visibility:hidden">
</asp:DropDownList>
now as per your statement second drop down get filled base on first value selected (during page load)
so you can place javascript code where you can check if value =Product Plan Type
then you can how second drop down by javascript or you can do that using server side as well

use css display on element which you have hide
style="display:none"

Related

Disable Dropdown until Page has Loaded - Javascript

I am having an issue with a couple of my pages.
Essentially I am using JQuery to display followup questions using SlideDown. In addition to this, after clicking the Q2 radio button, we make a JSON request to get the drop down values for Q3.
However if you select the drop down value before the page has completed loading, on selecting the radio on Q2, Q1 dropdown clears back to empty.
I have tried moving all the javascript code to the top to no avail. This is not a problem if the page has completed loading however.
Is there a way to disable or hide the dropdown until the page has fully loaded?
Cheers
Ryan
Working DEMO
Initially set disabled property in HTML:
<select id="dropdown" style="width:200px;" disabled>
<option value="feedback" name="aft_qst">After Quest</option>
<option value="feedback" name="aft_exm">After Exam</option>
</select>
on dom ready use following to remove disabled property.
$(document).ready(function(){
$("#dropdown").prop("disabled", false);
});
You should use the ready function of jQuery, what you put inside will be executed when the DOM is fullly loaded
$(function() {
// Enable your dropdown
});
more info:
http://api.jquery.com/ready/

How to change selected attribute via javascript

I have an issue that I'm trying to solve. Need some advice to the right direction:
With Prestashop when creating combinations, you have a dropdwon-list on product page where customer can choose the combination from. Here within the product.tpl file I have created some extra button to get customers attention for a certain combination. Now I would like this combination beeing automatically selected and activated when user clicks on that button. I have inputted some javascript code within the product.tpl file which is also hiding some other elements when button is clicked. I just dont get it to work that a certain attribute option is selected on mouseclick. Someone may have some clue to solve this??
This is the select option list of the attributes within product page. For example I want on button click choose option "Large" and beeing activated within product page via onclick function with help of jquery/javascript within the template. How to achieve this?
<select id="group_4" class="attribute_select selectBox" onchange="findCombination();getProductAttribute();$('#wrapResetImages').show('slow');;" name="group_4" style="display: none;">
<option title="Small" selected="selected" value="21">Small</option>
<option title="Medium" value="41">Medium</option>
<option title="Large" value="40">Large</option>
<option title="Extralarge" value="25">Extralarge</option>
I have tried with this but it doesn't work:
$('#group_4 option[value='58']').attr('selected', 'selected').change();
Your quotes are wrong, looking at the console you would get the error Uncaught SyntaxError: Unexpected number
$('#group_4 option[value='58']').attr('selected', 'selected').change();
^ ^
should be
$('#group_4 option[value="58"]').attr('selected', 'selected').change();
To change the selected option, you can simply change the value of the select element using plain JS:
document.getElementById('group_4').value = 58;
You'd still need to trigger the change event after that, though.
See a simple example here: http://jsfiddle.net/BgBGL/1/ (uses alert as onchange callback)

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.

Select Control Populated from JavaScript Returns Empty Value

In my ASP.NET applications, I have a server-side HTML select control.
<select id="CompanyDropDown" runat="server" style="width:330px">
</select>
I then have a link on my page that runs a JavaScript function that populates this control, and also selects the "current" item. I can see this is working because the list has all the items and the correct one is selected.
However, when the page posts back in response to a button click.
<asp:Button runat="server" ID="btnSaveCompany" Text="Save"
onclick="btnSaveCompany_Click" />
CompanyDropDown.Value is empty, and it contains no items. Any suggestions on how I can see the selected value on postback?
(Note: I tried using an ASP.NET DropDown control, but that fails postback validation when the control has items that were added after the page was rendered.)
Because items added to the list using JavaScript aren't part of the viewstate, they cannot be retrieved server side. If you are only trying to get the selected value, put a server-side hidden field on your page and set its value using JavaScript each time the selection of the drop-down is changed:
jQuery script:
$('#CompanyDropDown').change(function() {
$('#inpSelectValue').val($(this).val());
});
Hidden field markup:
<input runat="server" id="inpSelectValue" clientidmode="static" type="hidden" />
The value of the hidden field will be carried to the server on post back. Refer to it to retrieve the value of the selected item. Be sure to add clientidmode="static" to your drop down as well to keep the rendered id of your controls set to the id you assign in the ASPX page (i.e., CompanyDropDown rather than parentContainer_CompanyDropDown):
<select id="CompanyDropDown" runat="server" style="width:330px"
clientidmode="static" />
Alternatively, you could use AJAX to tell the server you are adding each dynamically generated list item or changing the selection. I would only do this if you needed to maintain a list of items in addition to which one is selected.
The values manipulated in JS can't be retrieved on the server-side and can't be retained on postback. You can put the SelectedValue in a hidden field. On page postback you have to set the SelectedValue again that you save in the hidden field.
You can use Request.Form[CompanyDropDown.UniqueID]. This will work without hidden field.

asp.net mvc javascript disable show and hide div

ok the thing is that i have a div which show and hide based on the apply button.
1) if you press the apply button and the div is hidden it shows,
2) if the div is shown then it is hidden.
I am using javascript function . how can i make it shown if the javascript is disabled ?(by default it is hidden)
use this code whtever u want to do when ur js is not enabled write in
<script type="text/javascript">
document.write("<p>JavaScript is enabled.</p>");
</script>
<noscript>
JavaScript is not enabled or not supported.
</noscript>

Categories