Solved

Jqgrid not passing field value

Posted on 2014-02-10
2
908 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)

763 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