Solved

Jqgrid not passing field value

Posted on 2014-02-10
2
887 Views
Last Modified: 2014-02-14
I have what I think is a very simple form:

<form action="#buildURL('email?emailstep=attachments')#" id="frmAttachments" name="frmAttachments" method="post">
	
<div class="row-fluid">
	<div id="basicsearchformcontainer" class="searchCont">
		<div class="row-fluid text-left">
			<div class="span12 text-left">
            	<label for="searchstring"><strong>Search Documents</strong></label>
			<div class="input-append">
            	<input name="searchstring" id="searchstring" type="text" placeholder="Enter Text" value="" />
                <button type="submit" class="btn" id="btnSearch"><i class="icon-trigger magnifier"></i></button> 
			</div>
			</div>
		</div>
</div>
</form>

	<div class="span10">
		<div id="GridContainer">
		<table id="gridResults"></table>
		<div id="gridPager"></div>
		<br />
	</div>
    <input type="button" class="button extrapadding" id="btnClear" value="Clear" />

Open in new window



It includes this .js and submits to it for the query results. It is not carrying over the variable: searchstring to the json post and I can NOT figure out why.  Another problem I'm having is keeping the grid hidden until the form is submitted. Any help would be greatly appreciated.


/**  
* TEMPLATE    
* /assets/js/modules/email/selectattachments.js
* 
* PURPOSE
* Script for the Search page and grid
*/

var entityTypeCode = ""
	, resizeGrid = function(){return;}
	, resizeTimer = null
	, selArr = []
	, grid = $('#gridResults');


jQuery(document).ready(function($) {

	buildjqGrid();

	$(window).resize(function(){
	clearTimeout(resizeTimer);
	resizeTimer = setTimeout("resizeGrid();", 100);
	});

	return;
});
//end onReady

//search submit
$('#btnSearch').on("click",function(e){
	if ($.trim($('#searchstring').val()).length > 0) {
		//alert($('#searchstring').val());
		window.location.assign('index.cfm?do=admin:email&emailstep=attachments&searchstring=' + $('#searchstring').val() );
	}
	else {
		return alert('A search term is required.');
	}
});

//clear
$('#btnClear').on("click",function(e){
	window.location.assign('index.cfm?do=admin:email&emailstep=attachments' );
});
$('#btnClear').on("click",function(e){
	if ($.trim($('#searchstring').val()).length > 0) {
	$('#searchstring').val('');
	}
});

resizeGrid = function(){
	var contentWidth = $("#GridContainer").width();
	$("#gridResults").jqGrid('setGridWidth',contentWidth,true);
	$("#gridResults").show();
	$("#gridPager").show();
	};


function openFileModal(JLLISFileID) {
	$("#FileDataTable").html($("#FileDataTable").load("/cfc/Services/KeywordSearchRemote.cfc?method=getJLLISFileEntitiesByJLLISFileID",{nJLLISFileID:JLLISFileID,cDSN:cfrequest.dsn}));
	$('#FileDetailsModal').modal("show")
	}

function transformData (data) {
	return data.replace(/[^\x20-\x7E\xA1-\xFF]+/g,"");
}

function setGrid () {
	resizeGrid();
}

function buildjqGrid() { 
	// clear out selArr when changing grids
	selArr = [];
	searchstring = '';

	$("#GridContainer").show();
		if (  typeof cfrequest.oFormData.searchstring !== 'undefined')
		{
			cfrequest.oFormData.searchstring = searchstring
		}		

	// setup cfrequest variables
	var grid = $("#gridResults")
		, gCfg = {	
			prmNames:{
			page: 'pageIndex', 
			sort: 'sortCol', 
			order: 'sortDir', 
			rows: 'pageSize'
		},

	postData: {
		method: "getJLLISFilesBySearchCriteria",
		returnFormat: "json",
		dsn: cfrequest.dsn,
		instanceid: 0,
		userID: cfrequest.userId, 
		oFormData: $.toJSON({
		JLLISFileName: searchstring 
		})
		
	},
	
	datatype: function (postdata) {
		var $that = $(this); 
		$("#GridContainer").mask("Loading..."); 
		$.ajax({
			url: "/cfc/Services/JLLISFileRemote.cfc",
			data: postdata,
			type: 'POST',
			dataType: 'json',
			dataFilter: transformData,
			success: function(d, r, o){ 
				if (d.success) 
					$that[0].addJSONData($.serializeCFJSON(d));
				else
					bootbox.alert("There was an error in retrieving this data<br>" + d.message);
					$("#GridContainer").unmask(); 
				},
					error: function () {
					bootbox.alert("There was an error in making your search.");
					$("#GridContainer").unmask();
				}
			});
			},
		width:"auto",
		height:"auto",
		colModel: 
		[
  		{name: "classificationabbreviation", index: "classificationabbreviation", label: "Class", width: 325, fixed: false, align: 'center'},
  		{name: 'jllisfilename', formatter: function (v, o, r) {return JLLISFileLinkFormatter(v, o, r)}, index: 'jllisfilename', label: "File Name", sortable: true, fixed: true, width: 500},
  		{name: 'name', index: 'name', label: 'Posted By', width: 175, fixed: true, sortable: true},
  		{name: 'createdateformatted', index: 'createdateformatted', label:"Posted Date", width: 95, fixed: true, sortable: true}

		],
	jsonReader : {
	 	repeatitems: true,
	 	root: "data",
	 	page: "pageindex",
	 	total: "pagecount",
	 	records: "recordcount",
	 	id: "jllisfileid"
		},
		pager: $("#gridPager"),
		pgtext : "Page {0} of {1}",
		identCol: "jllisfileid",
		sortCol: "JLLISFileName",
		sortorder:"ASC",
		viewrecords:true,
		autowidth:true,
		headertitles: true,
		toppager:true,
		pagerpos:'left',
		rowNum:25,
		rowList:[25,50,75,100],
		loadui: "block",
		//onSelectRow: rowSelectionHandler,
		//onSelectAll: selectAllHandler,
		gridComplete: setGrid,
		multiselect: true,
		//multiboxonly: true,
		multiselectWidth:25,
		gridComplete: setGrid
	};
	var JLLISFileLinkFormatter = function (val, opts, row) 
		{

			return '<div><div class="pull-right"><a href="javascript:openFileModal(' + "'" + row["jllisfileid"] + "'" + ');"><img src="/assets/icons/magnifier.png" alt="View File Details" /></a></div><a href="/cfc/Services/JLLISFileRemote.cfc?method=JLLISFileDownloadByGUID&GUID=' + row["physicalfilename"] + '" title="' + val + '" target="_blank">' + val + '</a></div>';
			};

grid.jqGrid(gCfg);
//end jqGrid
}

Open in new window

0
Comment
Question by:traport
2 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39849003
Your binding a click event to a submit button so when you click it, it will also submit the form (as if you had no click event). You need to prevent the normal submit, so your jQuery can handle it. You do this by preventing the default behaviour:

$('#btnSearch').on("click",function(e){
	e.preventDefault();
	if ($.trim($('#searchstring').val()).length > 0) {
	...

Open in new window

As for the grid - I don't know coldfusion so can't help with specifics.

It looks like you are loading a new page, rather than making an AJAX call, so in your page set the grid to hidden using CSS (display:none;) and then check whether the page has been loaded with a search string. If it has then just change the CSS to display:block.  Here's the general pseudo code to give you an idea:

<div id="GridContainer" style="display: { (if page loaded with search) ? block : none; }">
   <table id="gridResults"></table>
   <div id="gridPager"></div>
</div>
0
 

Author Closing Comment

by:traport
ID: 39858734
I'm sorry this took me so long to get back to you. This did solve part of the problem. Thanks.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now