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.

$("#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
	});

Select all Open in new window

3.  To debug/step thru it,
 This gets me the element I'm clicking on

console.log($(this));

Select all Open in new window

Then I looked at the parents

console.log($(this).parents());

Select all Open in new window

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');

Select all Open in new window

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

 

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>'); 
 

Select all Open in new window

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>')

Select all Open in new window

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");
	});

Select all Open in new window

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() {

Select all Open in new window

You can see it here

Works http://jsfiddle.net/jv2oudhg/

Doesn't work with my HTML change http://jsfiddle.net/gm5uxh7q/

I am following an example http://jsfiddle.net/glebkema/73gtkvjt/  to have have divs collapse and expand.

But I create controls dynamically so the JS code in that JSFiddle wasn't working... the divs weren't being collapsed.

I found this link that explained why dynamic controls work differently Explanation

I created this JSfiddle (forked the one above)

http://jsfiddle.net/3zw18rxe/7/

What I tried:
      

$('.toggle').on("click", ".schedule", function() {

Select all Open in new window

Tried this but the divs won't collapse correctly...all of them will collapse

$(document).on("click",".toggle",function(){
    // code goes here
});

Select all Open in new window

As a test, I hardcoded the id, but this didn't work either

$('.toggle').on("click", "#Schedules[0].Type", function() {

Select all Open in new window

How can I do this when the controls are created dynamically?

I am working on a MVC project with AngularJs  and trying to download SSRS report as an excel. Am new to AngularJs.
I have tried the following codes and output is download excel with binary code!

Please correct my code, so that will download excel in exact same format as in SSRS report.

report-list.ctrl.js

(function () {
    'use strict';
    var module = angular.module('app')

        //.directive('ngConfirmClick', [
        //    function () {
        //        return {
        //            link: function (scope, element, attr) {
        //                var msg = attr.ngConfirmClick || "Are you sure?";
        //                var clickAction = attr.confirmedClick;
        //                element.bind('click', function (event) {
        //                    if (window.confirm(msg)) {
        //                        scope.$eval(clickAction)
        //                    }
        //                });
        //            }
        //        };
        //    }])

        .controller('ReportListController', ['$scope', '$http', '$q', '$interval', '$location', '$window', '$modal', '$modalStack', 'toastr', 'dataService',
            function ($scope, $http, $q, $interval, $location, $window, $modal, $modalStack, toastr, dataService) {

                $scope.showreportlist = true;
                $scope.reports = [];
                $scope.clientsessionreportData = [];


                $scope.downloadReport = function (res) {

                    

Select all Open in new window

…

I'm confusing myself by going back and forth and reading about DataTable and jqGrid.

This is my dilemma:
1. Working on a project that has lots of grids. Grid.MVC is used for the grids
2. There's one section that uses jqGrid. Probably it's because "grouping (group by)" is needed (our  ex-developer coded this).
3. I bought this template  https://keenthemes.com/preview/metronic/theme/admin_1/table_datatables_managed.html and it uses DataTable (not that I can't replace it)

This is what I need
1. "Group by" for at least one section of our site
2.  Inline edit - one of our existing grids has that
3. Performance - some grids have large amount of data to display.
4. Export to Excel and CSV but I can use EPPlus to export the data
5. Sorting
6. Nice to haves : user be able to hide/display columns
7.  jqGrid needs a license but DataTable is free. Ex-developer has coded the jqGrid but looks like he didn't ask our manager to get the license.

From what I read, jqGrid has better performance. I don't know if DataTable has "group by".

What to do? Anyone has used either? My preference is to use DataTable because it doesn't require a license but again...I don't know if it supports "group by". I looked at their site and not clear if they have it or not.

I've found these links with pros and cons:

https://www.slant.co/versus/4837/4840/~jqgrid_vs_datatables

http://debapk.blogspot.com/2012/01/jqgrid-and-datatable-comparision.html…

I found this JSFiddle that I want to use

http://jsfiddle.net/hQnWG/

The error sometimes happens and sometimes it doesn't.

1. select more than one item

2. Drag and drop them in the other . The items disappear with the error. Again, this sometimes happens and sometimes doesn't

This can't be hard but I've been at this for 4 hours now and tried different code and Googled and still can't get it...
You can get the code from here. Download, unzip and just click on "page.html"
https://drive.google.com/open?id=1lcRj5FckJ7UF2_XxF1S1VD3jTQGKUUMC

1. You see there's an "Add filter" button.
2. Click on it and a row is added.
3. The last row doesn't have an X. I want to add an X but not "AND"


What I've tried:

1. Tried "mouseup" event thinking after user clicks the button, I can get the last row and add the X but that didn't work

$("#addNewFilterRow").mouseup(function () {
		console.log("mouse up")
		var len = $('.filterArea tr').length;
		var last_row = $('.filterArea tr').eq(len - 1);
		last_row.find('td:nth-child(6)').append(' ' + '<a href="javascript:void(0);" class="remCF"><span  style="color: red" class="glyphicon glyphicon-remove"></span></a>');
		console.log(last_row)
	});

Select all Open in new window

2. Then thought when user clicks on the button, I can get the last row and add the X but this didn't work either
in this event $('#addNewFilterRow').click(function () {

	var len = $('.filterArea tr').length;
		console.log(len)
		//var first_row = $('#jTable tr').eq(0);
		//console.log(first_row)
		var last_row = $('.filterArea tr').eq(len - 1);
		//console.log(last_row)
		//last_row.find('td:nth-child(6)').append(' ' + '<a href="javascript:void(0);" class="remCF"><span  style="color: red" class="glyphicon glyphicon-remove"></span></a>');
		//$('#last_row td:nth-child(6)', '#reportBuilder').append(' ' + '<a href="javascript:void(0);" class="remCF"><span  style="color: red" class="glyphicon glyphicon-remove"></span></a>');

Select all Open in new window

Will submitting a login form with a POST request over HTTPS be enough security or are there other precautions I should take? This project is also being built in Angular if there are any specific considerations.

Hi Experts,

   I am trying to loop through json object and filter it into different arrays based on 'group'. Also, trying to assign particular field to a const....I couldn't go beyond

 

 from(Field).pipe(groupBy(fie => fie.group), mergeMap(group => group.pipe(toArray())));

Select all Open in new window

   I would like have this.group1, this.group2, this.gropu3 to have respective Fields after this execution along with this.fieldName1, this.fieldName2 having their respective field values.

  Field object looks like this

 

 Field : [
{ name : fieldname,
  value: FieldValue,
  group: FieldGroup
  }
]

Select all Open in new window

I have a custom confirmation popup (Yes/No) which i call through angular typescript file (TS)

parentpage.ts

export class ManageConfigs implements OnInit,AfterViewInit  {
  @ViewChild('warning') warning: any;

    var retVal = this
                   .warning
                   .showWarningWithConfirmation("Are you sure you want to delete this?");
}

Select all Open in new window

Based on button selection (yes/no) popup will return value true or false. That means retVal will be true/false.

But the issue is popup is rendering after calling the line.

var retVal = this
               .warning
               .showWarningWithConfirmation(
                  "Are you sure you want to ",
                  "delete region " +regionName + "?"
               );

Select all Open in new window

popup.ts

public showWarningWithConfirmation(messageLine1,messageLine2): boolean {
  this.visible = true; 
  this.messageLine1 = messageLine1;
   this.messageLine2 = messageLine2;
  setTimeout(() => this.visibleAnimate = true, 100);  
  return this.retWarningValue;
}

Select all Open in new window

popup.html

  <div class="container-fluid" id="main-content" (click)="this.visibleAnimate = false;this.visible = false" [@hideShowAnimator]="hideShowAnimator">
      <div class="custom-modal modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
          <div class="modal-dialog modal-sm" role="document">
          

Select all Open in new window

…