asked on

jQuery flexigrid help

Hello Experts,
I have a script which returns ajax response to the Flexigrid contol on the page. For some reason it is only working on the first onClick event and ignoring the rest of the clicks. I had to refresh the page in order to the make click event work.
Please can someone look into the code and advice me.
Thanks for your help
Regards
S

newbie27

ASKER

I can see the values been posted to the proxy.asp page on the second click but just not returning any response nor I can see any result been sent to proxy.asp, its not even been called.


 
 
         
function viewList(){
  if($("#drpLists").val() == 0 || $("#drpLists").val() == "new"){
    alert('Please select a list');
  }else{
   
        getListRefs();  
        var sRefNumbers = $("#listRefnos").val();       
        $('#defaultResults').hide();
    var sViewQuery = "SF1=keyword&ST1="+sRefNumbers; 
      
        $("#listDisplay1").flexigrid     
     ({
        url: 'list_proxy.asp?a=results',       
        colModel : [                    
                        {display: '<input type="checkbox" name="chkAll" onclick="checkAll(this.checked)"/> All', name : 'chkDelete', width : 30, sortable : false, align: 'left'},
                        {display: 'Notes', name : 'notes', width : 50, sortable : false, align: 'left'},
           {display: 'Contact    ', name : 'pe_rev_name', width : 150, sortable : true, align: 'left'},
                    {display: 'Compnay Name  ', name : 'co_name', width : 200, sortable : true, align: 'left'},   
                    {display: 'Flag  ', name : 'action_flag', width : 150, sortable : true, align: 'left'},
                    {display: 'Group  ', name : 'co_group', width : 200, sortable : true, align: 'left'}                 
        ],
        buttons : [                             
                                {name: 'Delete', bclass: 'delete', onpress : removeFromList},
                                {separator: true}
                                ],                                      
        sortname: '',
        sortorder: 'asc',
        usepager: false,
        title: 'View List Manager',
        useRp: true,
        rp: 100,
        query : sViewQuery+'&Fields=ref_no,notes,pe_rev_name,co_name,action_flag,co_group',         
        showTableToggleBtn: true,                       
        width: 760,
        height: 350,
        onSuccess:function(){
                $(".edit_area").editable( function(value, settings) { return(value); }, 
                {     
                        submit    : "OK",
                        indicator : "process..........",
                        tooltip   : "Click to edit...",
                           style  : "inherit"
                }
                );
                                 
        }
    });  
    $("#listRefnos").val('');  
  }
 }

Open in new window

hielo

It sounds like you are sending html back after the first ajax request but the returned ajax html response does not contain the onclick event handler in the html markup. Make sure you return the appropriate HTML markup, just like you are doing upon start up.

newbie27

ASKER

hello hielo,
thanks for picking this up, i am sending the same response back on every request but it is picking only at times, please see here

http://213.253.134.6/artism/admin/list_admin.asp

hielo

What am I supposed to click? I am seeing a blank page with not items to add/save.

newbie27

ASKER

that is because i have only test user account for this page and i have just deleted the users account file.
please can you go to

http://213.253.134.6/artism/admin/rdbm_results3.asp?SF1=keyword&ST1=media&SORT=pe_sort_name

add some list to the shortlist and come back ...

thanks

hielo

>>For some reason it is only working on the first onClick event
What is working on the first onclick. I looked at xml returned and none of the checkboxes has onclick="...". This is what I was referring to. The results that you are sending to the ajax requests have no onclick event handlers anywhere.

newbie27

ASKER

Hielo,
I meant to say, after adding a list to the xml file successfully, I would want to view the list saved by picking the name from the drop down and click on view list button, on here, it is picking up the data on the first click and when I change pick other listname and wanted to view its details then it is not showing ..

for ex:
list_builder.asp returning the record ids for a specific listname
e2007091011105134,e2007091011113098,e2007091011073233,e2007092018174409,e2007091011100125

after retrieving the ids , i am doing another database lookup for the above ids from the list_proxy.asp

and this where the query missing the above values on the second click

SF1=keyword&ST1=&Fields=ref_no,notes,pe_rev_name,co_name,action_flag,co_group

this should have been

SF1=keyword&ST1=e2007091011105134,e2007091011113098,e2007091011073233,e2007092018174409,e2007091011100125&Fields=ref_no,notes,pe_rev_name,co_name,action_flag,co_group

hope this helps to understand the problem hielo?

hielo

within $(document).ready you have:
            onSuccess:function()
                         {
            $(".edit_area").editable(
                                    function(value, settings) { return(value); },
                  {
                                          submit : "OK",
                                          indicator : "process..........",
                                          tooltip : "Click to edit...",
                                          style : "inherit",
                                          callback : function (value, settings){if ($(this).hasClass('trSelected')){alert('selected');}      }
                  }
                        }

you are missing the closing parenthesis for this:
$(".edit_area").editable(

Try fixing that first.

newbie27

ASKER

Ok I have removed it for now, actually this was another problem to stop posting jEditable columns for every row, if all the rows are selected then it is fine but it was posting only the selected ones, if few records are selected which you can do by selecting the check boxes within the grid
https://www.experts-exchange.com/questions/23468457/jquery-plugin.html

hielo

>>I would want to view the list saved by picking the name from the drop down and click on view list button
But when you click on the button you are calling viewList() which sends and ajax request to listbuilder.asp which returns a list of the ids, but you do not make an ajax call to the script that generest the required xml for the flexigrid control. In other words, it seems you need to call list_proxy.asp as well (after every button click).

newbie27

ASKER

hello hielo,
thanks for your comment,
i am also calling list_proxy.asp soon i get the result which comma separated record ids

getListRefs(); ' this returns a list of ids
var sRefNumbers = $("#listRefnos").val(); ' assigning the list to hidden tag on the page
$('#defaultResults').hide(); ' hiding the previous flexigrid otherwise it was overwriting as u suggested
var sViewQuery = "SF1=keyword&ST1="+sRefNumbers; ' preparing the query for the param

$("#listDisplay1").flexigrid
({
url: 'list_proxy.asp?a=results', ' calling list proxy.asp to process the list i am getting above
colModel : [
.. ....
query : sViewQuery+'&Fields=ref_no,notes,pe_rev_name,co_name,action_flag,co_group',
.......

however it is not passing the new list to list_proxy.asp to process the new list of ids ....

please advice
thanks

hielo

It may not be passing it because the list may not be ready yet at the time you are "passing the list". I detailed that problem already:

https://www.experts-exchange.com/questions/23471788/jquery-flexigrid-not-getting-updated-on-onClick-event.html

newbie27

ASKER

ok hielo, i will try adding onSuccess for the list.
thanks

newbie27

ASKER

hello hielo,
please can you help me on this hielo,
i cannot make the correct details appear in the flexigrid .... please help hielo....!

hielo

The statements I posted here:
https://www.experts-exchange.com/questions/23471788/jquery-flexigrid-not-getting-updated-on-onClick-event.html

hold. This other issue must be related to the dynamic javascript you are trying to insert.

newbie27

ASKER

Hielo,
I have amended the code as you have suggested, the problem is still that the list_proxy.asp is not been called after picking another list from the <SELECT> and hence no data is shown in the Flexigrid.
I am almost there with this Hielo.
Please help
Thanks
Sam

ASKER CERTIFIED SOLUTION

hielo

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

newbie27

ASKER

Thanks Hielo,
It it not showing anything ?
please have a look
thanks

hielo

This worked for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
<base href="http://213.253.134.6/artism/admin/list_admin.asp"/>
<title>ehaus Content Administration :: ARTISM</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="ehaus ltd" />
<meta name="copyright" content="copyright www.ehaus.co.uk" />
<meta name="description" content="ehaus Content Administration" />
<meta name="keywords" content="" />
<meta name="robots" content="all" />
 
<script type="text/javascript" src="include/menu.js"></script>
 
<script type="text/javascript" src="include/jquery/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="include/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="include/flexigrid/flexigrid.js"></script>
<script type="text/javascript" src="include/jquery/jquery.jeditable.js"></script>
<script type="text/javascript" src="lists/include/list_script.js"></script>
 
<script type="text/javascript">
//gets the <select> list. It does NOT fill in the flexigrid table.
function repopulateList()
{
	$.ajax({
	  type: "POST",
	  url: "list_builder.asp",
	  data: "action=save&listname="+$("#txtListName").val(),
	  success: function(msg)
	  		{
	  			var re = /[<]script[>]([^<]+)[<][\/]script[>]/ig;
				msg.match(re);
				msg = msg.replace(re,"");
				$("#theList").html( msg );								
				eval(RegExp.$1);
			}
	});
}
 
function getListRefs(sListname)
{
	$.ajax({
	  type: "POST",
	  url: "list_builder.asp",
	  data: "action=results&listname="+sListname,
	  success: function(msg)
	  		{					
				$("#listRefnos").val( msg );		
	
				var sRefNumbers = $("#listRefnos").val();
				var sViewQuery = "SF1=keyword&ST1="+sRefNumbers;     
				//alert("sViewQuery: "+sViewQuery);
				
				listViewer("#listDisplay1",sViewQuery);
				$("#txtListName").val('test6');
				$("#txtNotes").val('test notes');
			}
	 
	});
} 
  
$(document).ready(function()
	{
		var sRefNos = "";
		var myList = showShortList();
     	for(var x=0; x<myList.length; x++)
		{    if( "null" !=  myList[x].id )                
         		sRefNos += "," + myList[x].id  ;        
     	}
     	sRefNos = sRefNos.substr(1);
      
     	var sQuery = "SF1=keyword&ST1="+sRefNos; 
    	repopulateList();
		listViewer("#listDisplay", sQuery);
	
});  
  
				
function viewList(){
    
  var sListname = $("#drpLists").val();
  
  if(sListname == 0 || sListname == "new"){  
    alert('Please select a list');
  }else{
  
   // alert("viewList: "+sListname);
	getListRefs(sListname);		
	 $('#defaultResults').hide();
	 $('#dynamicResults').html('<table id="listDisplay1" style="display:none"></table>');
  }
 }  
 
//this actually fills in the flexigrid table.
function listViewer(listID, param1)
{      alert(param1);
     	$(listID).flexigrid
		({
        		url: 'list_proxy.asp?a=results',       
        		colModel : [                    
                  //      	{display: ' ', name : 'chkDelete', width : 30, sortable : false, align: 'left'},
					{display: '<input type="checkbox" name="chkAll" onclick="checkAll(this.checked)"/> All', width : 30},
                        	{display: 'Notes', name : 'notes', width : 50, sortable : false, align: 'left'},
           			{display: 'Contact    ', name : 'pe_rev_name', width : 150, sortable : true, align: 'left'},
                    	{display: 'Compnay Name  ', name : 'co_name', width : 200, sortable : true, align: 'left'},   
                    	{display: 'Flag  ', name : 'action_flag', width : 150, sortable : true, align: 'left'},
                    	{display: 'Group  ', name : 'co_group', width : 200, sortable : true, align: 'left'}                 
        			],
        		buttons : [                             
                         {name: 'Delete', bclass: 'delete', onpress : test},
					//	{name: 'Select All', bclass: 'add', onpress : test},
					//{name: 'DeSelect All', bclass: 'delete', onpress : test}
                                
                  	],                                      
        		sortname: '',
        		sortorder: 'asc',
        		usepager: false,
        		title: 'List Manager - ' + $("#drpLists").val(),
        		useRp: true,
        		rp: 1000,
        		query : param1+'&Fields=ref_no,notes,pe_rev_name,co_name,action_flag,co_group',         
        		showTableToggleBtn: true,                       
        		width: 760,
        		height: 350,
				onSuccess:function()
	   			{
                		$(".edit_area").editable( 
						function(value, settings) { return(value); }, 
                			{     
							submit    : "OK",
							indicator : "process..........",
							tooltip   : "Click to edit...",
							style  : "inherit" 
                			}
					);
				}
        		
        	});
 
}
 
function test(com,grid)
            {
                if (com=='Delete')
					{
						if($('.trSelected',grid).length <= 0){ alert('You have not selected any item.');
						}else{
					   if(confirm('Do you want to delete the selected ' + $('.trSelected',grid).length + ' item(s)?')){
						var items = $('.trSelected',grid);
						var itemlist ='';
						for(i=0;i<items.length;i++){
							//itemlist+= items[i].id.substr(3)+",";	
                        // $(".chkRefNos").checked();				
							removeShortList("shortlist", items[i].id.substr(3));
						}						
						  window.location.reload(true);
						  $("#listDisplay").flexReload();
						
						}}
					}
                else if (com=='Select All'){
						$('.bDiv tbody tr',grid).addClass('trSelected');
				  }else if (com=='DeSelect All'){
						$('.bDiv tbody tr',grid).removeClass('trSelected');
				  }          
            } 
				
 
 
function removeFromList(){
    var result = "";                        
    $(".chkRefNos").each( function () {
      //if(this.checked == true) {             
        removeCookieItem(this);   
     //} 
    });	
	 window.location.reload(true);    
} 
  
</script>
 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="styles/screen.css" />
 <link rel="stylesheet" type="text/css" href="include/flexigrid/flexigrid.css">
 
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="styles/screen_ie6.css" />
<![endif]-->
 
</head>
<body>
<a name="top"></a>
<div id="header">
	<h1><a href="index.asp?TAG=&CID=&PGE=/fmtdefault/">ehaus - Content Manager</a></h1>
</div>
 
<div id="breadcrumb">
	Administration: <a href="index.asp?TAG=&CID=&PGE=/fmtdefault/">Home</a> > 
	<a href="search.asp?TAG=&CID=&PGE=/fmtdefault/">Search</a> > 
	Search Results 
	 
	
 
<fieldset>
<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle">
	<form id="qsearch" name="qsearch" method="get" action="rdbm_results.asp" >
	<select name="SF1" >
		<option value="co_name" >Company</option>
		<option value="keyword" selected>Keyword</option>
		<option value="pe_name" >Person</option>
		
	</select>
 
</td><td valign="middle">
	<input id="search-terms" name="ST1" style="height: 14px; width: 122px; margin: 0 10px; " value="" />
	<input type="hidden" name="SORT" value="pe_sort_name">
</td><td valign="top">
	<a href="javascript:document.qsearch.submit();" class="button" >Search</a>
</td></tr></table></form>
</fieldset>
 
 
</div>
<!-- search here -->
 
 
<div id="wrapper">
	
<div id="pagetitle">
	<h2>Website Administration: ARTISM</h2>
	<ul>
		<!--<li class="email">someone@oecd.org</li>-->
		<li><a href="javascript:openWindow('popup_help.asp?hs=/artism/admin/list_admin.asp','childwin',450,650);" >Help</a></li>
		<li><a href="/webauth.asp?lgt=Y">Sign Out</a></li>
 
	</ul>
</div>
	<div id="leftcol">
		<h3>Main Menu</h3>
	<ul id="treemenu1" class="treeview">
	<li class="topmenu"><div><a href="index.asp?TAG=&CID=&PGE=/fmtdefault/">Home</a></div></li>
	
	<li class="topmenu"><div>Search</div>
		<ul> 
			<li><a href="search.asp?TAG=&CID=&PGE=/fmtdefault/">Advanced Search</a></li><li><a href="browse.asp?TAG=&CID=&PGE=/fmtdefault/">Profiles..</a></li>
 
		</ul>
	</li>
 
	<li class="topmenu"><div>Database</div>
		<ul>
			<li><a href="rdbm_index.asp?TAG=&CID=&PGE=/fmtdefault/">Admin..</a></li>
			<li><a href="rdbm_process.asp?action=new_record" >Create&nbsp;New&nbsp;Record</a></li>
 
			<!--<li><a href="copy_process.asp?a=index" >Index Database</a></li>-->
		</ul>
	</li>
 
	<li class="topmenu"><div>Content [CMS]</div>
		<ul>
			<li><a href="rcm_index.asp?TAG=&CID=&PGE=/fmtdefault/">Manage CMS</a></li>
			<li><a href="copyfiles.asp?TAG=&CID=&PGE=/fmtdefault/">Copy CMS Live</a></li>
 
			<li><a href="/artism/pageholder.html" target="_blank">View Development Site</a></li>
			<li><a href="http://www.artism.com" target="_blank">View Live Site</a></li>
 
		</ul>
	</li>
 
	<li class="topmenu"><div>File Transfers</div>
		<ul>
 
			
			<li><a href="download.asp?TAG=&CID=&PGE=/fmtdefault/">Download Files</a></li>
			<li><a href="download.asp?TAG=&CID=&PGE=/fmtdefault/">Upload Files</a></li>
			<!--<li><a href="copyfiles.asp?TAG=&CID=&PGE=/fmtdefault/">Copy Files Live</a></li>-->
		</ul>
	</li>
 
</ul>
 
	
		<!-- SubMenus -->	
		<h3>Display Options</h3>
 
		<ul class="leftmenu">
			
		<!-- FORMAT FORM START -->
		<!--
		<form name="frmFormat" id="frmFormat">
			<span class="greyheading"><b></b></span>
			<select name="sort" id="sel2" onChange="if(document.frmFormat.sel2.selectedIndex!=0) document.location.href=document.frmFormat.sel2.options[document.frmFormat.sel2.selectedIndex].value">
			<option value="">Select Format..</option>
			<option value="results.asp?">Title</option>
			<option value="results.asp?">ISBN</option>
			</select>
			<script language="JavaScript">document.frmFormat.sel2.selectedIndex=0;</script>
		</form>	
		-->
		<!-- FORMAT FORM END -->
	
		<li><a href="rdbm_results.asp?">Default layout</a></li>
		<li><a href="rdbm_results.asp?">Company layout</a></li>	
 
 
			
			
		</ul>
		
	
		<h3>Export Options</h3>
 
		<ul class="leftmenu">
			<li><a href="print_results.asp?&CSS=print-list" target="_blank" >Print ResultSet</a></li>
			<!--<li><a href="export.asp?" target="_blank" >Export ResultsSet</a></li>-->
			
		</ul>
 
	
	  
	   <h3>Short List</h3>
	  
		 	<!-- include file="lists/include/list_nav.asp" -->
	<!-- /SubMenus -->	
	</div>
 
	<div id="content">
	<h3>List Manager:</h3> 
 
	 <form name="frmList" id="frmList" action="list_export.asp" method="post">  
	 <div id="responsemsg" style="float:left;font-weight:bold;color:#a0162f;"></div>  
			
        <input type="hidden" name="action" id="action" value="savefields" />
	    <input type="hidden" name="filename" id="filename" value="test@test.com"/>
		<input type="hidden" name="hiddflag" id="hiddflag" value=""/>
	    <!--input type="hidden" name="refnos" id="refnos" /-->
		<input type="hidden" name="listRefnos" id="listRefnos">
      <div id="listRefnos" style="float:left;font-weight:bold;color:#a0162f;"></div>
 
      <table width="100%" align="center" topmargin="0"><tr><th>List Name</th><td><input type="text" name="txtListName" id="txtListName" /></td></tr>
	        <tr><th>Notes</th><td><input type="text" name="txtNotes" id="txtNotes" /></td></tr></table>
      
      
	  <table width="100%"><tr><td width="100%" align="right"><a href="javascript:addToList();" class="button">Save</a> &nbsp;&nbsp;&nbsp;&nbsp; 
	
	  <INPUT type="hidden" name="hidList" id="hidList" value=""/>
	  
				Save Into <span id="theList"></span> &nbsp;&nbsp;&nbsp;&nbsp;<!--a href="javascript:deleteList();" class="button">Delete List</a-->&nbsp; &nbsp; &nbsp;<a href="#" onclick="javascript:viewList();return false;" class="button">View List</a>&nbsp; &nbsp; &nbsp;<a href="javascript:exportList();" class="button">Export List</a>  
				           </td></tr>
 
						   
						   </table>							
		<div id="defaultResults">		 
 <table id="listDisplay" style="display:none"> 
			 	    
     </table>		</div>		
       			 <span id="dynamicResults"><table id="listDisplay1" style="display:none"> 
			 	    
     </table></span>
		<a href="javascript:getSelected();">Test Checked</a>
		 					
	  </form>  
	
	   <div style="float: left;"></div>
		 
	
	</div><!-- content -->
	
 
<div style="clear: both;"></div><br />
	<div id="footer">
		<ul>
			<li><a href="http://www.ehaus.co.uk" target="_blank">Copyright &copy; Ehaus Ltd.</a></li>
			<li><a href="index.asp?TAG=&CID=&PGE=/fmtdefault/">Home</a></li>
			<li><a href="contact.asp?TAG=&CID=&PGE=/fmtdefault/" class="last">Contact us</a></li>
		</ul>
 
	</div>	
 
</div><!-- wrapper -->
 
<script type="text/javascript">
//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))
ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)
</script>
</body>
</html>

Open in new window

newbie27

ASKER

this worked ...thanks hielo !