Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Jqgrid not passing field value

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

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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to dynamically set the form action using jQuery.
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

618 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