I have a MVC Web-Page containing 1 datepicker. After selecting the date, there is an AJAX call to the server providing the user a list of possible actions (being radio buttons)
The user can select a radio button but this cannot be deselected if the user wants.
I tried to fix this with some javascript code, but I cant seem the access those radio buttons when generated dynamically in a partial result by the AJAX call.
It is very important, the big problem is that the radio buttons are not present on the original form. and I think therefore I cannot access them.
$('#nameofradiobutton')
$('input[name='nameofradiobutton'])
$('input[type=radio])
$('input')
All these and many more are not working not even the last one addressing all input controls...
Any guidelines? starting points? tips? tricks?
Thanks!
Except for if the DOM element you are trying to access is in an iframe there shouldn't be any reason you can't access it. The only reason I can think of why you can't access it then is because you try to access it before it is added to the page so for example you have your ajax callback call a function dowork and it looks like this:
function dowork(){
//add the radio buttons
$('.myradiocontainer').append($('<input type="radio" id="value1" />'));
//you try to check it here but it doesn't work
$('#value1').prop("checked", true);
}
If this is the case then you can do this instead:
function dowork(){
//add the radio buttons
$radio1= $('<input type="radio" id="value1" />');
$('.myradiocontainer').append($radio1);
//you try to check it here and it works
$radio1.prop("checked", true);
}
$("#parent_element").on("click", "input[name=radio_button]", function(){
var radio_button = $(this);
});
Where parent_element is the parent of your radio button and is not dynamic (present when the dom is loaded). radio_button is the name of radio button. Variable radio_button holds the actual radio button element.
Related
I have values from one form that need to be transferred to another.
var manager = $('input[type=checkbox]:checked').val();
I'm capturing the value with this. and trying to send it to this.
$('input[type=checkbox]:checked').val(manager);
but I don't know what to put into the next set of jquery to transfer it over.
.val() works for strings/numbers but not checkboxes or radio buttons which I am trying to do.
Please advice.
Try jQuery prop() function to transfer the state of one checkbox to another.
Also use correct selectors. $('input[type=checkbox]:checked') will only select CHECKED checkboxes.
see this fiddle for an example: https://jsfiddle.net/iPirat/p5f07br4/
in this fiddle, the checkbox in the first form is selected similarly to what you did.
the checkbox insecond form is selected using an ID.
I have an edit form filled with jQuery Mobile inputs like Text-Inputs, Sliders, Checkboxes and Buttons.
When the form first shows, the content (Model) to be edited is fetched.
Before I start fetching, I disable all form elements to prevent the user from doing anything while the content (Model) is being fetched. Only the cancel button should work. "Disabled" means greyed out and not clickable for me.
After the form has finished loading, I enable the form elements again.
Currently, I can only do this by selecting each input type by itself.
//These inputs work with .prop("disable", "true")
//#save is an <button type="submit">
var normalInputs = $("input[type='text'], #save");
//JQM converts <input type="range"> to this
var sliders = $("input[data-type='slider']");
var checkboxes = $("input[type='checkbox']");
normalInputs.prop("disabled", "true");
sliders.slider("disable").slider("refresh");
checkboxes.checkboxradio("disable").checkboxradio("refresh");
For enabling, I even have to call the slider() and checkboxradio() initialization methods because I get an error otherwise (cannot call methods of xxx prior to initialization. attempted to call method enable)
Is there a method to correctly disable all of the jQuery Mobile inputs by using only one selector? A common way to disable/enable inputs?
You can use ui-state-disabled class to disable any element. This class is added by jQM to disabled with disabled="disabled" attribute.
It can be added to form.
$("#form").addClass("ui-state-disabled");
By element, i.e. input, it should be added to parent div as input are wrapped in div upon creation.
$("input").closest("div").addClass("ui-state-disabled");
Demo
I have a page with 10-25 checkboxes, for a User to choose from.
The checkbox Name and Value are unique to every User/choice and is handled appropriately in the backend.
So, without relying on those two properties, is it possible to create a simple "Uncheck all" button that will uncheck all the checked checkboxes?
I guess it's OK to use the ID attribute, I can add one to the template.
The page is built with HTML and JQuery 2.0.3
Here is a sample checkbox:
<input type="checkbox" name="10953734" value="82S1X93">
here is a small jQuery to solve your issue.
$("input[name='10953734']").prop("checked", false);
or if you want all check box inside a container to be unchecked
$("#containerID input[type='checkbox']").prop("checked", false);
Add a class to them:
$("input.myClass").prop("checked", false);
I'm trying to customize radio buttons with jquery.
I know there are tons of solutions working out there, but I need to set a different image for each radio button. This is needed because there is no label description, so each radio button must be styled to understand its meaning (example: two radio buttons, one with an image containing "$" and one "€" to check the preferred currency).
I'm creating a simple function called "Stylize" (actually I've tried it only on firefox, but I'll make it work up to IE6/7 and previous versions of major browsers).
By the way the function doesn't seem to work as expected, because it sets the checked attribute on all radio buttons, giving a weird result.
Here is the fiddle containing a simple example. I've analyzed the attributes with firebug. Actually it doesn't accept a different class name for each radio button, but this is the next step. As you can see the solution I'm working on is to wrap the radio button with an anchor tag and then bind a onclick event handler to select its radio button.
What can I do to make it work properly?
Thank you, Alex.
Here's a working example: http://jsfiddle.net/bFYW6/2/
Your problem was quite simple: You called var wrapper = $(radio).parent(); before actually wrapping the radio element. Therefore, .parent() referred to the <form> element, not the <a> that you went on to wrap the radio element in.
All I did was switch the order of those two lines and voila!
Another change you could make would be to the final line that actually binds the click event on the wrapper. Rather than:
$(wrapper).click(function() {
$(radio).attr("checked", true);
});
You could do:
$(wrapper).click(function() {
$(this).children().attr("checked", true);
});
By using $(this) in the above example, it will always find the radio element that is it's child. That allows you to then call the Stylize() function just once: Stylize("#radio1, #radio2"); or Stylize("input[type=radio]");.
Example: http://jsfiddle.net/bFYW6/6/
As a final point, you shouldn't use a capital 'S' for your Stylize() function. Beginning a function with a capital letter in JavaScript generally suggests that it is a constructor function for a class, which yours is not.
I have an html list. Within this list are a series of images, some information and a button. When the user clicks the button, I want a textarea and a button to appear below the associated image within the list. The user then fills out the textarea with some machine learning feedback and clicks the button to send a postback to the server.
How do I write Javascript that will appear on a button press, but is still at the same time associated with the parent image?
I would like an answer in straight Javascript, not jQuery, as I'm still learning Javascript. I'm using C# 4.0 and ASP.net.
I have several possible implementation ideas:
Create a Javascript function that writes html using Response.Write that contains the textarea and button. I couldn't use an asp:button so I don't really know how I would accomplish a postback.
Have a single hidden asp:button and asp:textbox that get populated when the magic appearing button is pressed. The magic button would pass an id to the asp:button and activate a click. I might need a hidden label to store the value of the id.
I think #2 is the best and probably easiest method, but I don't know the best way to make an appearing panel in Javascript.
If you want to use ASP.NET as well, add the textareas in a repeater-type control and surround the textbox elements in a simple tag. give each div a unique id which can be determined using the textbox ClientID property generated by .NET. Then, create a single javascript function that takes in an id as an argument and sets that element's visibiity to true or falase depending on its current state. This way you have only one javascript function that can handle showing or hiding any of your textboxes and your postbacks are still intact using ASP.NET postbacks.
Your javascript function would be something like...
function showHideTextBox(divID)
{
if(document.getElementById(divID).style.visibility == "visible")
{
document.getElementById(divID).style.visibility = "hidden";
}
else
{
document.getElementById(divID).style.visibility = "visible";
}
}
For your button that need to show or hide the textboxes, set their OnClientClick events to the function. For example...
string divID = "div" + myDynamicTextBox.ClientID;
btn.OnClientClick = "showHideTextBox('" + divID + "')";
Hope that helps!