I'm having problem loading custom css (twitter bootstrap) on radio input when I try to add that element using jQuery.
Here's a screenshot:
When I refresh the page the css of the radio input is loaded (next to the green arrow) but when I click to Add new sequence.
Here is the jQuery code:
$('#btn_addseq').on('click', function (e) {
e.preventDefault();
var newitem = 'some tags' +
'<input type="radio" name="is_default" value="new_' + size + '"> Default</input>' +
'some tags' ;
$("#list_sequences").append(newitem);
};
Edit:
My html for the working one:
<label class="mt-radio mt-radio-line" style="margin-top: 6px">
<input type="radio"
name="is_default" value="old_{{ $sequence->id }}" {{ $sequence->is_default ? 'checked' : '' }}>
Default
What I see in inspection:
And this is the code of the item I'm trying to add:
var newitem = '<div class="col-md-4">' +
'<div class="mt-radio-list">' +
'<label class="mt-radio mt-radio-line" style="margin-top: 6px">' +
'<input type="radio" name="is_default" value="new_' + size + '"> Default</input>' +
'</label>'+
'<a class="delete_new_seq" data-id="' + size + '"><i class="fa fa-remove" style="color: red;cursor: pointer;"></i> </a>'
'</div>' +
'</div>' ;
The rules that govern what an element looks like rely on a particular structure of HTML, in this case it looks like the css rules you use rely on either
The radio being inside a <div class="radio"> element. or;
The radio being inside a <label class="mt-radio mt-radio-line"> element.
(My guess would be the former, however its hard to know for sure without seeing all your css)
Your new control doesn't have the class specified. Add the class property to the tags like this:
var newitem = 'some tags' +
'<input type="radio" name="is_default" class="----" value="new_' + size + '"> Default</input>' +
'some tags' ;
Related
Hi I have browsed stack over flow and have not come up with a solution that seems to fix my issue so I am resorting to asking this fine community.
var feild = '<div style="margin-top: 0.75%;" class="input-group input-group-lg fields urlInputOne">' +
'<span class="input-group-addon glyphicon glyphicon-cog" id="basic-addon1"></span>' +
'<input type="text" class="form-control" id="urlField" placeholder="Extra GitHub repository URL" aria-describedby="basic-addon1">' +
'</div>';
In the input tag I want to add a variable to the id, how can i do this? I have tried a few different options but kept getting errors in the browser.
so i want it to be
id="urlfeild"+1 as an example.
thanks
You can simply concatenate your string and add your variable this way:
var yourVar = 1;
var feild = '<div style="margin-top: 0.75%;" class="input-group input-group-lg fields urlInputOne">' +
'<span class="input-group-addon glyphicon glyphicon-cog" id="basic-addon1"></span>' +
'<input type="text" class="form-control" id="urlField' + yourVar + '" placeholder="Extra GitHub repository URL" aria-describedby="basic-addon1">' +
'</div>';
I have this form which allows people to add addresses depending on how many ever they need and it is controlled by two buttons, one that is "add address" and another that is "remove". I was wondering if anyone could help me remove the "remove" button and instead place an "x" in the right corner of the text box that acts as a button to remove that box. I have placed the code related to the form below. Thanks again beforehand for all your help, I appreciate all your help.
jquery
<script>
$(window).load(function(){
$("#add-address").click(function(e){
e.preventDefault();
var numberOfAddresses = $("#form1").find("input[name^='data[address]']").length;
var label = '<label for="data[address][' + numberOfAddresses + ']"></label> ';
var input = '<input type="text" name="data[address][' + numberOfAddresses + ']" id="data[address][' + numberOfAddresses + ']" placeholder= "Address ' + (numberOfAddresses+1) + '"/>';
var removeButton = '<button class="remove-address">Remove</button>';
var html = "<div class='address'>" + label + input + removeButton + "</div>";
$("#form1").find("#add-address").before(html);
});
$(document).on("click", ".remove-address",function(e){
e.preventDefault();
$(this).parents(".address").remove();
//update labels
$("#form1").find("label[for^='data[address]']").each(function(){
//$(this).html("Address " + ($(this).parents('.address').index() + 1));
$(this).next("input").attr("placeholder","Address " + ($(this).parents('.address').index() + 1));
});
});
});
</script>
html
<form id="form1" method="post" action = "h.php">
<div class="address">
<!--<label for="data[address][0]">Address 1</label>-->
<input type="text" name="data[address][0]" id="data[address][0]" placeholder = "Address 1" />
</div>
<button id="add-address">Add address</button>
<input type="submit" value="Submit" />
</form>
You can do this simply using css, display:inline-block, and a negative margin-left
HTML
<div class="address">
<!--<label for="data[address][0]">Address 1</label>-->
<input type="text" name="data[address][0]" id="data[address][0]" placeholder = "Address 1" />
<div class="inputRemove">×</div>
</div>
CSS
.inputRemove{
display:inline-block;
margin-left:-20px;
cursor:pointer;
}
.address input[type=text] {
padding-right:25px;
}
The .address input[type=text] styling will make it so text inputed will not display under the close x
JSFiddle Demo
Just use position absolute the 'x'
.container " position relative
textarea " psotion absolute
.closeBtn " position absolute
notice i put the .closeBtn after the textarea element, so you dont need to specify the z-index in css. the later element will be above the previous element by default.
can you please tell why row not taking 100% width.I follow the following steps.
press "add case button" .it will generate a row.select "add case" option and press add it will generate inside row.But it width is not 100%.
function addNewCaseInside(id){
//add new inside collapsible inside collapsible row.
alert($("#list" +id));
$('#'+id).append('<ul><li >' +
'<div data-role="collapsible">' +
'<h3>nnnn</h3>' +
'<ul>' +
'<li>' +
'<fieldset data-role="controlgroup" class="Smoker">' +
'<input type="radio" name="radio-choice" id="radio-choice-1" value="TestCase" checked="checked">' +
'<label for="radio-choice-1">Add Test Case</label>' +
'<input type="radio" name="radio-choice" id="radio-choice-2" value="TestCommand">' +
'<label for="radio-choice-2">Add Test Command</label>' +
'</fieldset>' +
'<a data-role="button" data-mini="true" data-theme="a" class="addClickClass">Add</a>' +
'</li>' +
'</ul>' +
'</div>' +
'</li><ul>')
$('#'+id).trigger('create');
}
You need to reset styles if you test in in fiddle. By default browser applies styles to UL elements (in this case padding-left). So if you include reset styles into your fiddle it will work as expected.
Of course you can fix it simple like this without notmalize.css:
.ui-collapsible-content ul {padding: 0;}
Demo: http://jsfiddle.net/R2DzV/22/
Also note that you might not need reset.css for actual mobile devices as its browser can have different user agent default stylesheet without such unwanted behavior.
I have a dynamic list that I am creating when a user clicks on certain checkboxes. I am using iCheck, which has certain event handlers built in. What I would like to have, is the ability to remove one of the "rows" of this list, when a user unchecks the specific checkbox.
Here is what I have so far:
<script>
$(document).ready(function(){
var callbacks_list = $('.callbacks ul');
$('.facebook-friends-larger input').on('ifChecked', function(event){
callbacks_list.prepend('<li><span>#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>');
});
$('.facebook-friends-larger input').on('ifUnchecked', function(event) {
});
});
</script>
HTML:
<ul class="facebook-friends-larger">
<?php $offset_two=0; ?>
#foreach ($friends as $friend)
<li>
<div class="facebook_friend_large">
<input tabindex="1" type="checkbox" name="friend[]" id="{{$friend}}" value="{{$friend}}">
<label for="{{$friend}}" style="display:inline-block;">
<span class="icon"><img src="https://graph.facebook.com/{{ $friend }}/picture" alt="" height="50" width="50"></span>
<span class="icon_text_large"><?php echo $friend_names[$offset_two]; ?></span>
</label>
</div>
</li>
<?php $offset_two++; ?>
#endforeach
</ul>
<div class="callbacks">
<ul></ul>
</div>
My question is how do I remove the rows with the Unchecked event handler? I know it is something along the lines of:
$('#'this.id).remove();
id's are unique.
But this throws an error. How would I accomplish this? Thank you.
You are using following code to add a new li
.prepend('<li><span>#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>');
within this event handler
$('.facebook-friends-larger input').on('ifChecked', function(event){ //... });
So, logically, you can use following code to remove an li (IMO), depending on prepend
$('.facebook-friends-larger input').on('ifUnchecked', function(event) {
event.preventDefault();
$('span#'+ this.id).closest('li').remove();
});
Update : Change your prepend to
.prepend('<li><span id="#'+this.id+'">#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>');
And then replace the remove line in the function with this
$('.callbacks ul').find('span#'+ this.id).closest('li').remove();
Also, make sure, all ids are unique, two elements can't have same id.
I have a form that appears by append(). The form contains input that need to be adjusted with with js (autocomplete function).
Here is it:
function addForm() {
<!-- function code here-->
...
html += ' <table class="form">';
html += ' <tr>';
html += ' <td>Entry product</td>';
html += ' <td><input type="text" name="product" value="" /></td>';
html += ' </tr>';
html += ' <tr>';
html += ' <td> </td>';
html += ' <td><div id="featured-product" class="scrollbox">';
html += ' </div>';
html += ' <input type="hidden" name="featured_product" value="" /></td>';
html += ' </tr>';
html += ' </table>';
$('#form').append(html);
}
$('input[name=\'product\']').autocomplete({
<!-- function code here-->
}
But autocomplete function doesn't work in this way. As I understand it is because of append(html) doesn't store the html to DOM. It works fine with usual html form, but i can't go this way. I need to create forms as described. So the questions are:
How can i apply js to element that are not in DOM? Or how can I execute this elemnt to DOM with js?
Maybe I need to use smth another like append()?
Thanks.
Put this code:
$('input[name=\'product\']').autocomplete({
<!-- function code here-->
});
after the code that appends the html. The problem is that when this bind is attempted the DOM does not contain these elements
You could also use the .on functionality to apply this:
$('input[name=\'product\']').on("autocomplete",function(){
<!-- function code here-->
});