button click - One code works, the other doesn't

I wonder why this code isn't working

1. I have a button like this, note the class="jqbuttons"

<button style="background-color:lightblue;border:none;" class="jqbuttons" id="47" type="button"><span class="glyphicon glyphicon-remove"></span></button>

Open in new window


2. I put this click event both in document.ready and outside it. I click on the button and nothing happens

$(document).ready(function () {

		$(".jqbuttons").on('click',function () {
			//getvalue(this.id);
			console.log("button clicked1");
			console.log(this.id);
		});

Open in new window


This works

1. I removed the class and added this onclick='getvalue(this.id);'

<button style="background-color:lightblue;border:none;" onclick="getvalue(this.id);" id="47" type="button"><span class="glyphicon glyphicon-remove"></span></button>

Open in new window


2. The function, outside document.ready..
function getvalue(id) {
		console.log("button clicked");
		console.log(id);
	}

Open in new window


How come the first one doesn't work?
LVL 8
CamilliaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jeffrey Dake Senior Director of TechnologyCommented:
Do you have any other click events happening on the class jqbuttons. My theory is there is another function firing that is calling stopPropagation on the event. This would stop the click event from propagating down to your function. If you are unsure you should be able to inspect the element and see in the developer tools if there are any events bound to the element.  Hope this helps.
0
MishaProgrammerCommented:
Try to use this selector:
        $(document).ready(function () {

            $("button.jqbuttons").on('click', function () {
                //getvalue(this.id);
                console.log("button clicked1");
                console.log(this.id);
            })
        });

Open in new window


In this code I localizate selector to button tag.
0
CamilliaAuthor Commented:
ok, i'll try it

@Jeffey - I don't have any other click events.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Julian HansenCommented:
The code is fine. You can see it working here http://www.marcorpsa.com/ee/t3208.html

The problem is implementation.

1. Are there any errors in your console.
2. DId you maybe include the jQuery code before including the jQuery library?
1
CamilliaAuthor Commented:
No errors in console but let me check

2. DId you maybe include the jQuery code before including the jQuery library?
0
CamilliaAuthor Commented:
I moved the jquery button code to an existing JS file and still didn't work.

This button is in header of a jqGrid and my guess is maybe that's what the issue could be. The regular JS button click works so maybe it has something to do with jqGrid.

This is a long code but this is how the page renders. You can search for "jqbuttons" to see where I have it.

It's ok if we can't figure it out. At least I can use the other button click

<html><head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="utf-8">
    <title>  - Report</title>
    <script type="text/javascript">
        
        var global_sitePath = '/'; 
        var global_datepickerFormat = 'M/D/YYYY';
        var global_datepickerLanguage = ['en-US', 'en'];
        var global_advancedSearchLinkText_Show = 'Show Advanced';
        var global_advancedSearchLinkText_Hide = 'Hide Advanced';
        var global_text_selectOne = '-- Select One --';
        var global_text_all = 'All';
        var global_text_selectAction = 'Please select an action';
        var global_text_noItemsSelected = 'No items selected';
        var global_text_canNotHaveNonManagedWithAction = 'Action can\u0027t be used on ';
        var global_text_someAssetsAreLocked = 'Unable to submit, one or more assets are locked.';
        var global_text_someAssetsAreNotLocked = 'Unable to submit, one or more assets are not locked.';
        var global_text_errorHasOccurred = 'An error has occurred.';
        var global_text_error_invalidFileOnlyExcel = 'Invalid file, only Excel files are allowed.';
        var global_text_areYouSure = 'Are you sure?';
        var global_url_commentHistory = '/US/en-US/Transaction/CommentHistory';
            
                var global_massCDF_userCanPreformUpdate = true;
                var global_massCDF_uploadPath = '/US/en-US/Unit/MassCdfUpdate_Import';
                var global_massCDF_processFile = '/US/en-US/Unit/MassCdfUpdate_ImportOverwrite';
            
                var global_preventLockingOfFormControls = false; 
        var global_leaseByPortfolio_url_get = '/US/en-US/MasterLease/GetMasterLeasesByPortfolio';
    </script>
    <script src="/Scripts/jquery-1.11.3.js"></script>
<script src="/Scripts/jquery-ui-1.11.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.rte.js"></script>

    <script type="text/javascript">
        /*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
        $.widget.bridge('uibutton', $.ui.button);
        $.widget.bridge('uitooltip', $.ui.tooltip);
    </script>
    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/moment-with-locales.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.js"></script>
<script src="/Scripts/typeahead.bundle.js"></script>

    <script src="/Scripts/FileUpload/jquery.ui.widget.js" defer=""></script>
<script src="/Scripts/FileUpload/jquery.iframe-transport.js" defer=""></script>
<script src="/Scripts/FileUpload/jquery.fileupload.js" defer=""></script>

    <script src="/Scripts/myCSI.js" defer=""></script>
<script src="/Scripts/fileuploader.js" defer=""></script>
<script src="/Scripts/URI.js" defer=""></script>

    <link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/bootstrap-datetimepicker.css" rel="stylesheet">
<link href="/Content/font-awesome.css" rel="stylesheet">
<link href="/Content/myCsi.css" rel="stylesheet">
<link href="/Content/fileuploader.css" rel="stylesheet">
<link href="/Content/rte.css" rel="stylesheet">
<link href="/Content/jquery.fileupload.css" rel="stylesheet">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="/Scripts/respond-1.4.2.min.js"></script>
<script src="/Scripts/html5shiv-3.7.2.min.js"></script>

    <![endif]-->
    <link rel="shortcut icon" href="/img/favicon.ico">
</head>
<body>
    
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menuLevel1">
                        <span class="pull-left margin-right-5 margin-top-neg-3">Menu</span>
                        <span class="pull-right">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </span>
                    </button>
                <a id="logo" class="navbar-brand" href="/US/en-US">
                        <img class="hidden-xs hidden-sm" src="/img/csi-logo.png" alt="" title="">
                        <img class="hidden-lg hidden-md" src="/content/images/csi-logo-small.png" alt="" title="">
                </a>
            </div>
            <div id="menuLevel1" class="collapse navbar-collapse">
                    <div id="nav-top" class="pull-right hidden-xs">
                        <form class="navbar-form form-search" method="get" id="search" action="/US/en-US/Search" role="search" novalidate="novalidate">
                            <div class="input-group add-on">
                                <input class="form-control" placeholder="Search" name="searchText" id="srch-term" type="text" style="display: none;">
                                <div class="input-group-btn">
                                    <button id="srch-btn" class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <br style="clear: both;">
                    <ul id="menuLevel3" class="nav navbar-nav pull-right">
                            <li class=""><a href="/US/en-US/Schedule">mySchedules</a></li>
                        <li class="selected"><a href="/US/en-US/Unit">myAssets</a></li>
                            <li class=""><a href="/US/en-US/Invoice">myInvoices</a></li>
                                                    <li class="">
                                <a href="/US/en-US/Transaction/OpenActions">
                                    myTransactions &nbsp;<span class="badge badge-important" rel="tooltip" title="" data-original-title="Pending Requests">!</span>                                </a>
                            </li>
                                                    <li class=""><a href="/US/en-US/Return">myReturns</a></li>
                                                    <li class=""><a href="/US/en-US/Administration">myAdministration</a></li>
                    </ul>
                    <br style="clear: both;">
                    <ul class="nav navbar-nav pull-right subMenu_asset">
                                                    <li class=""><a href="/US/en-US/Unit">Assets</a></li>
                                <li class="selected"><a href="/US/en-US/Unit/Reports">Asset Reports</a></li>
                                <li class=""><a href="/US/en-US/Unit/NonManaged">Non Leased Assets</a></li>
                                                                    </ul>
            </div>
        </div>
    </nav>

    <div class="container">
                    <div class="btn-group pull-right">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <span class="glyphicon glyphicon-user"></span>  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="/US/en-US/Profile/Edit">Profile</a></li>
                    <li><a href="/US/en-US/Account/ChangePassword">Change Password</a></li>
                    <li><a href="/US/en-US/Account/Logoff">Sign Out</a></li>
                </ul>
            </div>

        
    <div class="row-fluid">
        <ul class="breadcrumb">
            <li><a href="/US/en-US">Home</a></li>
                <li>
                    <a href="/US/en-US/Unit">Assets</a>
                </li>
                <li class="&quot;active&quot;">
                    <a href="/US/en-US/Unit/Reports">Asset Reports</a>
                </li>
        </ul>
    </div>

<script type="text/javascript">
	var text_And = 'And';
	var loadDomainLogic = true;
		var domains = new Array();
			domains.push('easing.com')
			domains.push('dressel.com')
</script>
<style>
	/*camilla*/
	.columns-block, .columns-sorting-block {
		background: white;
		border: 1px solid silver;
		height: 180px;
		margin: 0 0 20px 0;
		position: relative;
	}

	.columns-title {
		font: normal 18pt "Segoe UI Light", "Segoe Light", "Segoe UI", Arial, Helvetica, sans-serif;
		color: #4F4F4F;
		padding: 0 0 4px 10px;
		background: #F9F9F9;
		border-bottom: 1px solid #1777B1;
		border-top: 2px solid #1777B1;
		height: 38px;
	}

	#content {
		background: #f6f6f6;
		border: 2px solid #dedede;
		padding: 20px;
	}

	.header-panel {
		height: 494px;
	}

	.entities-block {
		width: 20%;
		float: left;
		margin: 0 20px 0 0 !important;
		background: #fff;
		border: 1px solid silver;
		position: relative;
	}
	/*.entities-hr{
		background: #7BC4F8;
	}*/

	.entities-title {
		font: normal 18pt "Segoe UI Light", "Segoe Light", "Segoe UI", Arial, Helvetica, sans-serif;
		color: #4F4F4F;
		padding: 0 0 4px 10px;
		background: #F9F9F9;
		border-bottom: 1px solid #7BC4F8;
		border-top: 2px solid #7BC4F8;
		height: 38px;
	}

	.entities-panel-container {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 44px;
	}

	.central-block {
		width: 59%;
		float: left;
	}

	.menu-block{
		width: 17%;
		float: right;
		background: #fff;
		border: 1px solid silver;
	}

	.menu-title {
		font: normal 18pt "Segoe UI Light", "Segoe Light", "Segoe UI", Arial, Helvetica, sans-serif;
		color: #4F4F4F;
		padding: 0 0 4px 10px;
		background: #F9F9F9;
		border-bottom: 1px solid #1777B1;
		border-top: 2px solid #AE67DF;
	}

	.ui-jqgrid-bdiv
            { background-color: white !important}

	[role=columnheader] {
		background-color: lightblue;
		
	}
	/*.columns-hr{
		background: #1777B1;
	}*/

</style>
<link href="/Content/ui.jqgrid-bootstrap.css" rel="stylesheet">

<script src="/Scripts/grid.locale-en.js" defer=""></script>
<script src="/Scripts/jquery.jqGrid-5.2.0.js" defer=""></script>
<script src="/Scripts/Reporting.js" defer=""></script>

		<h3>Build Report</h3>
<form action="/US/en-US/Unit/ExecuteReport" autocomplete="off" class="form-horizontal well" id="reportBuilder" method="post" novalidate="novalidate"><input data-val="true" data-val-number="The field ReportId must be a number." data-val-required="The ReportId field is required." id="ReportId" name="ReportId" type="hidden" value="0"><input data-val="true" data-val-number="The field UserDefaultTimezone must be a number." id="UserDefaultTimezone" name="UserDefaultTimezone" type="hidden" value="11">			<!-- Camilla test -->
			<div>
				<span id="showtestLink" class="link" data-toggle="collapse" data-target="#content" aria-expanded="true">Test Report</span>

			</div>
			<div class="row collapse in" id="content" aria-expanded="true" style="">
				<div class="header-panel">
					<div class="entities-block">
						
						<div class="entities-title">Display Fields</div>
						<div class="entities-panel-container">
							<div class="fieldList" style="background-color: white !important" id="availableFieldList2">
								<ul class="ui-selectable">
				
					<li key="47" class="ui-selectee ui-selected">Accepted</li>
				
					<li key="22" class="ui-selectee">Asset Info</li>
				
					<li key="19" class="ui-selectee">Asset Rent</li>
				
					<li key="21" class="ui-selectee">Asset Tax</li>
				
					<li key="46" class="ui-selectee">Billed</li>
				
					<li key="26" class="ui-selectee">Billing Address</li>
				
					<li key="27" class="ui-selectee">Billing Address2</li>
				
					<li key="25" class="ui-selectee">Billing Attention To</li>
				
					<li key="28" class="ui-selectee">Billing City</li>
				
					<li key="31" class="ui-selectee">Billing Country</li>
				
					<li key="24" class="ui-selectee">Billing Name</li>
				
					<li key="30" class="ui-selectee">Billing Postal Code</li>
				
					<li key="29" class="ui-selectee">Billing State</li>
							
								<li style="font-weight: bold" key="37" class="ui-selectee">Cost Center</li>
							
				
					<li key="18" class="ui-selectee">Currency</li>
				
					<li key="20" class="ui-selectee">Customer Name</li>
				
					<li key="34" class="ui-selectee">Customer Reference</li>
							
								<li style="font-weight: bold" key="35" class="ui-selectee">Department Code</li>
							
							
								<li style="font-weight: bold" key="36" class="ui-selectee">End User</li>
							
				
					<li key="1" class="ui-selectee">Lease No.</li>
				
					<li key="5" class="ui-selectee">Manufacturer</li>
				
					<li key="6" class="ui-selectee">Model</li>
				
					<li key="8" class="ui-selectee">Quantity</li>
				
					<li key="48" class="ui-selectee">Returned</li>
				
					<li key="16" class="ui-selectee">Schedule</li>
				
					<li key="14" class="ui-selectee">Schedule Rent</li>
				
					<li key="15" class="ui-selectee">Schedule Tax</li>
				
					<li key="4" class="ui-selectee">Serial No.</li>
				
					<li key="10" class="ui-selectee">Site Address</li>
				
					<li key="23" class="ui-selectee">Site Address2</li>
				
					<li key="11" class="ui-selectee">Site City</li>
				
					<li key="17" class="ui-selectee">Site Country</li>
				
					<li key="9" class="ui-selectee">Site Name</li>
				
					<li key="13" class="ui-selectee">Site Postal Code</li>
				
					<li key="12" class="ui-selectee">Site State</li>
				
					<li key="33" class="ui-selectee">Term</li>
				
					<li key="3" class="ui-selectee">Term Expiration Date</li>
				
					<li key="2" class="ui-selectee">Term Start Date</li>
				
					<li key="7" class="ui-selectee">Vendor</li>
								</ul>
							</div>
						</div>
					</div>



					<div class="central-block"><div class="columns-title">Columns</div><div class="ui-jqgrid " id="gbox_gridColumns" dir="ltr" style="width: 640px;"><div class="jqgrid-overlay ui-overlay" id="lui_gridColumns"></div><div class="loading row" id="load_gridColumns" style="display: none;">Loading...</div><div class="ui-jqgrid-view table-responsive" role="grid" id="gview_gridColumns" style="width: 640px;"><div class="ui-jqgrid-titlebar ui-jqgrid-caption" style="display: none;"><a role="link" class="ui-jqgrid-titlebar-close HeaderButton " title="" style="right: 0px;"><span class="ui-jqgrid-headlink glyphicon glyphicon-circle-arrow-up"></span></a><span class="ui-jqgrid-title"></span></div><div class="ui-jqgrid-hdiv" style="width: 638px;"><div class="ui-jqgrid-hbox"><table class="ui-jqgrid-htable ui-common-table table table-bordered" style="width:150px" role="presentation" aria-labelledby="gbox_gridColumns"><thead><tr class="ui-jqgrid-labels ui-sortable" role="row"><th id="gridColumns_47" role="columnheader" class="ui-th-column ui-th-ltr ui-sortable-handle" aria-selected="true" style="width: 150px;"><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span><div class="ui-th-div ui-jqgrid-sortable" id="jqgh_gridColumns_47">Accepted <button style="background-color:lightblue;border:none;" class="jqbuttons" id="47" type="button"><span class="glyphicon glyphicon-remove"></span></button><span class="s-ico" style=""><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-sort-ltr glyphicon glyphicon-triangle-top ui-disabled"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-sort-ltr glyphicon glyphicon-triangle-bottom"></span></span></div></th></tr></thead></table></div></div><div class="ui-jqgrid-bdiv" style="height: 120px; width: 638px;"><div style="position:relative;"><div></div><table id="gridColumns" tabindex="0" role="presentation" aria-multiselectable="false" aria-labelledby="gbox_gridColumns" class="ui-jqgrid-btable ui-common-table table table-bordered" style="width: 150px;"><tbody><tr class="jqgfirstrow" role="row"><td role="gridcell" style="height:0px;width:150px;"></td></tr></tbody></table></div></div></div><div class="ui-jqgrid-resize-mark" id="rs_mgridColumns">&nbsp;</div></div></div>

					<div class="menu-block">
						<div class="menu-title">Menu</div>
					</div>

				</div>

				</div>
			<!--end camilla test -->
			<fieldset>
				<h4>Report Name  <span rel="tooltip" data-title="Name the report and provide a description that makes it clear to users what this report is for" data-original-title="" title=""><span class="glyphicon glyphicon-question-sign"></span></span></h4>
				<div class="row">
					<div class="col-md-8">
						<div class="form-group reportName">
							<label class="col-sm-4 control-label" for="ReportName">Report Name</label>
							<div class="col-sm-5">
								<input autocomplete="off" class="form-control" data-val="true" data-val-length="Must be 64 characters in length or less." data-val-length-max="64" data-val-required="Field is required." id="ReportName" name="ReportName" type="text" value="">
							</div>
							<div class="col-sm-3">
								<span class="field-validation-valid" data-valmsg-for="ReportName" data-valmsg-replace="true"></span>
								<span class="field-validation-error hidden">
									<span>Report name must be unique</span>
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-8">
						<div class="form-group reportName">
							<label class="col-sm-4 control-label" for="ReportDescription">Report Description</label>
							<div class="col-sm-5">
								<input autocomplete="off" class="form-control" data-val="true" data-val-length="Must be 256 characters in length or less." data-val-length-max="256" id="ReportDescription" name="ReportDescription" placeholder="Optional" type="text" value="">
							</div>
							<div class="col-sm-3">
								<span class="field-validation-valid" data-valmsg-for="ReportDescription" data-valmsg-replace="true"></span>
							</div>
						</div>
					</div>
				</div>
				<h4>Display Fields <span rel="tooltip" title="" data-original-title="Select the fields to include in this report by moving them from the &quot;Available Fields&quot; section to the &quot;Selected Fields&quot; section - there is no limit<br />
Column order can be arranged by moving a field up or down in the &quot;Selected Fields&quot; section - fields closest to the top will be to the left, fields closest to the button will be to the right"><span class="glyphicon glyphicon-question-sign"></span></span></h4>
				<div class="row displayFieldsArea">
					<div class="col-md-8">
						<div class="col-md-5 no-padding-left">
							<div class="text-center">Available Fields</div>
							<div class="fieldList" id="availableFieldList">
								<ul class="ui-selectable">
											
												<li key="47" class="ui-selectee">Accepted</li>
											
												<li key="22" class="ui-selectee">Asset Info</li>
											
												<li key="19" class="ui-selectee">Asset Rent</li>
											
												<li key="21" class="ui-selectee">Asset Tax</li>
											
												<li key="46" class="ui-selectee">Billed</li>
											
												<li key="26" class="ui-selectee">Billing Address</li>
											
												<li key="27" class="ui-selectee">Billing Address2</li>
											
												<li key="25" class="ui-selectee">Billing Attention To</li>
											
												<li key="28" class="ui-selectee">Billing City</li>
											
												<li key="31" class="ui-selectee">Billing Country</li>
											
												<li key="24" class="ui-selectee">Billing Name</li>
											
												<li key="30" class="ui-selectee">Billing Postal Code</li>
											
												<li key="29" class="ui-selectee">Billing State</li>
											
												<li style="font-weight: bold" key="37" class="ui-selectee">Cost Center</li>
											
											
												<li key="18" class="ui-selectee">Currency</li>
											
												<li key="20" class="ui-selectee">Customer Name</li>
											
												<li key="34" class="ui-selectee">Customer Reference</li>
											
												<li style="font-weight: bold" key="35" class="ui-selectee">Department Code</li>
											
											
												<li style="font-weight: bold" key="36" class="ui-selectee">End User</li>
											
											
												<li key="1" class="ui-selectee">Lease No.</li>
											
												<li key="5" class="ui-selectee">Manufacturer</li>
											
												<li key="6" class="ui-selectee">Model</li>
											
												<li key="8" class="ui-selectee">Quantity</li>
											
												<li key="48" class="ui-selectee">Returned</li>
											
												<li key="16" class="ui-selectee">Schedule</li>
											
												<li key="14" class="ui-selectee">Schedule Rent</li>
											
												<li key="15" class="ui-selectee">Schedule Tax</li>
											
												<li key="4" class="ui-selectee">Serial No.</li>
											
												<li key="10" class="ui-selectee">Site Address</li>
											
												<li key="23" class="ui-selectee">Site Address2</li>
											
												<li key="11" class="ui-selectee">Site City</li>
											
												<li key="17" class="ui-selectee">Site Country</li>
											
												<li key="9" class="ui-selectee">Site Name</li>
											
												<li key="13" class="ui-selectee">Site Postal Code</li>
											
												<li key="12" class="ui-selectee">Site State</li>
											
												<li key="33" class="ui-selectee">Term</li>
											
												<li key="3" class="ui-selectee">Term Expiration Date</li>
											
												<li key="2" class="ui-selectee">Term Start Date</li>
											
												<li key="7" class="ui-selectee">Vendor</li>
								</ul>
							</div>
						</div>
						<div class="col-md-1 migrate text-center">
							<br><br>
							<span class="btn btn-default disabled right"><span class="right glyphicon glyphicon-arrow-right"></span></span><br><br>
							<span class="btn btn-default left"><span class="right glyphicon glyphicon-arrow-left"></span></span>
						</div>
						<div class="col-md-5 no-padding-right">
							<div class="text-center">Selected Fields</div>
							<div class="fieldList" id="selectedFieldList">
								<ul class="ui-selectable">
								</ul>
							</div>
						</div>
						<div class="col-md-1 order text-center">
							<br><br>
							<span class="btn btn-default disabled up"><span class="right glyphicon glyphicon-arrow-up"></span></span><br><br>
							<span class="btn btn-default disabled down"><span class="right glyphicon glyphicon-arrow-down"></span></span>
						</div>
					</div>
				</div>
				<div class="clearfix"></div>
				<h4>Report Filter <span rel="tooltip" data-title="Add filter criteria to this report by first selecting a field.<br />
Next, select the Operator - this is how you want the field to be filtered  such as &quot;Equal To&quot; or &quot;Not Equal To&quot;.<br />
And finally, enter the Value to filter on.<br />
Example:  Manufacturer equal to Apple" data-original-title="" title=""><span class="glyphicon glyphicon-question-sign"></span></span></h4>
				<div class="row">
					<div class="col-md-8">
						<table class="filterArea">
							<thead>
								<tr>
									<th>Field</th>
									<th>Operator</th>
									<th>Value</th>
									<th> </th>
								</tr>
							</thead>
							<tbody>
									<tr>
										<td>
											<select class="filterField form-control" name="FilterFieldKeys">
												<option key="" value="" selected="selected">None</option>
													
														<option datatype="date" key="47" value="47">Accepted</option>
													
														<option datatype="string" key="22" value="22">Asset Info</option>
													
														<option datatype="number" key="19" value="19">Asset Rent</option>
													
														<option datatype="number" key="21" value="21">Asset Tax</option>
													
														<option datatype="string" key="46" value="46">Billed</option>
													
														<option datatype="string" key="26" value="26">Billing Address</option>
													
														<option datatype="string" key="27" value="27">Billing Address2</option>
													
														<option datatype="string" key="25" value="25">Billing Attention To</option>
													
														<option datatype="string" key="28" value="28">Billing City</option>
													
														<option datatype="string" key="31" value="31">Billing Country</option>
													
														<option datatype="string" key="24" value="24">Billing Name</option>
													
														<option datatype="string" key="30" value="30">Billing Postal Code</option>
													
														<option datatype="string" key="29" value="29">Billing State</option>
													
														<option datatype="string" key="37" value="37">Cost Center</option>
													
														<option datatype="string" key="18" value="18">Currency</option>
													
														<option datatype="string" key="20" value="20">Customer Name</option>
													
														<option datatype="string" key="34" value="34">Customer Reference</option>
													
														<option datatype="string" key="35" value="35">Department Code</option>
													
														<option datatype="string" key="36" value="36">End User</option>
													
														<option datatype="string" key="1" value="1">Lease No.</option>
													
														<option datatype="string" key="5" value="5">Manufacturer</option>
													
														<option datatype="string" key="6" value="6">Model</option>
													
														<option datatype="number" key="8" value="8">Quantity</option>
													
														<option datatype="bool" key="48" value="48">Returned</option>
													
														<option datatype="string" key="16" value="16">Schedule</option>
													
														<option datatype="number" key="14" value="14">Schedule Rent</option>
													
														<option datatype="number" key="15" value="15">Schedule Tax</option>
													
														<option datatype="string" key="4" value="4">Serial No.</option>
													
														<option datatype="string" key="10" value="10">Site Address</option>
													
														<option datatype="string" key="23" value="23">Site Address2</option>
													
														<option datatype="string" key="11" value="11">Site City</option>
													
														<option datatype="string" key="17" value="17">Site Country</option>
													
														<option datatype="string" key="9" value="9">Site Name</option>
													
														<option datatype="string" key="13" value="13">Site Postal Code</option>
													
														<option datatype="string" key="12" value="12">Site State</option>
													
														<option datatype="number" key="33" value="33">Term</option>
													
														<option datatype="date" key="3" value="3">Term Expiration Date</option>
													
														<option datatype="date" key="2" value="2">Term Start Date</option>
													
														<option datatype="string" key="7" value="7">Vendor</option>
											</select>
										</td>
										<td>
											<select class="fieldOperator form-control" disabled="" name="FilterOperators">
												<option datatype="string number date bool" key="" value="" selected="selected">None</option>
													
														<option datatype="string" key="bw" value="bw" class="">begins with</option>
													
														<option datatype="string" key="cn" value="cn" class="">contains</option>
													
														<option datatype="string" key="bn" value="bn" class="">does not begin with</option>
													
														<option datatype="string" key="nc" value="nc" class="">does not contain</option>
													
														<option datatype="string" key="en" value="en" class="">does not end with</option>
													
														<option datatype="string" key="ew" value="ew" class="">ends with</option>
													
														<option datatype="number date string bool" key="eq" value="eq" class="">equal to</option>
													
														<option datatype="number date" key="gt" value="gt" class="">greater than</option>
													
														<option datatype="number date" key="ge" value="ge" class="">greater than or equal to</option>
													
														<option datatype="number date string bool" key="nn" value="nn" class="disableValue ">is not null</option>
													
														<option datatype="number date string bool" key="nu" value="nu" class="disableValue ">is null</option>
													
														<option datatype="number date" key="lt" value="lt" class="">less than</option>
													
														<option datatype="number date" key="le" value="le" class="">less than or equal to</option>
													
														<option datatype="number date string bool" key="ne" value="ne" class="">not equal to</option>
											</select>
										</td>
										<td>
											<input disabled="" name="FilterValues" type="text" class="form-control">
											<select name="FilterValues" class="form-control hide" disabled="">
												<option></option>
												<option value="true">Yes</option>
												<option value="false">No</option>
											</select>
										</td>
										<td> </td>
									</tr>
							</tbody>
						</table>
						<span id="addNewFilterRow" class="btn btn-default">Add Filter</span>
					</div>
				</div>
				<h4>Additional Options <span rel="tooltip" title="" data-original-title="Reports can be organized by grouping by a common field and/or sorting the information on a field."><span class="glyphicon glyphicon-question-sign"></span></span></h4>
				<div class="row">
					<div class="col-md-8">
							<div class="form-group">
								<div class="form-group no-margin-bottom">
									<label class="col-md-4 control-label">Asset Type</label>
									<div class="col-md-5">
										<div class="radio">
											<label>
												<input checked="checked" id="NonManagedAll" name="AssetType" type="radio" value="All">
												All
											</label>
										</div>
										<div class="radio">
											<label>
												<input id="NonManagedAll" name="AssetType" type="radio" value="No">
												Leased Assets
											</label>
										</div>

										<div class="radio">
											<label>
												<input id="NonManagedAll" name="AssetType" type="radio" value="Yes">
												Non Leased Assets
											</label>
										</div>
									</div>
									<div class="col-sm-3">
										<span class="field-validation-valid" data-valmsg-for="AssetType" data-valmsg-replace="true"></span>
									</div>
								</div>
							</div>
						<div class="form-group">
							<label class="col-sm-4 control-label" for="GroupByKey">Group By</label>
							<div class="col-sm-5">
								<select id="GroupByKey" name="GroupByKey" class="form-control">
									<option key="" value="">None</option>
								</select>
							</div>
							<div class="col-sm-3">
								<span class="field-validation-valid" data-valmsg-for="GroupByKey" data-valmsg-replace="true"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label" for="OrderByKey">Order By</label>
							<div class="col-sm-5">
								<select id="OrderByKey" name="OrderByKey" class="form-control">
									<option key="" value="">None</option>
								</select>
							</div>
							<div class="col-sm-3">
								<span class="field-validation-valid" data-valmsg-for="GroupByKey" data-valmsg-replace="true"></span>
							</div>
						</div>
						<div class="form-group">
							<div class="form-group no-margin-bottom">
								<label class="col-md-4 control-label">Order By Direction</label>
								<div class="col-md-5">
									<div class="radio">
										<label>
											<input checked="checked" data-val="true" data-val-required="The OrderByIsAscending field is required." id="OrderByIsAscendingAsc" name="OrderByIsAscending" type="radio" value="true">
											Ascending
										</label>
									</div>
									<div class="radio">
										<label>
											<input id="OrderByIsAscendingDesc" name="OrderByIsAscending" type="radio" value="false">
											Descending
										</label>
									</div>
								</div>
								<div class="col-sm-3">
									<span class="field-validation-valid" data-valmsg-for="OrderByIsAscending" data-valmsg-replace="true"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<h4>Report Delivery Schedules <span rel="tooltip" title="" data-original-title="Reports can be queued for delivery via email at a specifed time to specified recipients"><span class="glyphicon glyphicon-question-sign"></span></span></h4>
				<div id="scheduleArea" class="row">
					<div class="col-md-8">
							<div class="schedule hidden">
								<div class="form-group">
									<label class="control-label col-md-4" for="Schedules[0].Type">Frequency</label>
									<div class="col-md-5">
										<input type="hidden" name="Schedules[0].Id" value="">
										<select class="typeSelector form-control" name="Schedules[0].Type">
											<option value="">None</option>
											<option value="O">Once</option>
											<option value="D">Daily</option>
											<option value="W">Weekly</option>
											<option value="M">Monthly</option>
										</select>
									</div>
								</div>
								<div class="form-group scheduleDiv scheduleOnce date hidden">
									<label class="control-label col-md-4" for="Schedules[0].Type_Once_Date">Start Date</label>
									<div class="col-md-5">
										<input name="Schedules[0].Type_Once_Date" type="text" class="datepicker form-control" value="">
										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
								</div>
								<div class="form-group scheduleDiv scheduleOnce time hidden">
									<label class="control-label col-md-4" for="Schedules[0].Type_Once_Time">Start Time</label>
									<div class="bootstrap-timepicker col-md-5">
										<input name="Schedules[0].Type_Once_Time" type="text" class="timepicker form-control" value="">
										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
								</div>
								<div class="form-group scheduleDiv scheduleDaily date hidden">
									<label class="control-label col-md-4" for="Schedules[0].Type_Daily_Date">Start Date</label>
									<div class="col-md-5">
										<input name="Schedules[0].Type_Daily_Date" type="text" class="datepicker form-control" value="">
										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
								</div>
								<div class="form-group scheduleDiv scheduleDaily time hidden">
									<label class="control-label col-md-4" for="Schedules[0].Type_Daily_Time">Start Time</label>
									<div class="col-md-5 bootstrap-timepicker">
										<input name="Schedules[0].Type_Daily_Time" type="text" class="timepicker form-control" value="">
										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
								</div>
								<div class="form-group scheduleDiv scheduleDaily int hidden">
									<label class="control-label col-md-4" for="Schedules[0].Type_Daily_RunEvery">Run every</label>
									<div class="col-md-5">
										<input name="Schedules[0].Type_Daily_RunEvery" size="3" type="text" class="form-control" value="1"> day(s)
										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
								</div>
								<div class="form-group scheduleDiv scheduleWeekly time hidden">
									<label class="control-label col-md-4" for="Schedules[0].Type_Weekly_Time">Start Time</label>
									<div class="col-md-5 bootstrap-timepicker">
										<input name="Schedules[0].Type_Weekly_Time" type="text" class="timepicker form-control" value="">
										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
								</div>
								<div class="form-group scheduleDiv scheduleWeekly weekDays hidden">
									<input type="hidden" name="Schedules[0].Type_Weekly_Days" value="">
									<label class="control-label col-md-4">Days</label>
									<div class="col-md-5">
										
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Weekly_Days[0]" name="Schedules[0].Type_Weekly_Days" value="0">
															Sunday
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Weekly_Days[1]" name="Schedules[0].Type_Weekly_Days" value="0">
															Monday
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Weekly_Days[2]" name="Schedules[0].Type_Weekly_Days" value="0">
															Tuesday
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Weekly_Days[3]" name="Schedules[0].Type_Weekly_Days" value="0">
															Wednesday
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Weekly_Days[4]" name="Schedules[0].Type_Weekly_Days" value="0">
															Thursday
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Weekly_Days[5]" name="Schedules[0].Type_Weekly_Days" value="0">
															Friday
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Weekly_Days[6]" name="Schedules[0].Type_Weekly_Days" value="0">
															Saturday
														</label>
													</div>
												

										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
								</div>
								<div class="form-group scheduleDiv scheduleMonthly int hidden">
									<label class="control-label col-md-4" for="Schedules[0].Type_Monthly_RunOnDay">Day of the month</label>
									<div class="col-md-5">
										<input name="Schedules[0].Type_Monthly_RunOnDay" type="text" class="form-control" value="">
										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
									<div class="col-md-3">
										<span rel="tooltip" title="" data-original-title="If the the number is greater than the month, the last day of the month will be used"><span class="glyphicon glyphicon-question-sign"></span></span>
									</div>
								</div>
								<div class="form-group scheduleDiv scheduleMonthly time hidden">
									<label class="control-label col-md-4" for="Schedules[0].Type_Monthly_Time">Start Time</label>
									<div class="col-md-5 bootstrap-timepicker">
										<input name="Schedules[0].Type_Monthly_Time" type="text" class="timepicker form-control" value="">
										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
								</div>
								<div class="form-group scheduleDiv scheduleMonthly monthList hidden">
									<input type="hidden" name="Schedules[0].Type_Monthly_Months" value="">
									<label class="control-label col-md-4">Months</label>
									<div class="col-md-5">
										
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Monthly_Months[0]" value="0">
															January
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Monthly_Months[1]" value="0">
															February
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Monthly_Months[2]" value="0">
															March
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Monthly_Months[3]" value="0">
															April
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Monthly_Months[4]" value="0">
															May
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Monthly_Months[5]" value="0">
															June
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Monthly_Months[6]" value="0">
															July
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Monthly_Months[7]" value="0">
															August
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Monthly_Months[8]" value="0">
															September
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Monthly_Months[9]" value="0">
															October
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Monthly_Months[10]" value="0">
															November
														</label>
													</div>
												
												
													<div class="checkbox">
														<label class="day">
															<input type="checkbox" id="Schedules[0].Type_Monthly_Months[11]" value="0">
															December
														</label>
													</div>
												

										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
								</div>
								<div class="form-group endDate date hidden">
									<label class="control-label col-md-4" for="Schedules[0].EndDate">End Date</label>
									<div class="col-md-5">
										<input name="Schedules[0].EndDate" type="text" class="datepicker form-control" value="">
										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
								</div>
								<div class="form-group timeZone  hidden">
									<label class="control-label col-md-4" for="Schedules[0].DefaultTimeZone">Time Zone</label>
									<div class="col-md-5">
										<select class="form-control" name="Schedules[0].DefaultTimeZone">
													<option value="0"></option>
													<option value="36">(UTC+00:00) Dublin, Edinburgh, Lisbon, London</option>
													<option value="38">(UTC+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
													<option value="39">(UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
													<option value="40">(UTC+01:00) Brussels, Copenhagen, Madrid, Paris</option>
													<option value="41">(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb</option>
													<option value="76">(UTC+07:00) Bangkok, Hanoi, Jakarta</option>
													<option value="78">(UTC+08:00) Beijing, Chongqing, Hong Kong, Urumqi</option>
													<option value="80">(UTC+08:00) Kuala Lumpur, Singapore</option>
													<option value="81">(UTC+08:00) Perth</option>
													<option value="85">(UTC+09:00) Osaka, Sapporo, Tokyo</option>
													<option value="87">(UTC+09:30) Adelaide</option>
													<option value="88">(UTC+09:30) Darwin</option>
													<option value="89">(UTC+10:00) Brisbane</option>
													<option value="90">(UTC+10:00) Canberra, Melbourne, Sydney</option>
													<option value="96">(UTC+12:00) Auckland, Wellington</option>
													<option value="24">(UTC-03:00) Brasilia</option>
													<option value="23">(UTC-03:30) Newfoundland</option>
													<option value="19">(UTC-04:00) Atlantic Time (Canada)</option>
													<option value="20">(UTC-04:00) Cuiaba</option>
													<option value="21">(UTC-04:00) Georgetown, La Paz, Manaus, San Juan</option>
													<option value="22">(UTC-04:00) Santiago</option>
													<option value="14">(UTC-05:00) Bogota, Lima, Quito, Rio Branco</option>
													<option value="15">(UTC-05:00) Eastern Time (US &amp; Canada)</option>
													<option value="16">(UTC-05:00) Indiana (East)</option>
													<option value="10">(UTC-06:00) Central America</option>
													<option selected="&quot;selected&quot;" value="11">(UTC-06:00) Central Time (US &amp; Canada)</option>
													<option value="12">(UTC-06:00) Guadalajara, Mexico City, Monterrey</option>
													<option value="13">(UTC-06:00) Saskatchewan</option>
													<option value="7">(UTC-07:00) Arizona</option>
													<option value="8">(UTC-07:00) Chihuahua, La Paz, Mazatlan</option>
													<option value="9">(UTC-07:00) Mountain Time (US &amp; Canada)</option>
													<option value="5">(UTC-08:00) Baja California</option>
													<option value="6">(UTC-08:00) Pacific Time (US &amp; Canada)</option>
													<option value="4">(UTC-09:00) Alaska</option>
													<option value="3">(UTC-10:00) Hawaii</option>

										</select>
									</div>
									<div class="col-md-3">
										<span rel="tooltip" title="" data-original-title="The default timezone can be changed on the Profile page"><span class="glyphicon glyphicon-question-sign"></span></span>
										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
								</div>
								<div class="form-group export hidden">
									<label class="control-label col-md-4">Export As</label>
									<div class="col-md-5">
										<div class="radio">
											<label>
												<input type="radio" checked="&quot;checked&quot;" name="Schedules[0].IsExcelExport" id="Schedules[0]IsExcelExportCSV" value="false">
												CSV
											</label>
										</div>
										<div class="radio">
											<label>
												<input type="radio" checked="&quot;checked&quot;" name="Schedules[0].IsExcelExport" id="Schedules[0]IsExcelExportExcel" value="true">
												Excel
											</label>
										</div>
									</div>
								</div>
								<div class="form-group emailAddresses hidden">
									<label class="control-label col-md-4" for="Schedules[0].EmailAddresses">Email Address</label>
									<div class="col-md-5">
										<input class="form-control" name="Schedules[0].EmailAddresses" type="text" value="">
										<span class="field-validation-error hidden">
											<span></span>
										</span>
									</div>
									<div class="col-md-3">
										<span rel="tooltip" title="" data-original-title="Enter multiple email addresses separated by commas"><span class="glyphicon glyphicon-question-sign"></span></span>
									</div>
								</div>
							</div>
							<div class="clearfix"></div>
					</div>
					<div class="col-md-4"></div>
				</div>
				<span id="showSchedule" class="btn btn-default">Add Report Delivery </span> <span rel="tooltip" title="" data-original-title="A report can have multiple delivery schedules and each one generates the report and emails the results"><span class="glyphicon glyphicon-question-sign"></span></span>
				<div class="row">
					<div class="col-md-12">
						<br>
						<button id="saveReport" type="submit" class="btn btn-primary disabled" name="saveReport" value="yes">Save Report</button>
											</div>
				</div>

				<div id="modelArea" class="hidden">
				</div>
			</fieldset>
</form>		<script type="text/javascript" defer="">
	        var scheduleCurrentIndex = 0;
	        var userEmail = '';
	        var errorRequired = 'Field is required.';
	        var errorInvalidEmail = 'Invalid email address(s)';
	        var errorMustBePositiveNumber = 'Must be a positive number';
	        var errorAtLeastOneDay = 'At least one day must be selected';
	        var errorAtLeastOneMonth = 'At least one month must be selected';
	        var errorInvalidDayOfMonth = 'Invalid day of the month';
	        var deleteConfirmation = 'Delete Report?';
	        var uniqueReportUrl = '/US/en-US/Unit/IsReportNameUnique'
	        var dateFormat = 'm/d/yyyy';
	        var isNewReport = true;
	        var errorEmailOutsideDomain = 'Only email addresses that are within your company domain are allowed to receive report deliveries.';

		</script>

<script>
	$(function() {
		$(".jqbuttons").on('click',function () {
			//getvalue(this.id);
			console.log("button clicked1");
			console.log(this.id);
		});
	});
</script>
<script type="text/javascript">
	//camilla change

	function getvalue(id) {
		console.log("button clicked");
		console.log(id);
	}

	

	$(document).ready(function () {


		//$(".jqbuttons").on('click',function () {
		//	//getvalue(this.id);
		//	console.log("button clicked1");
		//	console.log(this.id);
		//});


		

		var colNames = [];
		var colModelsArray = [];
		

		function getColNames(data) {
			//console.log(data);

			//console.log( data[0].attributes.key);

			//console.log(data[0])
			//var keys = [];
			//for (var key in data) {

			//	console.log("key " + key[0])
			//	//console.log(data.hasOwnProperty(key))

			//	//if (data.hasOwnProperty(key)) {
			//		keys.push(key);
			//	//}
			//}


			var btn = "<button style='background-color:lightblue;border:none;' class='jqbuttons' id = " + data[0].attributes.key.nodeValue + "  type='button'><span class='glyphicon glyphicon-remove'></span></button>"; 
			colNames.push(data[0].innerHTML + " " + btn);

			console.log(colNames);
			return colNames; 
		}


		function getColKeys(data) {

			//console.log("in getColKeys");
			//console.log( data[0])
			//console.log(data[0].attributes.key.nodeValue)

			var colKeys = [];

			
			console.log("keys")
			colKeys.push(data[0].attributes.key.nodeValue );

			//console.log("colkeys  " + JSON.stringify(colKeys));
			return colKeys;
		}


		function  getColModels(data) {
			

			var columns = getColKeys(data);

		//	console.log("columns for grid", JSON.stringify(columns));
			
			for (var i = 0; i < columns.length; i++) {
				var str;
				if (i === 0) {
					str = {
						name: columns[i],
						index: columns[i],
						//key:true,
						//editable:true
					};
				} else {
					str = {
						name: columns[i],
						index: columns[i],
						//editable:true
					};
				}
				colModelsArray.push(str);
				
			}
			console.log( JSON.stringify(colModelsArray))

			return colModelsArray;
		}

		$("#availableFieldList2").on('dblclick', 'li', function () {
			
			var colNames =  getColNames($(this));
			
			var colModels = getColModels($(this));

			buildGrid(colNames, colModels);

			//$(this).removeClass('ui-selectee ui-selected'); //maybe put back
			//$(this).addClass('ui-selectee');
		});



		function buildGrid(colNames, colModels)
		{
			//$.jgrid.styleUI.Bootstrap.base.headerTable = "table table-condensed table-hover";
			//$.jgrid.styleUI.Bootstrap.base.rowTable = "table table-condensed table-hover";
			//$.jgrid.styleUI.Bootstrap.base.footerTable = "table table-condensed table-hover";

			console.log("in grid creation")

			//$('#gridColumns').jqGrid('clearGridData')
			//$('#gridColumns').jqGrid('setGridParam', {data: null, page: 1})
			//$('#gridColumns').trigger('reloadGrid');

			//$(".central-block").replaceWith(function () {
			//	return "<div class='central-block'><div class='columns-title'>Columns</div><table id='gridColumns'></table></div>";
			//});

			//$('#gridColumns').remove();

			$(".central-block").replaceWith(function () {
				return "<div class='central-block'><div class='columns-title'>Columns</div><table id='gridColumns'></table></div>";
			});

			

			//$("#gridColumns").clearGridData(true).trigger("reloadGrid");

			
			$('#gridColumns').jqGrid({
				//url: '/US/en-US/Unit/FetchReportResults/0',
				styleUI: 'Bootstrap',
				responsive: true,
				//hoverrows: true,
				//datatype: 'json',
				colNames: colNames,
				colModel: colModels,
				//rowNum: 10,
				//rowList: [10, 50, 100],
				//pager: '#pager',
				viewrecords: true,
				height: 120,
				shrinkToFit: false,
				width: 640,
				refresh: true,
				search: false,
				sortable: true
				
			});
		}


		//delete grid-column grid
		

		//end of camilla change
	});
	
</script>
<div class="userGuideArea text-right">
    <a target="_blank" href="/Documents/UserGuideReporting.pdf">User Guide</a>
</div>
    </div>
            <div class="modal fade" id="modalLogout">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close modalClose" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Logging Out</h4>
                    </div>
                    <div class="modal-body">
                        <p>You are about to be logged out. Please press continue to stay logged in.</p>
                        <p>Countdown:  <span id="countDown"></span></p>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-default" href="/US/en-US/Unit/Logoff?Length=7">Logout</a>
                        <button type="button" class="btn btn-primary modalClose" data-dismiss="modal">Continue</button>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                var relativePathAndQuery = '/US/en-US/Unit/ExecuteReport';

                
                    
                        var intervalCountdown;

                        var checkTimer = function () {
                            setTimeout(function () {
                                $('#modalLogout').modal({ backdrop: 'static', show: true });

                                // Set secondary timeout to auto logout
                                var countDown = 30;
                                intervalCountdown = setInterval(function () {
                                    $('#countDown').text(countDown);
                                    countDown = countDown - 1;
                                    if (countDown < 0) {
                                        clearInterval(intervalCountdown);

                                        var url2 = new URI('http://localhost:56303/US/en-US/Account/Logoff');
                                        url2.addQuery('ReturnUrl', relativePathAndQuery);
                                        url2.addQuery('AutoLogout', 'true');
                                        window.location.href = url2;
                                    }
                                }, 1000);
                            }, 1200000);
                        }

                        $('button.modalClose', '#modalLogout').bind('click', function() {
                            // Refresh login
                            clearInterval(intervalCountdown);
                            checkTimer();

                            $.ajax({
                                url: '/US/en-US/Account/ExtendLogin',
                                traditional: true,
                                success: function (data) {
                                    if (!data) {
                                        var url3 = new URI('http://localhost:56303/US/en-US/Account/LogOn');
                                        url3.addQuery('ReturnUrl', relativePathAndQuery);
                                        url3.addQuery('SessionEnded', 'true');
                                        window.location.href = url3;
                                    }
                                }
                            });
                        });

                        checkTimer();
                    
            });
        </script>
    <div id="ReleaseNoteParentArea"></div>
    <footer>
        <div class="footerTop">
            <ul>
                    <li><a href="/US/Home/UserAgreement">Terms of Use</a></li>
                <li><a class="privacyPolicy" target="_blank" href="http:///privacy-policy">Privacy Policy</a></li>
                <li><a class="safeHarbor" target="_blank" href="http:///privacyshield//">Privacy Shield</a></li>
                        <li><a href="/US/Account/ContactUs">Contact Us</a></li>
            </ul>
        </div>
        <div class="footerBottom">
            Copyright © 2005 - <span id="endYear">2018</span> All rights reserved.
        </div>
    </footer>

</body></html>

Open in new window

0
Julian HansenCommented:
I copied your code to a file.
Added my jquery path and bootstrap + bootstrap.js
Works out of the box.
You can see it working here

The only other thing I can think of is that one of the other libraries is interferring. I added jqgrid, jquery-ui and jquery-validate - still seems fine.
1
CamilliaAuthor Commented:
I'll go step by step and see what's interferring. Thanks for looking at this.
0
Jeffrey Dake Senior Director of TechnologyCommented:
Only other thing I can think of is that maybe there is a css issue.  When you add the class on the button, are you sure it isn't causing you to not really click the button.  Maybe try leaving the onclick on the anchor and adding the class to see if somehow maybe the browser isn't thinking you are clicking the right thing when the class is present.  Kind of a long shot, but an idea.
0
CamilliaAuthor Commented:
Don't think that's the issue because Julian's example shows the code works.

I'll dig deeper. Not a showstopper
0
CamilliaAuthor Commented:
I took the references out one by one and still didn't work. I'll create a new page with just those 2 controls and see if that works.
0
Julian HansenCommented:
Good idea - go from a working version - add the bits from your not working page until it breaks.

Also try this

Add the debugger; command just inside the document.ready and then just inside the click handler and see if they fire.
Alternatively, if you don't like the debugger option, put some console.log statements instead.

If you are familiar with the debugger you can also set break points on the code (entry to document ready and inside click handler) and see if they fire.

On FF if you inspect element it should also show you whether an event handler is bound to an element with an ev icon. Look at your jqbuttons element and see if the icon is there - if so click it to see what handlers are bound.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CamilliaAuthor Commented:
Thanks, Julian, I've used the debugger before. I'll put console.log...easier for me to debug.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.