Text Input and Grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Coldfusion, Input, jqxgrid, json, text

This topic contains 6 replies, has 2 voices, and was last updated by Larryp88 11 years, 6 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Text Input and Grid Posts

May 18, 2013 at 4:03 am Text Input and Grid #21368

Participant

I have a text input field with a button and a grid on the page. I have it set up so you can type a last name and click the button and the json connection runs the Coldfusion CFC and returns all the records in the database that match the last name you entered. Seems simple enough. But I can only get it to work when I define an initial “value=” in the input field. If I type something in the field and click the button the grid does not update. I know that it is running the CFC because I put some code in there to output to a txt file the date/time and the value of the field that was passed in and the number of records it selected. If I don’t put an initial value in, I never get anything showing in the grid. It’s as if the data is there but it won’t show in the grid.

I’ve tried everything that I have come across, including the updatebounddata (which causes an extra hit to the database but passes in nothing (unless I set an intial value, then it passes that in again).

Is there an example on the site that I haven’t found yet that shows what I am missing? Here’s my code. You can see by the lines I’ve commented out what all I’ve tried, and combinations of them.

<cfset hTheme = 'highcontrast'>
<!DOCTYPE html>
<html lang="en">
    <head>
    <title id='Description'>Testing grid with CFC and Text Input</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.<cfoutput>#hTheme#</cfoutput>.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script><!-- this is the most stable version and works with Chrome and Firefox -->
    <script type="text/javascript" src="jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '<cfoutput>#hTheme#</cfoutput>';
            var source =
            {
                datatype: "json",
                datafields:
                [
                    { name: 'seqid', type: 'string' },
                    { name: 'fullcaseno', type: 'string' },
                    { name: 'defname', type: 'string' },
                    { name: 'dob', type: 'string' },
                    { name: 'race', type: 'string' },
						  { name: 'gender', type: 'string' },
                    { name: 'statusdesc', type: 'string' },
                    { name: 'judgelastname', type: 'string' }
                ],
					 data: {iData: $("#getcaseinput").val()},
                url: 'getCases.cfc?method=gCases'
            };
				
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 750,
                height: 558,
                source: dataAdapter,
					 sortable: true,
					 pageable: true,
					 pagesize: 20,
					 columnsresize: true,
                theme: theme,
                columns: [
                  { text: 'ID', datafield: 'seqid', width: 50 },
                  { text: 'Case Number', datafield: 'fullcaseno', width: 135 },
                  { text: 'Defendant', datafield: 'defname', width: 218 },
                  { text: 'DOB', datafield: 'dob', width: 95 },
                  { text: 'Race', datafield: 'race', width: 50 },
                  { text: 'Gender', datafield: 'gender', width: 50 },
						{ text: 'Status', datafield: 'statusdesc', width: 90 },
                  { text: 'Judge', datafield: 'judgelastname', width: 110 }
                ]
            });
            // initialize button.            
				$("#getcasebutton").jqxButton({ theme: theme });
				// trigger database search for case.
				$("#getcasebutton").click(function() {
					 $.ajax({
						url: "getCases.cfc?method=gCases",
						type: "get",
						dataType: "json",
						data: {
							iData: $("#getcaseinput").val()
						},
						success: function(data) {
							//var dataAdapter = new $.jqx.dataAdapter(source);
							//$("#jqxgrid").jqxGrid({ source: dataAdapter });
							//$("#jqxgrid").jqxGrid('updatebounddata');
							//$("#jqxgrid").jqxGrid('refresh');
							//$("#jqxgrid").jqxGrid('refreshdata');
							//alert('Blah');
						}
					});
					//dataAdapter.dataBind();
				});
				// hide the ID column
				$("#jqxgrid").on("bindingcomplete", function (event) {
					$("#jqxgrid").jqxGrid('hidecolumn', 'seqid');
				});
        });
    </script>
    </head>
    <body class='default'>
		<div id="jqxgrid"> </div>
		<div style="margin-top: 20px;">
			<div style="clear: both; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; font-size: 12px;">
       		<div style="float: left;">
       			<div>
       				<input value='Pierce' style="width: 100px;" maxlength="20" id="getcaseinput" type="text" />
         			<input id="getcasebutton" type="button" value="Search" />
       			</div>
   			</div>
			</div>
      </div>
	</body>
</html>

May 18, 2013 at 6:40 am Text Input and Grid #21370

Peter Stoev

Keymaster

Hi,

I think that you should use the “formatdata” callback instead of setting the “data” field in that way.
I am posting a help topic which shows how to pass parameters to a server: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

May 18, 2013 at 12:59 pm Text Input and Grid #21374

Larryp88

Participant

Hi Peter,

I’m not clear about what “formatdata” does for me. In the example for it in the page you linked to (which I have already read over multiple times based on the same advice you’ve given in other posts), what is “my data”? I don’t see it defined anywhere in the example. Regardless, you said “instead of”, but the example shows both a “data” entry and a formatdata entry. Very confusing for a newbie.

Is this replacement you speak of in the original defined “source” or as part of my click function?

So I would be replacing this:

data: {iData: $(“#getcaseinput”).val()},

with:

formatdata: function (data) {data.iData = $(“#getcaseinput”).val();},

Maybe I’m not stating my issue correctly… The data I am sending when I click my “Search” button is getting to the server fine the way I have it, and the query I have there in my CFC is executing properly. So it seems like I have something missing in my click function that uses that new data when it comes back, even though it shows the “Loading Data” message on the grid. Also, if I put an initial value in my input text form field, the original load of the page brings back and displays the data perfectly. So I know that the overall setup is correct. It’s just that when I then type something into the input field and click the Search button, it executes the CFC as expected and updates the grid, but the grid is still showing the original data from the initial load. It just feels like I’m missing something pretty basic here but I don’t know enough about it to figure out what it is. Or maybe the order of my code is bad?

By the way, I’m using version 2.8.3 and the latest, updated versions of IE9, Firefox, and Chrome for testing. I know it must be very frustrating for you when people like me read your documentation but don’t get it. And I apologize for that. I was hoping you would have a specific example of what I’m trying to do, since it is a pretty common thing to do. I wish I could just load up the data in the grid and filter it, but I’m dealing with millions of records here, so I need to have the user enter some initial info for the person they are looking for before I hit the database. For testing I am just trying to get it to work with one data field (last name), but eventually I will have 9 search fields in the entry form. Then when they locate the correct person, they’ll click that row in the grid and be taken to a detail page.

Thanks for your assitance.
Larry

May 18, 2013 at 1:02 pm Text Input and Grid #21375

Peter Stoev

Keymaster

Hi Larry,

The difference is that formatdata is called each time an Ajax call is going to be made so whatever that function returns as a result, that will be passed to the server. The “data” field is not an observable property which means that when you initialize the source object, if you do not set the “data” field again, it will use the value that you set during the initialization. I hope its more clear now.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

May 18, 2013 at 1:09 pm Text Input and Grid #21376

Larryp88

Participant

Success!
After typing all of that, I simply deleted everything in my click function and moved the entire source, data adapter line, and grid initialization into my click function. It works as expected, I just don’t have a grid showing on the screen before they submit their first search, but that’s not a problem.

Cheers.
Larry

May 18, 2013 at 1:16 pm Text Input and Grid #21378

Larryp88

Participant

Thank you Peter for your fast reply. I do understand that. That’s why in the click handler I had the data entry tied to the text input field. And that was working fine. I can verify that the typed data into the field was being passed to the server.

Oh well, the way I have it now is working as I need it to, so I am thrilled. I love the widget package that you guys have put together and am excited about using them.

Thanks so much!
Larry

May 18, 2013 at 2:36 pm Text Input and Grid #21379

Larryp88

Participant

In case someone else could use this, here’s the final code for testing: (this is a CFM page, but you can remove/replace the few CF tags as needed and make it an HTM page).

<cfset hTheme = 'highcontrast'>
<!DOCTYPE html>
<html lang="en">
    <head>
    <title id='Description'>Testing grid with CFC and Text Input</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.<cfoutput>#hTheme#</cfoutput>.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script><!-- this is the most stable version and works with Chrome and Firefox -->
    <script type="text/javascript" src="jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '<cfoutput>#hTheme#</cfoutput>';
            // initialize button.            
				$("#getcasebutton").jqxButton({ theme: theme });
				// trigger database search for case.
				$("#getcasebutton").click(function() {
					 var source = {
                	datatype: "json",
                	datafields:
                	[
                    { name: 'seqid', type: 'string' },
                    { name: 'fullcaseno', type: 'string' },
                    { name: 'defname', type: 'string' },
                    { name: 'dob', type: 'string' },
                    { name: 'race', type: 'string' },
						  { name: 'gender', type: 'string' },
                    { name: 'statusdesc', type: 'string' },
                    { name: 'judgelastname', type: 'string' }
                	],
					 	data: {
							iData: $("#getcaseinput").val()
						},
                	url: 'getCases.cfc?method=gCases'
            	};
            	var dataAdapter = new $.jqx.dataAdapter(source);
            	// initialize jqxGrid
            	$("#jqxgrid").jqxGrid({
                	width: 750,
                	height: 558,
                	source: dataAdapter,
						 sortable: true,
					 	pageable: true,
						 pagesize: 20,
					 	columnsresize: true,
                	theme: theme,
                	columns: [
                  	{ text: 'ID', datafield: 'seqid', width: 50 },
                  	{ text: 'Case Number', datafield: 'fullcaseno', width: 135 },
                  	{ text: 'Defendant', datafield: 'defname', width: 218 },
                  	{ text: 'DOB', datafield: 'dob', width: 95 },
                  	{ text: 'Race', datafield: 'race', width: 50 },
                  	{ text: 'Gender', datafield: 'gender', width: 50 },
							{ text: 'Status', datafield: 'statusdesc', width: 90 },
                  	{ text: 'Judge', datafield: 'judgelastname', width: 110 }
                	]
            	});
				});
				// hide the ID column
				$("#jqxgrid").on("bindingcomplete", function (event) {
					$("#jqxgrid").jqxGrid('hidecolumn', 'seqid');
				});
        });
    </script>
    </head>
    <body class='default'>
<div>
      	<input style="width: 100px;" maxlength="20" id="getcaseinput" type="text" autofocus />
      	<input id="getcasebutton" type="button" value="Search" />
      </div>
<div id="jqxgrid"> </div>
</body>
</html>

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.