?
Solved

Jqgrid not passing field value

Posted on 2014-02-10
2
Medium Priority
?
954 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 1500 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses

762 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