var stringhtml = $('<div class="row" id="ao-clonedata">' + '<div class="col-lg-12 form-inline ao-content-padding">' + '<div class="col-xs-1 pull-left ao-from-triggers">'+'<a class="add-link ao-minus-color" title="Remove">'+'<i class="fa fa-minus fa-lg"></i></a>'+'<a class="add-link ao-plus-color ao-spacing-icon" title="Add"><i class="fa fa-plus fa-lg"></i></a>'+'</div> '+'<div class="col-xs-5 dropdown pull-left ao-padding-zero">'+'<button class="btn dropdown-toggle ao-substitute-dropdown ao-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'+'<span class="pull-left" id="ao-substitute-from">Select Value</span><i class="caret pull-right custom-dropdown-caret"></i>'+'</button>'+'<ul class="dropdown-menu ao-substitute-ul-dropdown" aria-labelledby="substituteFrom">'+'<li onclick="ChangeSubstituteStatus(1,'+' "Select Value",'+' this)">Select Value</li>'+'</ul>'+'</div>'+'<div class="col-xs-1">'+'<i class="fa fa-arrow-right fa-lg ao-substitute-arrow" id="ao-arrowbutton"></i>'+'</div>'+'<div class="col-xs-5">'+'<div class="form-inline" id="ao-clonetodata">'+'<div class="dropdown ao-substitute-dropdown pull-left">'+'<button class="btn dropdown-toggle ao-substitute-dropdown ao-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'+'<span class="pull-left" id="ao-substitute-to">Select Value</span><i class="caret pull-right custom-dropdown-caret"></i>'+'</button>'+' <ul class="dropdown-menu ao-substitute-ul-dropdown" aria-labelledby="substituteTo">'+'<li onclick="ChangeSubstituteToStatus(1, "Select Value", this)">Select Value</li>'+'<li onclick="ChangeSubstituteToStatus(2, "About Time", this)">About Time'+'</li>'+'</ul>'+'</div>'+'</div>'+'</div>'+'</div>'+'</div>');
Creating this HTML on click of an initial(X) button, after creating this html,need to clone this html on click of ".ao-plus-color" (which is there in above HTML). so whatever method i wrote for ".ao-plus-color" is not working.
method for ".ao-plus-color" is :
$(".ao-plus-color").on('click', function () {
CCounter = $("#ao-clonewrapper > .row").length + 1;
var clonedata = $("#ao-clonedata").clone(true).attr("id", "ao-clonedata" + CCounter).appendTo("#ao-clonewrapper");
CCounter++;
var clonedatalength = $("#ao-clonewrapper > .row").length;
if (clonedatalength > 0) {
$("#ao-remove-all").show();
} });
can any one help me out to solve this? thanks in advance!
You should bind the event to already created element ao-plus-color is also dynamically created.Use document like
$(document).on('click','.ao-plus-color', function () {
You need to use event delegation for attaching events to dynamically added elemens:
$("body").on('click',".ao-plus-color", function () {
CCounter = $("#ao-clonewrapper > .row").length + 1;
var clonedata = $("#ao-clonedata").clone(true).attr("id", "ao-clonedata" + CCounter).appendTo("#ao-clonewrapper");
CCounter++;
var clonedatalength = $("#ao-clonewrapper > .row").length;
if (clonedatalength > 0) {
$("#ao-remove-all").show();
}
});
Related
Now I try to add new Div with this code it's work.
The Problem is when I try to add new Div in a lasted row.
It's always after lasted row.
I need to add new Div next to the last row.
Maybe it's because of insertAfter but I can't fix it.
var math = Math.random().toString(36).substr(2, 9);
var math2 = Math.random().toString(36).substr(2, 9);
$(document).ready(function(){
$('<div class="row mt-2"" id="rowExpression'+math+'"></div>').appendTo('#overall');
$('<div class="col-md-9" id="Selector'+math+'"></div>').appendTo('#rowExpression'+math);
$('<h5> e '+math+'</h5>').appendTo('#Selector'+math);
$('<div class="col-md-1 col-md-offset-2" id="CRUDExpression'+math+'"></div>').appendTo('#rowExpression'+math);
$('<i class="btn success-item fas fa-plus-circle pr-1" onclick="addRow(this)" id="'+math+'" ></i>').appendTo('#CRUDExpression'+math);
$('<i class="btn cross-item fas fa-minus-circle pl-1" onclick="deleteRow(this)" id="'+math+'" ></i>').appendTo('#CRUDExpression'+math);
});
function addRow(eId) {
var mathX = Math.random().toString(36).substr(3, 12);
$('#rowExpression'+eId.id).one( "click",function(){
var x = $(this).prev().attr('id');
console.log(x +' neastest div');
console.log(eId.id +' this id');
console.log(mathX +' new id');
var lastedId = $('.row').last().attr("id") ;
console.log(lastedId, "rowExpression"+mathX);
$('<div class="row mt-2"" id="rowExpression'+mathX+'"></div>').appendTo('#overall')
.insertAfter($( "#"+x ));
$('<div class="col-md-9" id="Selector'+mathX+'"></div>').appendTo('#rowExpression'+mathX);
$('<h5> e '+mathX+'</h5>').appendTo('#Selector'+mathX);
$('<div class="col-md-1 col-md-offset-2" id="CRUDExpression'+mathX+'"></div>').appendTo('#rowExpression'+mathX);
$('<i class="btn success-item fas fa-plus-circle pr-1" onclick="addRow(this)" id="'+mathX+'" ></i>').appendTo('#CRUDExpression'+mathX);
$('<i class="btn cross-item fas fa-minus-circle pl-1" onclick="deleteRow(this)" id="'+mathX+'" ></i>').appendTo('#CRUDExpression'+mathX);
});
}
function deleteRow(eId) {
console.log(eId.id);
$("#rowExpression"+eId.id).remove();
}
This is my html.
<form action="#" method ="post">
<div id="overall" class="col-md-12">
</div>
<button type="submit" id="submit" class="btn btn-primary ml-2 mt-2" value="submit" >submit</button>
</form>
In your code, you're using 'insertAfter()' instead you should use '.append()' cause this way you will add your new code after the last one.
Without your HTML is hard to guess (where are those classes and how you structured them.
I will say try and use after instead of insertAfter, that could be the problem.
http://api.jquery.com/insertafter/
I getting my answer with myself now.
Thank you all.
function addRow(eId) {
var mathX = Math.random().toString(36).substr(3, 12);
$('#rowExpression'+eId.id).one( "click",function(){
var nearest = $(this).prev().attr('id');
console.log(nearest +' neastest div');
console.log(eId.id +' this id');
console.log(mathX +' new id');
var lastedId = $('.row').last().attr("id") ;
console.log(lastedId, "rowExpression"+mathX);
/*$('<div class="row mt-2"" id="rowExpression'+mathX+'"></div>').appendTo('#overall')
.insertAfter($( "#"+nearest ));*/
if('rowExpression'+eId.id == lastedId) {
$('<div class="row mt-2"" id="rowExpression'+mathX+'"></div>').appendTo('#overall');
}
else{
$('<div class="row mt-2"" id="rowExpression'+mathX+'"></div>').appendTo('#overall')
.insertAfter($( "#"+nearest ));
}
$('<div class="col-md-9" id="Selector'+mathX+'"></div>').appendTo('#rowExpression'+mathX);
$('<h5> e '+mathX+'</h5>').appendTo('#Selector'+mathX);
$('<div class="col-md-1 col-md-offset-2" id="CRUDExpression'+mathX+'"></div>').appendTo('#rowExpression'+mathX);
$('<i class="btn success-item fas fa-plus-circle pr-1" onclick="addRow(this)" id="'+mathX+'" ></i>').appendTo('#CRUDExpression'+mathX);
$('<i class="btn cross-item fas fa-minus-circle pl-1" onclick="deleteRow(this)" id="'+mathX+'" ></i>').appendTo('#CRUDExpression'+mathX);
});
}
I want to add an dynamic input element onClick with jQuery and make the link disable. On deleting the input element that I just added I want to make the link clickable again.
I did the first part of adding element and making the link disable but the problem is when I add multiple elements and try to delete only one element all other links become clickable. I know, because I have given class to dropdown links. Not sure what to do to get this working right.
Here is my code:
$(document).ready(function() {
$(".list").on('click', function() {
$("#blockFeild").append(
'<div class="row parent">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'</div>' +
'<button class="btn btn-info" id="editbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'<br><br>' +
'</div>'
).show();
});
});
$(document).on('click', 'a.list ', function() {
$(this).addClass('no-click');
});
$(document).on('click', 'li.block', function() {
$(this).addClass('not-allowed');
});
$(document).on("click", "#removebtn", function() {
$(this).closest('.parent').remove();
$(".block").removeClass("not-allowed");
$(".list").removeClass("no-click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<?php $users_fields=$ this->db->list_fields('users'); for ($i=0; $i
<count($users_fields); $i++){ ?>
<li class="block">
<a class="list" href="#">
<?php echo $users_fields[$i]?>
</a>
</li>
<?php } ?>
</ul>
</div>
Your problem stems from duplicate ids (#removebtn, remember ids must be unique) and also this section of your code:
$(".block").removeClass("not-allowed");
$(".list").removeClass("no-click");
These two lines grab all elements on the page with the classes "not-allowed", and "no-click" respectively and then remove those classes. This is why the removal of one of your rows enables all your dropdown links again.
You need to create a way to associate a generated row with ONLY the link used to generate it, perhaps through the addition of an identifying class on both the row and link. That way when the row is destroyed you can use jQuery to grab that specific link element and re-activate it.
UPDATE
Now that I understand the OP better I updated this Snippet with .index() and .eq() in order to associate the correct .block .list with a matched .removebtn. Also replaced .remove() with .hide(). Works perfect.
Change all ids to classes. ex. from #removebtn to .removebtn. You can only have unique ids. When elements are generated, they have the same id, so that's why they are all affected. I don't quite fully understand OP's objective, but I bet having duplicate ids is the root of the problem.
In order to remove a .parent.row on it's own .removebtn replace the last 4 lines with these lines:
$('.list').on('click', function() {
$(this).addClass('no-click');
});
$('.block').on('click', function() {
$(this).addClass('not-allowed');
});
$(document).on("click", '.removebtn', function(e) {
var tgt = $(this);
idx = tgt.closest('.row').index()
$('.block').eq(idx).removeClass('not-allowed').find('.list').removeClass('no-click');
tgt.closest('.row').hide();
});
SNIPPET
$(document).ready(function() {
$(".list").on('click', function() {
$(".blockfield").append(
'<div class="row parent">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'<button class="btn btn-info editbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'<br><br>' +
'</div>' +
'</div>'
).show();
});
});
$('.list').on('click', function() {
$(this).addClass('no-click');
});
$('.block').on('click', function() {
$(this).addClass('not-allowed');
});
$(document).on("click", '.removebtn', function(e) {
var tgt = $(this);
idx = tgt.closest('.row').index()
$('.block').eq(idx).removeClass('not-allowed').find('.list').removeClass('no-click');
tgt.closest('.row').hide();
});
.no-click {
pointer-events: none;
}
.not-allowed {
cursor: not-allowed;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="block">
<a class="list" href="#">1</a>
</li>
<li class="block">
<a class="list" href="#">2</a>
</li>
<li class="block">
<a class="list" href="#">3</a>
</li>
</ul>
</div>
<section class='blockfield'>
</section>
I faced this problem previously that my code does not work with
$(document).on.....
So firstly you change the duplication of ids as foxinatardis said and test this:
$(document).delegate('.class_off_button', 'click', function (){
//what you want to do
});
I'm attempting to run some JQuery when clicking on a List Item but the click event does not seem to fire when checking in debugger.
The Script is:
$(document.body).on('click', '.range', function (event) {
var rangeid = $(this).data('value');
var url2 = '/Home/GetMachineTypeByRange/-1';
url2 = url2.replace("-1", rangeid);
$.get(url2, function (data) {
$('#MachineTypeDropDown').html(data);
$('#MachineTypeDropDown').toggle();
});
});
And my HTML is:
<div class="button-group">
<button type="button" class="btn btn-default dropdown-toggle col-md-12" data-toggle="dropdown">Select a product category <span class="caret"></span></button>
<ul id="RangeDropDown" class="dropdown-menu col-md-12" data-url="/Home/GetRangeForCorp">
<li class="range" data-value="1">Articulated Dump Trucks</li>
...
</ul>
</div>
<div class="button-group" style="display: none;">
<button type="button" class="btn btn-default dropdown-toggle col-md-12" data-toggle="dropdown">Select a machine type <span class="caret"></span></button>
<ul style="display: none;" id="MachineTypeDropDown" class="dropdown-menu col-md-12"></ul>
</div>
it should work
with test code
$(document.body).on('click', '.range', function (event) {
alert("test");
});
look at this fiddle
https://jsfiddle.net/d15czyt3/
i suspect your get is failing
Your code work "fine", the problem should be that the event is propagating to it's parent...
This solve it:
$(document.body).on('click', '.range', function (event) {
event.stopPropagation();//-> the event execute 1 time the code!
var rangeid = $(this).data('value');
var url2 = '/Home/GetMachineTypeByRange/-1';
url2 = url2.replace("-1", rangeid);
console.log(url2 + " | " +rangeid);
$.get(url2, function (data) {
$('#MachineTypeDropDown').html(data);
$('#MachineTypeDropDown').toggle();
});
});
event.stopPropagation()
, check also if url2 is getting the url you really want (if it's correct) and you may want to use post instead of get, because get to increase performance uses "web cache information"
I have a table containing next & previous pages. I am able to navigate to next/previous pages using next & previous buttons.
On previous & next page actions on call(controller methods) I am pushing checked ticket ids by pushing in an array $scope.checkedTicketIds
angular.forEach($scope.tickets, function(ticket) {
if(ticket.checked) {
$scope.checkedTicketIds.push(ticket.id);
}
});
HTML code is
<div class="mail-tools tooltip-demo m-t-md">
<div class="btn-group pull-right">
<button ng-click="previousPage()" ng-disabled="previousPageBtnDisabled()" class="btn btn-white btn-sm"><i class="fa fa-arrow-left"></i></button>
<button ng-click="nextPage()" ng-disabled="nextPageBtnDisabled()" class="btn btn-white btn-sm"><i class="fa fa-arrow-right"></i></button>
</div>
<div class="input-group">
<div class="input-group-btn" dropdown>
<button ng-disabled="ticketsChecked()" class="btn btn-white dropdown-toggle pull-left" dropdown-toggle type="button">{{'ACTIONS' | translate}} <span class="caret"></span></button>
<ul class="dropdown-menu pull-left">
<li ng-repeat="(key, value) in actions"><a ng-click="convertAction(key)">{{key | translate}}</a></li>
</ul>
</div>
</div>
</div>
In controller on clicking previous page button calling method
$scope.previousPage = function() {
angular.forEach($scope.tickets, function(ticket) {
if(ticket.checked) {
$scope.checkedTicketIds.push(ticket.id);
}
});
$scope.ticketsUpdatedQueryCriteria.page = --$scope.page;
Tickets.query($scope.ticketsUpdatedQueryCriteria).then(function(tickets) {
$scope.tickets = tickets.data;
$scope.ticketsPageData = tickets.cursor;
});
};
How to pop/remove id on uncheck & I wanted to maintain checked ticket ids for further bulk actions, like change status of one/more tickets. How can I do this?
I implement an example on jsbin, using an independent checked list.
Please, look at:
http://jsbin.com/rudifa/3/
Hope I help you.
I have some html :)
<div class="categories">
<div class="list-group">
<a class="root list-group-item" id="427" style="display: block;"><span class="glyphicon indent0 glyphicon-chevron-down"></span><span>Home</span></a>
<a class="list-group-item first active" id="428" style="display: block;"><span class="glyphicon indent1 glyphicon-chevron-right"></span><span>Images</span></a>
<a class="list-group-item child" id="431" style="display: none;"><span class="glyphicon glyphicon-chevron-right indent2"></span><span>Sub category</span></a>
<a class="list-group-item child" id="433" style="display: none;"><span class="glyphicon indent3"></span><span>Super sub</span></a>
<a class="list-group-item first" id="429" style="display: block;"><span class="glyphicon glyphicon-chevron-right indent1"></span><span>Videos</span></a>
<a class="list-group-item child" id="432" style="display: none;"><span class="glyphicon indent2"></span><span>Another sub</span></a>
<a class="list-group-item first" id="430" style="display: block;"><span class="glyphicon indent1"></span><span>Documents</span></a>
</div>
</div>
and I have this function:
$(".glyphicon", treeRoot).on('click', function (e) {
e.stopPropagation();
var $glyph = $(this);
var $item = $glyph.parent();
var indent = $item.find(".glyphicon").prop('className').match(/\b(indent\d+)\b/)[1];
if (indent != undefined) {
var $children = $item.nextUntil("a:has(." + indent + ")");
if ($glyph.hasClass("glyphicon-chevron-right")) {
$glyph
.addClass('glyphicon-chevron-down')
.removeClass("glyphicon-chevron-right");
if ($children != null) $children.show();
} else {
$glyph
.addClass('glyphicon-chevron-right')
.removeClass("glyphicon-chevron-down");
if ($children != null) $children.hide();
}
}
});
So basically, when the icon is clicked, it shows or hides the children.
The problem is, it shows all children (indent2 and indent3) but I just want it to show the immediate children (indent2 in this example).
Could someone give me some insight on how to do this?
Cheers,
/r3plica
Try
var num = parseInt(indent.match(/(\d+)$/)[1], 10);
var $children = $item.nextUntil("a:not(:has(.indent" + (num + 1) + "))");
Demo: Fiddle