Checkbox initialization (Materialize) - javascript

I have a empty page where i dinamically add the element, i'm tryng to use materialize and i have a graphic problem...
I have follow the different tutorial on "http://materializecss.com/" to add the element with the correct method, but i have a problem with checkbox...
If i add the checkbox directly on the HTML page i have some graphic effect on checking and unchecking checkbox, but i must add it with javascript/jquery (dinamically) and i lost the graphic error.
On the website there is some initialization function to solve similar problem, but there isn't a initialization function for checkbox...
Someone say how to manually initialize checkbox with Materialize?
ty!
edit:
i have id and for on my checkbox...
sorry gor difficult code but it it's everithing dinamically added...

You have to have <span> right after your checkbox. Thing is that all magic about creating nice checkbox happens inside of span rather than input itself.
So here is minimal structure of HTML to get fancy checkbox in Materialize
<input type="checkbox" />
<span></span>

When you add them dynamically, do you also add the for attribute in the label for the checkbox? Per Materialize's documentation for Checkboxes:
The for attribute is necessary to bind our custom checkbox with the input. Add the input's id as the value of the for attribute of the label.
An ID should be unique within a page.

Related

Creating input text field on marked checkbox in JQuery

I was asked to do something particular, and after trying I eventually found this site https://codepen.io/elmahdim/pen/hlmri from which I'm using the JQuery. I however don't have any knowledge of it so I only understand in parts. What I'm trying to do is upon marking a checkbox an input type="text" appears below it, so if I check 3 results, input type="text"creates 3 fields, etc, and if I uncheck a checkbox, the camp gets deleted.
I've tried to do it by adding
$("div bb")
{
$('<input type="text" id="textbox" style="width:170px;"/><span> CHF <span>');
}
after $(".hida").hide();but as I have no knowledge of JQuery it obviously didn't work and I don't really know what now. Also before that input, is it possible to add some sort of variable that is "attached" to the input so I can specificy what that input is for? Like if I check "Mercedes" in the checkbox, the input type="text" is created and above it the name "Mercedes" then if I check "BMW" it makes another input type="text" with BMW written above it?
Also wruting the code like this $("div bb") { for some reason disabled the $. Not sure why.
One solution:
create an empty element in your html where the input fields
should appear (e.g. <div id="textfields"></div>)
find the "on-checkbox-click-event-handler", which happens to be this line in the jquery: $('.mutliSelect input[type="checkbox"]').on('click', function() {
add code to the handler at the correct location, to append/delete a text box (difficult if you don't know jquery at all). The correct location is where jquery looks for the "checked-state" of the checkbox. Use $().append() to create the text field and $().remove() to remove on unchecking the checkbox. Should be something like $("#textfields").append("<input type='text'/>"); you will need to add a class to the input field to later address it when removing.
Working pen:
https://codepen.io/anon/pen/gRdmXj
Happy coding!

How do I return a selected value from a complicated dropdownlist in MVC?

My dropdownlist works like a treeview. Since, I cant seem to figure out if Html.DropDownListFor does this, I am having to do it the old fashioned way. Here is my code.
View:
Controller:
How do I get the selected value (LocationId) back to my controller? id="locSelection" in the view, brought in as object selection in the controller. Thank you:)
First of all it's not a old fashioned way it's the bootstrap way of replicating dropdown
Second of all it's not a drop down element...
Since this contains only ul and li tags and those are not of input type you cannot post back the values...
Also another problem in the code is you are setting the ID locSelection on multiple elements and that too in a loop .. So you will have a whole lot of elements with the same ID which is a Big NO. The Id's must be unique else it's a nightmare when we start using Jquery on these elements...
Solution -- Use Jquery
Remove the Id's
Add a class to all the anchor tags eg: locSelection
Maintain a hidden input field inside your form. We will use this hidden input field to post back the data on form submit.
<input type='hidden' name='locSelection' id='locSelection' />
Now bind a click event to the anchor tag inside the li and inside this event put that Clicked anchor tag text value into the hidden input.
$('.locSelection').on('click',function(){
$('#locSelection').val($(this).text());
});

change form based on drop down menu selection

I'm having trouble finding javascript, HTML and/or CSS code that'll change the form based on the drop down menu. For example, the form is for adding a property and the drop down menu selections are single family, condo, apartment but they each have their own set of text boxes, menus and radio buttons. How can I achieve this?
What I have understand from your query is that , you have a from with some fields and you have a dropdown and you want that when ever your change selection in dropdown the form fields values must change accordingly right ?
If that is the issue , then it is very simple , first catch onSelectionChange event of dropdown and try to get selected value and once you get the selected value fill form fields by accessing them accordingly in a condition.Thanks
So I actually already had a piece of code I was fumbling with (http://jsfiddle.net/CYzsY/) for this question and it looks like its not working for me because its based on jQuery 1.7.1 and I'm linking to 1.10.2 in my code. Will make a new post accordingly. Thanks everyone!

Chosen jquery plugin modification

Hi I want to change dropdown value by click on a tag. I made a function it is changing the the dropdown value but the highlighted class remain on the last previously selected tag. so my question is when we change value the class should highlight appropriate option.
Okay, not really sure if this is what you're asking for, but I gave it a try.
See if this is what you want.
http://jsfiddle.net/7vkLv/3/
I added
closest('div.chzn-container').addClass('chzn-container-active');
to the span you're changing data in.

Make contents in div not editable (clickable)

I don't know if this is possible or not.
I have a dynamic form with contents that are dynamically created. Every time a button is clicked, a new div element is added. And what I wanted to do is to make the previous div not editable, that is, the input fields could not be used, buttons could not be clicked.
Is it doable?
Thanks.
Try something like this:
// Disable all input-like elements in the divs except for the last div
$(".divclass:not(:last-child) :input").attr("disabled", true);
Where divclass is the class of the divs you mentioned.
Example: http://jsfiddle.net/grc4/LrxkU/2/
Maby something like this? http://jsfiddle.net/ng4Ct/2/
If you can access your previous div elements you can add attribute disabled="disabled" to them.
You can fire the code that adds the disabled attribute to required elements on the same button click function.
Well, you can either access the specific elements inside the DIV and disable them using Javascript, or you can access the DIV and then loop through all the elements inside (probably preferable), and disable them automatically with Javascript.
Of course it depends on how your code is written, can you provide some of the code that generates the DIVs?

Categories

Resources