The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.
JavaScript
121K
Solutions
41K
Contributors
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
Share tech news, updates, or what's on your mind.
I know there has to be a way to do this. I figured out how to get the innerText of one row.
1. I click on a button and dynamically create some controls with a div. Each div has a number
2. I click on X delete next to each row and remove a row. Now, the row numbers are out of order
3. When I click on X, I call this and I get the innerText of the row I'm deleting
4. Now, I want to renumber the divs
I think I need to do this when I click on an X but how in jQuery?
1. This gives me the "row" I'm deleting $(this).closest('.row')
2. I need to get its parent div which is schedgroup
3. Then get all the "row --> toggle" children of schedgroup
4. Loop thru and rename/increment. I started with zero but can start with 1
1. I click on a button and dynamically create some controls with a div. Each div has a number
2. I click on X delete next to each row and remove a row. Now, the row numbers are out of order
3. When I click on X, I call this and I get the innerText of the row I'm deleting
$("#schedgroup").on("click", ".remDelSched", function (e) { //change13 change body to schedgroup
console.log($(this).closest('.row').children('.toggle')[0].innerText); //*** gets me the innerText of the row I'm deleting
var numItems = $('div.schedule').length;
if (numItems > 1) {
$(this).closest('.row').remove();
}
else
$(this).closest('.row').addClass('hidden'); //orig code has one "schedule" as hidden. Don't remove all of them if user clicks on X. Leave one as hidden
});
4. Now, I want to renumber the divs
I think I need to do this when I click on an X but how in jQuery?
1. This gives me the "row" I'm deleting $(this).closest('.row')
2. I need to get its parent div which is schedgroup
3. Then get all the "row --> toggle" children of schedgroup
4. Loop thru and rename/increment. I started with zero but can start with 1
I'm on a roll with my jQuery questions :) I'm close to telling my manager to just forget about this section but can't give up.
It's related to this question https://www.experts-exchange.com/questions/29107740/jQuery-code-partly-works-hide-div.html
1. I click on the X to remove a row. The row is removed. But now, I want to remove the "toggle" div as well.
2. This is the code that removes the "schedule" div. I tried some lines (commented them out below) but still can't get it right.
3. To debug/step thru it,
This gets me the element I'm clicking on
Then I looked at the parents
I tried "next", "closet", "prev". How can I traverse this and find the "toggle" for that specific row?
EDIT - just tried this as well
It's related to this question https://www.experts-exchange.com/questions/29107740/jQuery-code-partly-works-hide-div.html
1. I click on the X to remove a row. The row is removed. But now, I want to remove the "toggle" div as well.
2. This is the code that removes the "schedule" div. I tried some lines (commented them out below) but still can't get it right.
$("#schedgroup").on("click", ".remDelSched", function (event) { //change13 change body to schedgroup
console.log($(this));
console.log($(this).parents());
//console.log($(this).closest(".toggle"));
//$(this).parents().children('div.rows').children('.toggle').addClass('hidden'); //try this to remove the toggle div
var numItems = $('div.schedule').length;
if (numItems > 1)
$(this).closest(".schedule").remove();
else
$(this).closest(".schedule").addClass('hidden'); //orig code has one "schedule" as hidden. Don't remove all of them if user clicks on X. Leave one as hidden
//$(this).parents().children('.schedgroup').toggleClass("hidden"); //try this to see if div toggle is removed
//$(this).closest(".schedule").next(".toggle").addClass('hidden');//try this to see if div toggle removed
});
3. To debug/step thru it,
This gets me the element I'm clicking on
console.log($(this));
Then I looked at the parents
console.log($(this).parents());
I tried "next", "closet", "prev". How can I traverse this and find the "toggle" for that specific row?
EDIT - just tried this as well
$(this).closest(".schedule").closest('.toggle').addClass('hidden');
This is related to this question https://www.experts-exchange.com/questions/29108573/jQuery-click-event-doesn't-get-called.html
I'll go step by step.
1. The solution in that thread worked. I tested it by hardcoding some rows and it worked. Then, I plugged it in my actual code and that worked except that I needed to fix the position of the rows.
I had this code to add the row dynamically
The divs looked like this
2. I made a change to the HTML to get the rows correctly. Instead of ".after", I used ".append"
Now it looked correctly
3. I had the code in the accepted solution above but the divs weren't hiding/displaying
I saw this in console when I was clicking on the div. "click" event looked like being called twice
4. I went to Julian's solution and that worked. Why is that? Julian has an explanation here but maybe that's what I don't understand
Julian's explanation
I think this is the key
If use #schedgroup instead of 'body'...code below works because #schedgroup is static
You can see it here
Works http://jsfiddle.net/jv2oudhg/
Doesn't work with my HTML change http://jsfiddle.net/gm5uxh7q/
I'll go step by step.
1. The solution in that thread worked. I tested it by hardcoding some rows and it worked. Then, I plugged it in my actual code and that worked except that I needed to fix the position of the rows.
I had this code to add the row dynamically
var schedule = $('.schedule:last', '#scheduleArea');
var newSchedule = $(schedule).clone(true, false).html();
// Change the 'Id' of all the elements
//... some code here
// Append the new schedule and hide it
$(schedule).after('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>');
The divs looked like this
2. I made a change to the HTML to get the rows correctly. Instead of ".after", I used ".append"
var schedule = $('.schedule:last', '#scheduleArea');
var newSchedule = $(schedule).clone(true, false).html();
// Change the 'Id' of all the elements
//... some code here
//console.log($(schedule));
// Append the new schedule and hide it
//$(schedule).after('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>'); //camilla added collapse in per stackoverflow
$("#schedgroup").append('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>')
Now it looked correctly
3. I had the code in the accepted solution above but the divs weren't hiding/displaying
$('.row').on("click", ".toggle", function() {
console.log($(this).parents().children('.schedule'));
$(this).parents().children('.frequency').toggleClass("hide");
});
I saw this in console when I was clicking on the div. "click" event looked like being called twice
4. I went to Julian's solution and that worked. Why is that? Julian has an explanation here but maybe that's what I don't understand
Julian's explanation
I think this is the key
To get around this we need to bind to a parent element that will be static -
If use #schedgroup instead of 'body'...code below works because #schedgroup is static
$('body').on("click", ".toggle", function() {
You can see it here
Works http://jsfiddle.net/jv2oudhg/
Doesn't work with my HTML change http://jsfiddle.net/gm5uxh7q/
Cloud Class® Course: CompTIA Healthcare IT Tech
This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.
1. I'm following this example http://jsfiddle.net/glebkema/73gtkvjt/
that I got from here. I'm doing the jquery version Example
2. You can download my sample code here. Unzip and just click on "page.html" to see it. The js file is Reporting.js
https://drive.google.com/open?id=17IuFhPlYPX5B7EATvE9sDES-EoB3i7gA
This is what's happening
1. I click on "Add Report Delivery" button and I see the control displayed. I click on the purple div and I can hide and display the control. This works.
2. Click on "Add Report Delivery" again and you'll see the second control. Now, click on the puruple div and that div (control) doesn't collapse. I put debug steps in the JS code and for the second puruple div...the js code is not even called. Only the first div collapses and expands. I see I have unique Ids . Not sure what I'm missing.
EDIT I ran a test. When I click on "add delivery schedule", the control is built dynamically. Something with this dynamic control that the "click" control on "toggle" doesn't work. Don't know why.
that I got from here. I'm doing the jquery version Example
2. You can download my sample code here. Unzip and just click on "page.html" to see it. The js file is Reporting.js
https://drive.google.com/open?id=17IuFhPlYPX5B7EATvE9sDES-EoB3i7gA
This is what's happening
1. I click on "Add Report Delivery" button and I see the control displayed. I click on the purple div and I can hide and display the control. This works.
2. Click on "Add Report Delivery" again and you'll see the second control. Now, click on the puruple div and that div (control) doesn't collapse. I put debug steps in the JS code and for the second puruple div...the js code is not even called. Only the first div collapses and expands. I see I have unique Ids . Not sure what I'm missing.
EDIT I ran a test. When I click on "add delivery schedule", the control is built dynamically. Something with this dynamic control that the "click" control on "toggle" doesn't work. Don't know why.
This code partly works but I think I need to do something with the "click" event. I'm building this dynamically.
You can download and unzip it from here. Just click on page.html to see it.
https://drive.google.com/file/d/1dU8yOCmzQJUeruaeKu1qxJLPs1-HlHF_/view
1. I click on "Add Report Delivery"
2. It calls $('#showSchedule').click(f
3. Now, I click on "Add Report Delivery" again and another "schedule" is added. The first one I added is now hidden. You can add more.
This is NOT the functiolity I'm looking for. I don't want the first one or additional ones to be hidden. I want to wrap each in a div... to be minimized...like collapse... with header.."schedule1", "schedule2", "schedule3", etc.
So, with each click...have the previous "schedule" div collapsed with a header title. I don't want them hidden. The toggle and "click" event are not working together correctly looks like it.
How can I do this? When I click on the button, each section gets an ID. Maybe I need to find the parent "div" which is "schedule" and attach the ID to the parent DIV for what I clicked on and collapse it? Here is a screenshot
You can download and unzip it from here. Just click on page.html to see it.
https://drive.google.com/file/d/1dU8yOCmzQJUeruaeKu1qxJLPs1-HlHF_/view
1. I click on "Add Report Delivery"
2. It calls $('#showSchedule').click(f
3. Now, I click on "Add Report Delivery" again and another "schedule" is added. The first one I added is now hidden. You can add more.
This is NOT the functiolity I'm looking for. I don't want the first one or additional ones to be hidden. I want to wrap each in a div... to be minimized...like collapse... with header.."schedule1", "schedule2", "schedule3", etc.
So, with each click...have the previous "schedule" div collapsed with a header title. I don't want them hidden. The toggle and "click" event are not working together correctly looks like it.
How can I do this? When I click on the button, each section gets an ID. Maybe I need to find the parent "div" which is "schedule" and attach the ID to the parent DIV for what I clicked on and collapse it? Here is a screenshot
Cloud Class® Course: Ruby Fundamentals
This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.
I have this partly working but not completely
1. I create dynamic controls by clicking on a button. This is an example of having 2 rows
2. I have an X next to each row and when user clicks on it, I want to hide the div
3. I have this jQuery code. It works only if I have one row and hides the div. But when I have more than one, it doesn't do anything.
How can I have.... hide the div that corresponds to this X being clicked?
This is the code for X delete. I wonder if I need to have a unique id for each X (delete)
1. I create dynamic controls by clicking on a button. This is an example of having 2 rows
2. I have an X next to each row and when user clicks on it, I want to hide the div
3. I have this jQuery code. It works only if I have one row and hides the div. But when I have more than one, it doesn't do anything.
How can I have.... hide the div that corresponds to this X being clicked?
$(".remDelSched").on("click", function (event) {
console.log($(this))
$(this).closest(".schedule").addClass('hidden');
//event.preventDefault();
});
This is the code for X delete. I wonder if I need to have a unique id for each X (delete)
<div class="col-md-2">
<a href="javascript:void(0);" class="remDelSched"><span style="color: red" class="glyphicon glyphicon-remove"></span></a>
</div>
I found this JSFiddle and applied it to my code http://jsfiddle.net/hQnWG/614/
1. You can download my code from here. Unzip and click on "page_copy.html"
https://drive.google.com/file/d/1qYWpX712PZL-flacmspsVog5VzDxsm2p/view
2. It doesn't happen all the time. You might have to clear your cache to see it. I did this in Chrome
3. Click on "Billing Attention to" to select it. Now, drag it to under "Asset tax" in the right hand box. It won't get placed there. It moves back to the left hand side box.
4. Clear cache. Now, you can drag "Billing Attention to" to the first place in the right-hand-side box. This works It's like it can be dropped anywhere but not at the last place. Again, looks like sometimes it works and sometimes it doesn't.
Very odd. I looked here https://api.jqueryui.com/sortable/ to find maybe an event or something to "sort anywhere in any position" type of event but nothing jumped out.
1. You can download my code from here. Unzip and click on "page_copy.html"
https://drive.google.com/file/d/1qYWpX712PZL-flacmspsVog5VzDxsm2p/view
2. It doesn't happen all the time. You might have to clear your cache to see it. I did this in Chrome
3. Click on "Billing Attention to" to select it. Now, drag it to under "Asset tax" in the right hand box. It won't get placed there. It moves back to the left hand side box.
4. Clear cache. Now, you can drag "Billing Attention to" to the first place in the right-hand-side box. This works It's like it can be dropped anywhere but not at the last place. Again, looks like sometimes it works and sometimes it doesn't.
Very odd. I looked here https://api.jqueryui.com/sortable/ to find maybe an event or something to "sort anywhere in any position" type of event but nothing jumped out.
JavaScript
121K
Solutions
41K
Contributors
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
Top Experts In
JavaScript
-
1
Julian Hansen54,310 points -
2
leakim97111,286 points -
3
Chris Stanyon9,800 points -
4
Swatantra Bhargava8,800 points -
5
lenamtl3,600 points -
6
Rainer Jeschor3,500 points -
7
Leonidas Dosas3,050 points -
8
jppampin3,000 points -
9
oBdA3,000 points -
10
Chris Harte3,000 points -
11
Eoin OSullivan3,000 points -
12
Christopher Gore3,000 points -
13
ste5an2,550 points -
14
Chinmay Patel2,400 points -
15
Juana Villa2,300 points -
16
_agx_2,000 points -
17
gudii92,000 points -
18
ecarbone1,750 points -
19
DanRollins1,417 points -
20
Ray Paseur1,055 points -
21
Mrunal1,013 points -
22
Eddie Shipman1,000 points -
23
Snarf00011,000 points -
24
David Johnson, CD, MVP1,000 points -
25
Camillia1,000 points
-
26
Scott Fell, EE MVE1,000 points -
27
Dmitriy Sky1,000 points -
28
Jason Baker1,000 points