Disable Controls On My Page Displaying in Chrome - javascript

I've got a page where I'm using JavaScript to enable \ disable controls based on what is selected, such as:
var selectableItems = document.getElementById('holder_wizard_pnlSelectableItems');
selectableItems.disabled = true;
This works perfectly fine in IE, but in Chrome it doesn't do anything. I did manage to disable the options for a RadioButtonList with the code below, but can't seem to translate that into anything else.
$("#holder_wizard_pnlContactRequest :input").attr('disabled', true);
Ideally what I want to do is disable a button and a drop down list and be able to re-endable them. There are numerous posts recommending using CSS for this, but that is just a styling change. I actually want to enable / disable them properly within Chrome.
The controls I want to change the state of are a btnAdd and ddlProducts but nothing I seem to do alters them, then the code I posted adding the attribute didn't change the state of the button even though that is also seen as an input.

Try this..
document.getElementById("holder_wizard_pnlContactRequest ").setAttribute('disabled', true);
Or
document.getElementById('btnAdd').disabled='true';

Related

How to Remove Default Variant Option and Have Empty Radio Buttons

I apologize in advance as I'm not able to get the minimal amount of code possible, but I'm currently working on a Shopify site (that I didn't build) and I want to have no default variants selected. For example, if you go to this page https://thriveworkwear.com/products/carpenter-work-pants-5300-pro, you'll see that the default options are Color: Hickory Waist:30W Inseam:30L.
Is there a way to disable the default variant functionality? Meaning that no variants are selected and the user has to select them manually.
I tried to follow this guide https://help.shopify.com/en/themes/customization/products/variants/how-to-add-a-pick-an-option-to-drop-downs and this one but they DIDN't work.
I have also tried adding this:
document.querySelector('input[name="name0"]:checked').checked = false;
document.querySelector('input[name="name1"]:checked').checked = false;
document.querySelector('input[name="name2"]:checked').checked = false;
to the theme.js file but it didn't work. It seems to work if I add it through the console tab but not when I add it on the site.
Any help is appreciated.
It seems that the options are generated from the following APP: https://apps.shopify.com/best-custom-product-options
This means that everything is generated using Javascript that you may not have control over.
You will have to reveal the App if there is an option in it to disable the default selected options or if there is an event you can listen to when the App applies the options.
The final line is to use Mutation Observer and wait for HTML modifications in the form to fire your code, but this is the final approach if nothing else works.

How to select option with Javascript from web browser developer tools

I am trying to select a desired value from dropdown menu in browser developer tools with Javascript. The following picture shows the content of the page.
But whenever I select another value with code and then click the save button, the changes are not actually saved. When I select normally with my mouse and click the save button, it changes normally.
I have tried the following stuff. These seemingly changed the value of selected dropdown menu (it shows 2 when I write the code) but cannot be saved afterwards.
1- document.getElementById('channel24g_ctrl')[2].selected = true
2- document.getElementById('channel24g_ctrl').options.selectedIndex = 2
3- document.getElementById('channel24g_ctrl').options[2].selected = true
4- document.getElementById('channel24g_ctrl').options[2].click()
5- document.getElementById('channel24g_ctrl').options[2].setAttribute("selected", "selected");
document.getElementById('channel24g_ctrl').options[1].removeAttribute("selected");
I might have tried some other combinations of those above.
Only the fifth actually makes target option "selected" but it still doesn't work when save button is clicked. I am no expert with javascript or ember but I have done similiar things before with other websites and succeeded. So maybe the problem is with Ember Framework?
What else can I do?
Apparently, selecting an option alone is sometimes not enough. change() must be called after selecting the option in order to apply changes. The following piece of code made the trick:
document.getElementById('channel24g_ctrl').options[2].selected = true;
$(document.querySelector('#channel24g_ctrl')).change();
document.getElementById('wifi_wizard_save').click();
document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'

What is the correct way to re-enable an ASP.NET LinkButton after disabling it?

I have searched for two days now to find a solution to this problem and I can't seem to find anything that works for me. I have a LinkButton that is disabled when the page loads. I am disabling the button like this:
$("#BtnSubmit").prop("disabled", true);
$("#BtnSubmit").removeAttr("enabled");
When the user fills out all of the required fields, I am attempting to re-enable the LinkButton like this:
$("#BtnSubmit").removeAttr("disabled");
However, this does not work. I have looked at the generated markup, and it seems that the LinkButton has its href attribute removed when it is set to disabled. Simply removing the disabled attribute does not work. I have also tried adding the enabled attribute like this:
$("#BtnSubmit").attr("enabled", "true");
However, this doesn't work either.
What am I missing? The button is clearly being re-enabled from a design perspective. It goes from its disabled appearance to its enabled appearance just fine, but it doesn't get its href attribute back. I've tried manually adding the href, but that also doesn't work. Most of the solutions I've found just cover how to disable the button; none of them seem to mention anything about re-enabling it. Any suggestions?
It'd be good if you could provide us with your ASPX markup and its code behind in your post. There are many ways to disable/enable the button. Did you do it from via the server-side or client-side? My hunch is that you probably set Enabled property on your LinkButton to False, which explains why the href attribute was gone as well.
One approach you could consider is that you can register your client-side javascript code in Page_Load event, and when page reloads, the code will then be executed.
Something like this
var script = "$('#BtnSubmit').prop('disabled', true);";
ScriptManager.RegisterStartupScript(Page, GetType(), "mykey", "script", true);
Hope it helps.
I had a similar problem, not long ago. This worked for me:
$("#BtnSubmit").prop("disabled", true);
$("#BtnSubmit").prop("disabled", false);
Note that the HTML property was set like this on page load:
<input type="submit" id="BtnSubmit" disabled="disabled"/>

AspTokenInput Enable And Disable

I used AspTokenInput Which is used as AutoComplete TextBox to create Tags .
I use this Link To know How to Use it.
It's Works Fine For Me and give Result As I want.
Now I want to Make This Control Enabled or Disabled On a Button Click according To Condition.
I Use this on Button Click
AspTokenInput.Enabled = "False"
But it's not Working...
Your problem is that the jQuery Tokeninput field cannot be disabled serverside.
See (http://loopj.com/jquery-tokeninput/) for documentation on this library if you want to try and finagle the js on and off. At a glance, I don't see an enable/disable flag or method. You may need to dig into the ASPTokenInput library to see how it pulls its data source, and then enable/disable the plugin with:
$("#my-text-input").tokenInput("clear"); //disable
$("#my-text-input").tokenInput("/url/to/ASPTokenInput/Datasource/");//reenable
The problem with this approach is that it basically goes around the ASPTokenInput layer, which kind of defeats the point.
My secondary approach was to try a hack, but hiding the dropdown isn't the greatest solution (or even easy in this case), nor is having the check box swap the autocomplete input for another. Swapping text boxes is probably the simplest solution.

Safari Javascript Issue

I am currently working on a Javascript program for my company (Leader Technologies) that is used to register products for Logitech. The URL for that is :
http://wwwtest.onlineregister.com/logitechreg/
My program looks totally fine on everything single web browser (including IE 6) that I have tried except Safari 4. On Safari 4, after a location, language and product category have been selected, when the actual product menu is clicked (id=WHPR), the div responsible for displaying the product is shown, but the drop-down selections are still visible. On all other browsers, the drop-down and the possible selections inside it in hidden (which is the intended behavior.)
Directly, my question is can I hid this drop-down successfully in Safari 4 WITHOUT completely emptying out the drop down and then repopulating it with only the selected value? I would rather not do this if at all possible, but if it's the only way to accomplish my goal then I can change the site additionally.
I believe the problem is where I set the listeners on the <select>:
<select id="WHPR" class="ui-formulate-ignore" style="width: 280px; visibility: visible;" onchange="whprChanged(this);" onfocus="displaySelector(form, document.getElementById('WHPR')); document.getElementById('imageHolder').focus(); this.blur();" name="WHPR">
Thank you all very much for taking the time to help me. I really appreciate all the help available on this site.
-Brian J. Stinar-
Not to pick on your style, but attaching listeners inline like you're doing is not very clean. Why not take advantage of jQuery's ability to deal with any browser discrepancies? The page you refer to is already loading it.
See http://docs.jquery.com/Events/bind
I think it's some kind of a bug in Safari - for example if you do .focus() nof for the DIV but for another input element like a textfield, then after clicking the selectbox both would have the focus (or actually, the focus would stay in the selectbox and the textbox would only seem to have the focus by having thicker border than usual).
Anyhow quick and dirty methot to achieve the goal would be removing the selectbox from the page (display: none) and then bringing it back (display:inline).
replace the this.blur() with the following command
this.style.cssText='display:none';var select = this; window.setTimeout(function(){select.style.cssText='display:inline';},1);
If you don't use a delay then it doesn't work - the removal and retrieval of the element need to be in different scopes.

Categories