Need help creating JQuery dialog on the tableview page

dlee · Post by **dlee** » 2025-03-01 03:48

On my inspection-tv.js page I added a button that I want to use to open a JQuery UI dialog while on the inspections-tv.php page for the user to enter a date range before proceeding on to a fpdf report i created that needs the dates as input. I created a separate page, daterange.php, just to experiment with creating the dialog and the code in that page is listed below. I also have included the code I use to create the "Failure Report" button on the inspections-tv.js page; at the moment i have the button sending the user to the daterange.php page just to see if the button works.

How can I accomplish this?
TD

inspections-tv.js

Code: Select all

// add print failure report button
	$j(function(){
		$j("#NoFilter").after('<button class="btn btn-default" type="button" id="failures">Failure Report</button>');
		
		$j('button[id=failures]').click(function(){
              window.location = 'hooks/daterange.php';
        });	
	});

daterange.php

Code: Select all

<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
  
  <script>
  $( function(){
    $( "#dateFrom" ).datepicker();
	$( "#dateTo" ).datepicker();
	$( "#dialog" ).dialog();
	$( "#dialog" ).dialog({ title: "Select Date Range"});
	$( "#dialog" ).dialog({	height: 250, width: 325 });
  });
  </script>
  
  <style>
	p {
		float: right;
	}	
	input {
		float: right;
	}
	button {
		margin-left:auto;
		margin-right:auto;
	}
  </style>
  
</head>
<body>

<div id="dialog">
	<br>
	<form >
		<p>FROM:&nbsp&nbsp<input type="text" class="form-inline" id="dateFrom" style="text-align:center;"></p>
		<br>
		<br>
		<p>TO:&nbsp&nbsp<input type="text" class="form-inline" id="dateTo" style="text-align:center;"></p>
		<br>
		<br>
		<button type="button" class="btn border border-dark" onclick="js:alert('Dialog Button Test')">&nbspOK&nbsp</button>
	</form>
</div>
</body></html>
<?php
?>

dlee · Post by **dlee** » 2025-03-06 04:16

Anyone done this before?

saymaad · Post by **saymaad** » 2025-03-06 06:43

inside your inspections-tv.js, instead of using window.location() use the following code to open daterange.php (concluded from your script that it is stored on the root):

Code: Select all

modal_window({
	url: 'daterange.php',
	size: 'full',
	title: 'Failure Report'
});

dlee · Post by **dlee** » 2025-03-06 19:20

Thanks for helping! What kind of code is this, Javascript, JQuery, Bootstrap, Windows ? I would like to learn more about this is why I ask.
TD

dlee · Post by **dlee** » 2025-03-07 03:36

OK, taking a different approach. In this setup when the Failure Report button is clicked the 'clicked' alert appears but the dialog never does. I used Chrome, Inspect, Console to look for js errors but there are no errors. Any idea why the dialog does not appear? Any help with this would be greatly appreciated!
TD

inspections-tv.js

Code: Select all

	// adds print failure report button
	$j(function(){
		$j('#NoFilter').after('<button class="btn btn-default" type="button" id="failures" onclick="fDlg()">Failure Report</button>');
	});
	
	function fDlg(){
		alert('clicked'); // here just for testing
		
		$j("#dlg").load("./hooks/daterange.html");
		$j("#dlg").dialog({
			title: "Select Date Range",
			resizable: false,
			draggable: true,
		        modal: true,
		         height: 250,
		         width: 325,
		         closeOnEscape: false
               });
	};

datarange.html

Code: Select all

  <script>
	$j( function(){
		$( "#dateFrom" ).datepicker();
		$( "#dateTo" ).datepicker();
		//$( "#dlg" ).dialog();
	});
  </script>
  
  <style>
	p {
		float: right;
	}	
	input {
		float: right;
	}
	button {
		margin-left:auto;
		margin-right:auto;
	}
  </style>

<div id="dlg">
	<br>
	<form >
		<p>FROM:&nbsp&nbsp<input type="text" class="form-inline" id="dateFrom" style="text-align:center;"></p>
		<br>
		<br>
		<p>TO:&nbsp&nbsp<input type="text" class="form-inline" id="dateTo" style="text-align:center;"></p>
		<br>
		<br>
		<button type="button" class="btn border border-dark" onclick="js:alert('Dialog Button Test')">&nbspOK&nbsp</button>
	</form>
</div>

saymaad · Post by **saymaad** » 2025-03-07 06:44

The code I shared is JS, and it should be part of the inspections-tv.js file like I mentioned in my earlier comment.

Code: Select all

	// adds print failure report button
	$j(function(){
		$j('#NoFilter').after('<button class="btn btn-default" type="button" id="failures" onclick="fDlg()">Failure Report</button>');
	});
	
	function fDlg(){
		console.log('Failure report button clicked, the modal window should now load daterange.html from application root directory'); 
/*
 The above line is here just for testing, check the console if this button is working instead of alert.
 Note I have changed the extension from php to html based on your latest file name revision.
 The following line will work only if your file is located on root, if it is in hooks folder, change the path accordingly.
 You may need to clear cache (CTRL + F5 on windows) to force loading of the latest JS code.
*/
		
		modal_window({
			url: 'daterange.html',
			size: 'full',
			title: 'Failure Report'
		});
	};

AppGini Community Forums

Need help creating JQuery dialog on the tableview page

Need help creating JQuery dialog on the tableview page

Re: Need help creating JQuery dialog on the tableview page

Re: Need help creating JQuery dialog on the tableview page

Re: Need help creating JQuery dialog on the tableview page

Re: Need help creating JQuery dialog on the tableview page

Re: Need help creating JQuery dialog on the tableview page