Solved

Jqgrid not passing field value

Posted on 2014-02-10
2
876 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 42

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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)

747 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

12 Experts available now in Live!

Get 1:1 Help Now