Close the search popup after click on find button in jqgrid - javascript

How to close search popup when click on Find button.
After search the data in jqgrid I click on Find button the Search popup is not closed. The searched data is filtered but popup is not closed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="<%=request.getContextPath()%>/js/jquery-1.9.1.js" type="text/javascript" ></script>
<script src="<%=request.getContextPath()%>/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/style/colorbox.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/style/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/style/ui.jqgrid.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-validation.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.colorbox.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/grid.locale-en.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//jqGrid
$("#usersList").jqGrid({
url:'<%=request.getContextPath() %>/Admin/getAllUsersList',
datatype: "json",
colNames:['Edit','Primary Email','Active','First Name','Middle Name','LastName','Mobile Number','Cloud Url', 'Cloud User Name','Cloud Folder'],
colModel:[
{name:'userId',search:false,index:'userId',width:30,sortable: false,formatter: editLink},
{name:'email',index:'user.primaryEmail',width:150},
{name:'isActive',index:'user.isActive',width:80},
{name:'firstName',index:'firstName', width:100},
{name:'middleName',index:'middleName', width:100},
{name:'lastName',index:'lastName', width:100},
{name:'mobileNo',index:'user.mobileNo', width:100},
{name:'cloudUrl',index:'user.cloudUrl', width:200},
{name:'cloudUserName',index:'user.cloudUserName', width:120},
{name:'cloudFolderName',index:'user.cloudFolderName', width:120},
],
rowNum:20,
rowList:[10,20,30,40,50],
rownumbers: true,
pager: '#pagerDiv',
sortname: 'user.primaryEmail',
viewrecords: true,
sortorder: "asc",
autowidth:'true',
});
$('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
$('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
$('#load_usersList').width("130");
$("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false});
$(".inline").colorbox({inline:true, width:"20%"});
});
function editLink(cellValue, options, rowdata, action)
{
return "<a href='<%=request.getContextPath()%>/Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' ></a>";
}
</script>
</head>
<body>
<div style="" class="wrapper">
<div style="height:10px; clear:both;"></div>
<div class="ContentHolder">
<div class="bgcolorblack">
<div style="clear:both;"></div>
<div style="padding:10px;">
<div id="gridContainer">
<table id="usersList"></table>
<div id="pagerDiv"></div>
</div>
</div>
</div>
</div>
</div>


The problem is resolved after mention closeAfterSearch:true in jqgrid.
Search popup is closed when click on Find button.
Code:
$("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});

Related

jqxDropDownList Listing is seperately opened at bottom of the page

If I include all the lib jqwidgets/jqx-all.js
it works well, but if I use only the necessary files given in their example : https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/index.htm#demos/jqxdropdownlist/defaultfunctionality.htm
then the listing appears at the end of the html file and not just under the widget.
I tried to include all the necessary files, didn't succeed.
Any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait"
];
// Create a jqxDropDownList
$("#jqxWidget").jqxDropDownList({ source: source, placeHolder: "Select Item", width: 250, height: 30});
});
</script>
<br/>
<br/>
<div id='jqxWidget'>
</div>
<hr>
</div>

I figured out the problem
it was the old version that I used : jqwidgets-ver8.0.0.zip
jqwidgets-ver8.3.2.zip solved the issue
So always update to latest version...

Collapse - accordion first element opened by default

I am working with Collapse "Accordion". When my page loads the first collapse is open by default, please suggest the way to make it close by default!!
Any help is appreciated. Thanks for help!!
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"></link>
<link href="/resources/demos/style.css" rel="stylesheet"></link>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="accordion">
<h3>
Click Here for answer:)</h3>
<div style color: "red;">
<b>Answer: </b>206 Bones
</div>
</div>
<script>
$(function() {
$("#accordion").accordion({
collapsible: true
});
});
</script>

Please use this.
$("#accordion").accordion({ collapsible: true, active: false });

you have to use this property:
active: false
Follows a work example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"></link>
<link href="/resources/demos/style.css" rel="stylesheet"></link>
<div id="accordion">
<h3>
Click Here for answer:)</h3>
<div style color:"red;">
<b>Answer: </b>206 Bones
</div></div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
} );
</script>
</body>
</html>

this will do the tricks
$("#accordion").accordion({
collapsible:true,
active: false
});

Keep getting object has no method error from javascript

I keep getting a Object has no method error when trying to call jwplayer's setup method or bootstraps carousel method.
I do have JQuery installed and it works properly, I can also use JS from bootstrap using data-attributes and regular jQuery works just not with these two.
Here is a fiddle http://jsfiddle.net/S9jDw/
I've been stuck with this for days.
this is my js code
$(document).ready(function() {
jwplayer('.jw-wrapper').setup({
file: 'http://helpsaverosie.ca/Rosie.m4v',
image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
title: 'Rosie',
width: '100%',
aspectratio: '16:9',
mute: 'true',
autostart: 'true'
});
});
and this is my html output
<!DOCTYPE html>
<html class='index'>
<head>
<title>Save Rosie</title>
<meta charset='utf-8'>
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<!-- Use title if it's in the page YAML frontmatter -->
<link href="/stylesheets/fonts.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/bootstrap.js" type="text/javascript"></script>
<script src="http://jwpsrv.com/library/Xp3HoLIEEeOyYSIACmOLpg.js" type="text/javascript"></script>
<script src="/javascripts/all.js" type="text/javascript"></script>
<link href='https://s3-us-west-2.amazonaws.com/rosiesdonations/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<script src=''></script>
</head>
<body>
<div class='wrapper'>
<div id='image-wrapper'>
<aside class='left-side-image'>
<img alt='Side Image Left' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie_Left.gif'>
</aside>
<aside class='right-side-image'>
<img alt='Right Side Image' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie_Right.png'>
</aside>
</div>
<div class='container'>
<nav class='row main-header'>
<header class='col-md-12'>
<h1>Help Save Rosie</h1>
</header>
</nav>
<section class='row main-body'>
<div class='col-md-12'>
<div class='jw-wrapper'></div>
<div class='carousel slide' data-ride='carousel' id='main-carousel'>
<div class='carousel-inner'>
<div class='item active'>
<img alt='Rosie Picture one' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie1.png'>
</div>
<div class='item'>
<img alt='Rosie Picture two' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie2.jpg'>
</div>
<div class='item'>
<img alt='Rosie Picture three' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie3.jpg'>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>

It looks like jwplayer is actually expecting the id of the element and not a selector.
Try changing class="jw-wrapper" to id="jw-wrapper" and change your setup method to:
$(document).ready(function() {
jwplayer('jw-wrapper').setup({
file: 'http://helpsaverosie.ca/Rosie.m4v',
image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
title: 'Rosie',
width: '100%',
aspectratio: '16:9',
mute: 'true',
autostart: 'true'
});
});

Popup won't popup in MVC

I'm trying to get a popup to appear from a link in an MVC page, but the popup isn't popping up. The partial view is just replacing the current page in the browser. Why isn't is just leaving my current page in place and giving me a popup? My partial view just has a few words of text in it.
#Ajax.ActionLink(
"Open popup",
"GetNotes",
new { id = "5" },
new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "result",
InsertionMode = InsertionMode.Replace,
OnSuccess = "openPopup"
})
<br />
<div id="result" style="display:none;"></div>
<script type="text/javascript">
$("#result").dialog({
autoOpen: false,
title: 'Title',
width: 500,
height: 'auto',
modal: true
});
function openPopup() {
$("#result").dialog("open");
}
</script>
UPDATE:
Here's the complete source (from "View Source") I'm currently trying. When I click the link, nothing happens. What's going on? Am I missing a js file or something?
By the way, this URL is returning my partial view (currently just a couple words of plain text):
http://localhost:40353/Quote/GetNotes/5
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/people.js" type="text/javascript"></script>
<script src="/Scripts/kendo.web.min.js" type="text/javascript"></script>
<script src="/Scripts/console.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="/Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="/Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="result" style="display:none;"></div>
open popup
<script type="text/javascript">
$("#result").dialog({
autoOpen: false,
title: 'Title',
width: 500,
height: 'auto',
modal: true
});
$("#OpenPopup").click(function () {
$("#result").dialog("open");
$("#result").load("Quote/GetNotes/5");
});
</script>
</body>
</html>

I think you are missing reference to "jquery.unobtrusive-ajax.min.js" script file in the <head> section of your Layout (Master) Page.
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

The reason the partial view replaces your view in the browsers is #Ajax.ActionLink renders as a formed tag in the browser. So when your click on the link your actually.
What I presume you want to do is open the popup and place the partial's contents into the popup?
There is a few ways to achieve this.
Change your actionlink to a normal open popup
open popup
And add this function
$("#OpenPopup").click(function() {
$("#result").dialog("open");
// This is a neat wrapper that does a get request to the url specified and loads the html into the target div
$("#result").load("/GetNotes/5");
});

Check as well in your _Layout at the bottom:
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
Remove
#Scripts.Render("~/bundles/jquery")
and the modal pop up will run.

Jgrid Problem Generating XML

i am using Jgrid. i am injecting the data to the Grid using Xml as we most of us do.
i want the batch update to database, my requirement that when i click on the "Save Change" it generate the Xml of current(updated) grid data.
So, how can i generate the Xml of Jgrid data.
please help.
here is the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" />
<script src="../../Content/js/Jgrid js/jquery.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/celledit.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/ui.datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready( function() {
//debugger;
var lastsel3;
jQuery("#test").jqGrid({
url:'/Content/xml/user.xml',
datatype: "xml",
colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'],
colModel:[
{name:'id',index:'id', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'invdate',index:'invdate', width:90,editable:true},
{name:'invdate',index:'invdate', width:90,editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'note',index:'note', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:"}}
],
onSelectRow: function(id){
if(id && id!==lastsel3){
jQuery('#test').jqGrid('restoreRow',lastsel3);
jQuery('#test').jqGrid('editRow',id,true,pickdates);
lastsel3=id;
}
},
rowNum:10,
rowList:[10,20,30],
pager: '#pcelltbl',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Cell Edit Example",
forceFit : true,
cellEdit: true,
cellsubmit: 'clientArray',
afterEditCell: function (id,name,val,iRow,iCol){
if(name=='invdate') {
jQuery("#"+iRow+"_invdate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
},
afterSaveCell : function(rowid,name,val,iRow,iCol) {
if(name == 'amount') {
var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1);
jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)});
}
if(name == 'tax') {
var amtval = jQuery("#test").jqGrid('getCell',rowid,iCol-1);
jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)});
}
}
});
jQuery("#test").jqGrid('navGrid','#pgwidth',{edit:true,add:true,del:true});
});
</script>
</head>
<body>
<form id="form1">
<div>
<table id="test">
</table>
</div>
</form>
</body>
</html>
Thanks.

To export data to XML you can use jQuery("#test").jqGrid ('getGridParam', 'data') in combination with xmlJsonClass.json2xml from JsonXml.js which included to jqGrid.
I created a working example which demonstrate this way: http://www.ok-soft-gmbh.com/jqGrid/ExportInXml.htm. You can use external button or a button in the jqGrid navigator to make the export. In the example I just display the exported data with respect of alert function. The same data as a file you find here.

Hi Oleg I am using the ths same code but it not produce the correct output.. My code is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<!-- <script type="text/javascript">
debugger;
alert($!retrivexml);
</script>-->
<link href="../../Content/css/Style/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../Content/css/Style/jquery-ui-1.7.2.custom.css"
type="text/css" media="screen" />
<link rel="stylesheet" href="../../Content/css/Style/ui.jqgrid.css" type="text/css"
media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/jqModal.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/css/Style/datePicker.css" />
<script src="../../Content/js/Jgrid js/jquery.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!--<script src="../../Content/js/Jgrid js/celledit.js" type="text/javascript"></script>-->
<script src="../../Content/js/Jgrid js/ui.datepicker.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/json2.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/JsonXml.js" type="text/javascript"></script>
<script src="../../Content/js/Jgrid js/grid.import.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready( function() {
var grid = jQuery("#test");
var MyExportToXml = function (grid) {debugger;
var dataFromGrid = {row: grid.jqGrid ('getGridParam', 'data') };
var xmldata = '<?xml version="1.0" encoding="utf-8" standalone="yes"?>\n<rows>\n' +
xmlJsonClass.json2xml (dataFromGrid, '\t') + '</rows>';
alert(xmldata);
};
var lastsel3;
jQuery("#test").jqGrid({
url:'/Content/xml/user.xml',
//url: $!retrivexml,
datatype: "xml",
colNames:['Consultant','Project Role', 'Task', 'Start Date','End Date','Deliverables','Complete'],
colModel:[
{name:'Consultant',index:'Consultant', width:90, editable: true,edittype:"select",editoptions:{value:"K:Kin;R:Rajesh;R:Renee;S:Sandeep"}},
{name:'Role',index:'Role', width:80, align:"right",editable:true},
{name:'Task',index:'Task', width:80, align:"right",editable:true},
{name:'SDate',index:'SDate', width:90,editable:true},
{name:'EDate',index:'EDate', width:90,editable:true},
{name:'Deliverables',index:'Deliverables', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"25"}},
{name:'Complete',index:'Complete', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Complete:Incomplete"}}
],
rowNum:10,
//rowList:[10,20,30],
pager: '#pagediv',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Project Planning",
forceFit : false,
cellEdit: true,
editurl:'clientArray',
cellsubmit: 'clientArray',
afterEditCell: function (id,name,val,iRow,iCol){
if(name=='SDate') {
jQuery("#"+iRow+"_SDate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
if(name=='EDate') {
jQuery("#"+iRow+"_EDate","#test").datepicker({dateFormat:"yy-mm-dd"});
}
},
// afterSaveCell : function(rowid,name,val,iRow,iCol) {
// if(name == 'amount') {
// var taxval = jQuery("#celltbl").jqGrid('getCell',rowid,iCol+1);
// jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(taxval)});
// }
//
//
//
// if(name == 'tax') {
// var amtval = jQuery("#test").jqGrid('getCell',rowid,iCol-1);
// jQuery("#test").jqGrid('setRowData',rowid,{total:parseFloat(val)+parseFloat(amtval)});
// }
// }
});
jQuery("#test").jqGrid('navGrid','#pagediv',{edit:false,add:false,del:false});
$("#export").click(function(){
MyExportToXml (grid);
});
jQuery("#bedata").click(function(){
jQuery("#test").jqGrid('navButtonAdd','#pagediv',{caption:"New", buttonicon :'ui-icon-circle-plus',
onClickButton:function(id){
var datarow = {Consultant:"",Role:"",Task:"",SDate:"",EDate:"",
Deliverables:"",Complete:""};
var lastsel2 = id;
//debugger;
var su=jQuery("#test").addRowData(lastsel2, datarow, "last") ;
// if (su) {
// jQuery('#test').editRow(lastsel2,true);
//
//
// }
},
title:"New Button",
position:"last"
});
//jQuery("#test").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
});
});
</script>
</head>
<body>
<form id="form1">
<div id="pagediv">
</div>
<table id="test">
</table>
<input type="BUTTON" id="bedata" value="Edit Selected" />
<input type="BUTTON" id="export" value="Export" />
</form>
</body>
Please..correct the code if i m doing some mistake here

Categories