I am trying to pass data from controller to GQ grid. I have done implemented the SQL operation - selecting a row- in another file and returning a object of list type List<Models.ViewModel.Itegration> to the Controller. I implemented the controller of type JsonResult which returns the data in json format. The controller is using [HttpGet] Attritute. I have attached code of my controller, html, js file and screenshot of the issue. The Google Console is not showing any problem. The table is getting ready, but the table data is showing. I guess there is the issue with "passing the data" properly. It would be very helpful for me if anybody could just check my code and let me know where I am getting wrong.
Additionally, is there any software, where I can check where the issue is coming while connecting to server, because in this case Google inspect tool is not helpful at all.
In my controller, by using breakpoint I have checked that in Integrations value = db.GetIntegrationRow(); I am getting a correct value in value.
Controller:
#region Namespace
using MCNIDev.DBAccess;
using MCNIDev.Models.ViewModel;
using MCNIDev.Processor.Services;
using System.Web.Mvc;
#endregion
namespace MCNIDev.Content
{
/// <summary>
/// This controller class is responsible for all action in Integration view
/// </summary>
public class IntegrationsController : Controller
{
public ActionResult Details()
{
return PartialView();
}
/// <summary>
/// To get the data for JQGrid
/// </summary>
[HttpGet]
public JsonResult Detail()
{
IntegrationsProcessor db = new IntegrationsProcessor(new MCNIDbContext());
Integrations value = db.GetIntegrationRow();
return new JsonResult()
{
Data = value,
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
}
}
HTML file
#using MCNIDev.CustomControls
#model MCNIDev.Models.ViewModel.Integrations
#{
ViewBag.Title = "Details";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=devicexb c-width" />
<title>Integrations</title>
</head>
#Styles.Render("~/Content/toasterCss")
#Styles.Render("~/Content/dataPickerCss")
<style type="text/css">
.btn {
min-width: 80px !important;
}
</style>
<body>
#using (Html.BeginForm("", "Integrations", FormMethod.Post, new { enctype = "multipart/form-data", #class = "form-horizontal", id = "frmManifestOrders" }))
{
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Integrations</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /.content-header -->
<section class="content">
<div class="container-fluid">
<div class="card card-block">
<div class="row table-responsive">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 col-sm-12">
<table id="tblSelectIntegrations"></table>
<div id="divSelect"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<hr />
<input type="button" class="btn btn-secondary" onclick="document.location.href='/Dashboard/Dashboard';" value="Cancel" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}
</body>
</html>
#*Bundle file includes the path to single JavaScript file Integration that does GQGrid operation *#
#Scripts.Render("~/bundles/integrations")
<script>
$(document).ready(function(){
Integrate.GetValue();
});
</script>
JavaScript file:
var Integrate = function() {
function GetValue() {
$("#tblSelectIntegrations").jqGrid({
mtype: "GET",
url: "/Integrations/Detail",
datatype: "json",
async: false,
colNames: [
"First Name", "Email Address",""
],
colModel: [
//{
// name: '',
// key: false,
// width: 30,
// editable: true,
// formatter: function () {
// return "<input type='checkbox' value='Select' class='fm-button ui-state-default ui-corner-all fm-button-icon-left noPrint'\>";
// }
//},
{ key: false, name: 'IntegrationName', index: 'IntegrationName', editable: false, width: 200 },
{ key: false, name: 'CompanyEmail', index: 'CompanyEmail', editable: false, width: 200 },
{ key: false, name: 'Blank', index: 'Blank', editable: false, width: 200 }
],
pager: jQuery("#divSelect"),
rowNum: 1,
scroll: 0,
height: $(window).innerHeight() - 450,
width: "100%",
viewrecords: true,
caption: "Product",
emptyrecords: "No records to display",
jsonReader: {
root: "",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
autowidth: true,
multiselect: false,
loadonce: false,
ajaxGridOptions: { cache: false },
}).navGrid("tblSelectIntegrations", { edit: false, add: false, del: false, search: false, refresh: false });
}
return {
GetValue: GetValue
};
}();
The issue lies in controller. I am trying to send data without telling JQGrid where to insert data.
var jsonData = new
{
rows = value
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
Replace below code with above code
return new JsonResult()
{
Data = value,
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
In my first code I've mentioned that add my data in the rows.
return new JsonResult()
{
Data = value,
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
Replace the above code with the below code.
int totalRecords = value.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
var JsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows = value
};
return Json(JsonData, JsonRequestBehavior.AllowGet);
Related
I am trying to pass data from controller to GQ grid. I have done implemented the SQL operation - selecting a row- in another file and returning a object of list type List<Models.ViewModel.Itegration> to the Controller. I implemented the controller of type JsonResult which returns the data in json format. The controller is using [HttpGet] Attritute. I have attached code of my controller, html, js file and screenshot of the issue. The Google Console is not showing any problem. The table is getting ready, but the table data is showing. I guess there is the issue with "passing the data" properly. It would be very helpful for me if anybody could just check my code and let me know where I am getting wrong.
My database consist of single row and two columns, which are: Name and Email. Additionally, I want to add edit button in third row.
Additionally, is there any software, where I can check where the issue is coming while connecting to server, because in this case Google inspect tool is not helpful at all.
In my controller, by using breakpoint I have checked that in Integrations value = db.GetIntegrationRow(); I am getting a correct value in value.
Controller:
#region Namespace
using MCNIDev.DBAccess;
using MCNIDev.Models.ViewModel;
using MCNIDev.Processor.Services;
using System.Web.Mvc;
#endregion
namespace MCNIDev.Content
{
/// <summary>
/// This controller class is responsible for all action in Integration view
/// </summary>
public class IntegrationsController : Controller
{
public ActionResult Details()
{
return PartialView();
}
/// <summary>
/// To get the data for JQGrid
/// </summary>
[HttpGet]
public JsonResult Detail()
{
IntegrationsProcessor db = new IntegrationsProcessor(new MCNIDbContext());
Integrations value = db.GetIntegrationRow();
return new JsonResult()
{
Data = value,
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
}
}
HTML file
#using MCNIDev.CustomControls
#model MCNIDev.Models.ViewModel.Integrations
#{
ViewBag.Title = "Details";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=devicexb c-width" />
<title>Integrations</title>
</head>
#Styles.Render("~/Content/toasterCss")
#Styles.Render("~/Content/dataPickerCss")
<style type="text/css">
.btn {
min-width: 80px !important;
}
</style>
<body>
#using (Html.BeginForm("", "Integrations", FormMethod.Post, new { enctype = "multipart/form-data", #class = "form-horizontal", id = "frmManifestOrders" }))
{
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Integrations</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /.content-header -->
<section class="content">
<div class="container-fluid">
<div class="card card-block">
<div class="row table-responsive">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 col-sm-12">
<table id="tblSelectIntegrations"></table>
<div id="divSelect"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<hr />
<input type="button" class="btn btn-secondary" onclick="document.location.href='/Dashboard/Dashboard';" value="Cancel" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}
</body>
</html>
#*Bundle file includes the path to single JavaScript file Integration that does GQGrid operation *#
#Scripts.Render("~/bundles/integrations")
<script>
$(document).ready(function(){
Integrate.GetValue();
});
</script>
JavaScript file:
var Integrate = function() {
function GetValue() {
$("#tblSelectIntegrations").jqGrid({
mtype: "GET",
url: "/Integrations/Detail",
datatype: "json",
async: false,
colNames: [
"First Name", "Email Address",""
],
colModel: [
//{
// name: '',
// key: false,
// width: 30,
// editable: true,
// formatter: function () {
// return "<input type='checkbox' value='Select' class='fm-button ui-state-default ui-corner-all fm-button-icon-left noPrint'\>";
// }
//},
{ key: false, name: 'IntegrationName', index: 'IntegrationName', editable: false, width: 200 },
{ key: false, name: 'CompanyEmail', index: 'CompanyEmail', editable: false, width: 200 },
{ key: false, name: 'Blank', index: 'Blank', editable: false, width: 200 }
],
pager: jQuery("#divSelect"),
rowNum: 1,
scroll: 0,
height: $(window).innerHeight() - 450,
width: "100%",
viewrecords: true,
caption: "Product",
emptyrecords: "No records to display",
jsonReader: {
root: "",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
autowidth: true,
multiselect: false,
loadonce: false,
ajaxGridOptions: { cache: false },
}).navGrid("tblSelectIntegrations", { edit: false, add: false, del: false, search: false, refresh: false });
}
return {
GetValue: GetValue
};
}();
This is what I am getting-screenshot:
I am working on a small VueJS app that pulls in WordPress posts via the API. Everything works great with pagination to load more posts, however I am not too sure how I can reset the entire XHR getPosts method when you change the user ID radio field.
When you change the author ID currently, it will not reset the results. I believe it should be something in the watch: area to destroy the current page - but not too sure. Thanks!
https://codepen.io/sco/pen/aRwwGd
JS
Vue.component("posts", {
template: `
<ul>
<slot></slot>
</ul>
`
});
Vue.component("post", {
props: ["title", "excerpt", "permalink"],
template: `
<li>
<h3 v-html="title"></h3>
<div v-if="excerpt" v-html="excerpt"></div>
<a :href="permalink">Read More</a>
</li>
`
});
var App = new Vue({
el: "#app",
data: {
greeting: "Load more Posts Vue + WP REST API",
page: 0,
posts: [],
totalPages: "",
apiURL: "https://poststatus.com/wp-json/wp/v2/posts/?per_page=2",
isLoading: "",
show: true,
authors: [1, 590],
currentAuthor: ""
},
watch: {
currentAuthor: "fetchData"
},
methods: {
getPosts: function() {
var xhr = new XMLHttpRequest();
var self = this;
self.page++;
self.isLoading = "is-loading";
xhr.open(
"GET",
self.apiURL + "&page=" + self.page + "&author=" + self.currentAuthor
);
xhr.onload = function() {
self.totalPages = xhr.getResponseHeader("X-WP-TotalPages");
if (self.page == self.totalPages) {
self.show = false;
}
var newPosts = JSON.parse(xhr.responseText);
newPosts.forEach(function(element) {
self.posts.push(element);
});
self.isLoading = null;
//console.log(self.apiURL + self.page)
};
xhr.send();
}
}
});
HTML
<section id="app" class="wrapper">
<div class="container">
<div class="box">
<template v-for="author in authors">
<div class="author-toggle">
<input type="radio"
:id="author"
:value="author"
name="author"
v-model="currentAuthor">
<label :for="author">{{ author }}</label>
</div>
</template><br>
<h3 v-if="page>0">Showing Page {{page}} of {{totalPages}}</h3>
<progress v-if="page>0" class="progress" :value="page" :max="totalPages">{{page}}</progress>
<posts v-if="posts">
<post v-for="post in posts" class="post" :id="'post' + post.id" :title="post.title.rendered" :permalink="post.link" :key="post.id">
</post>
</posts>
<button :class="isLoading + ' ' +'button is-primary'" v-if="show" #click="getPosts(page)">Load Posts</button>
</div>
</div>
</section>
You can reset page, posts, and totalPages inside the watcher:
watch: {
currentAuthor() {
this.page = 0;
this.totalPages = 0;
this.posts = [];
this.getPosts();
}
}
your codepen with required changes
My actions returns a Json to my view, however, my ajax call can't use this data, so, whole data is put on the browser.
That's my action is my controller:
[HttpGet]
public JsonResult InformarPatrocinador()
{
//return View("CadastrarFicha");
/*
Patrocinador patr = new Patrocinador
{
NomeDoPatrocinador = "João",
Id_Patrocinador = 10000
};*/
var db = new FMDBEntities();
db.Configuration.ProxyCreationEnabled = false;
db.Configuration.LazyLoadingEnabled = false;
return Json(db.Tabela_Participante.
Select(x => new
{
Nome = x.Nome
}).ToList(), JsonRequestBehavior.AllowGet);
}
That's my view(Where the Ajax Call is)
#model FlowerMorena_WebUI.Models.ViewModelFicha
#{
ViewBag.Title = "InformarPatrocinador";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Informar Patrocinador</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary();
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title text-center">Patrocinador</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-xs-12 col-lg-offset-4">
<label> Código do Patrocinador </label>
#Html.TextBoxFor(x => x.Patrocinador.Id_Patrocinador, new { #class = "form-control", id = "IdDoMeuPatr" })
</div>
<div class="form-group col-xs-12 col-lg-offset-4">
<label> Nome do Patrocinador </label>
#Html.TextBoxFor(x => x.Patrocinador.NomeDoPatrocinador, new { #class = "form-control center-block", disabled = "disabled", #readonly = "readonly", id = "NomePatr" })
</div>
<div class="form-group col-xs-12 col-lg-offset-4">
<input class="btn btn-success" value="Avançar" id="buttonx" />
</div>
</div>
</div>
</div>
}
<ul id="aLista"></ul>
#section scripts{
<script type="text/javascript">
$(function () {
$('#buttonx').on("click", function (e) {
e.preventDefault();
$.ajax({
url: '/Ficha/InformarPatrocinador',
type: 'GET',
dataType: 'json',
success: function (data) {
$(data).each(function (index, item) {
$('aLista').append("<li>" + item.Nome + "<li>")
});
}
});
});
});
</script>
}
That's what I got(Ajax call did nothing))
are you calling your Action like localhost:0000/Ficha/InformarPatrocinador ?
and if you are doing this then this action will always return the result you have shown in picture.
you should make another post Action like
[HttpPost]
public JsonResult InformarPatrocinador()
{
}
and change your Ajax method to Post
$.ajax({
url: '/Ficha/InformarPatrocinador',
type: 'POST',
dataType: 'json',
success: function (data) {
$(data).each(function (index, item) {
$('aLista').append("<li>" + item.Nome + "<li>")
});
}
});
and it should work fine.
I have a single Datatable configured using Datatables.net where I'm using bootstrap tabs to load a different dataset when a different tab is selected.
Ive configured it by referencing these two examples:
http://live.datatables.net/sozobucu/41/edit and http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=create-dynamic-tabs-via-data-attribute.
When I run the application, I see that both Ajax Posts are submitted simultaneously and that the MVC controller switches back and forth line by line between the two ActionResults PopulateObjectATables and PopulateObjectBTables when I debug. I also notice that the JSON the app prepares to return looks correct at the time of the method return.
The issue is that the tab for ObjectA loads correctly and the JSON is returned from the server. However, I receive an error for ObjectB that refers me to http://datatables.net/tn/7 and in firebug I see that HTML is returned instead of JSON and a 502.3 Bad Gateway error is received.
As I see the correct JSON being prepared and both MVC ActionResults are written the same Ive ran out of things that I know to look for.
Scripts
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/respond/dest/respond.min.js"></script>
<script src="~/lib/datatables/media/js/jquery.dataTables.js"></script>
<script src="http://cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" />
<link href="//cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css" rel="stylesheet" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
#*<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"/>*#
<link rel="stylesheet" href="~/css/site.css"/>
#*<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>*#
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="~/lib/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"></script>
<script src="~/lib/angular/angular.js"></script>
<script src="~/lib/angular-datatables/dist/angular-datatables.js"></script>
View
#model NewInventory.ViewModels.ExampleAllViewModel
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="container">
<div class="row">
<div class="well well-lg">
<ul class="nav nav-tabs">
<li class="active objectA-tab"><a data-toggle="tab" role="tab" data-target="#ObjectAData">Object A</a></li>
<li class="objectB-tab"><a data-toggle="tab" role="tab" data-target="#ObjectBData">Object B</a></li>
</ul>
<div class="tab-content">
<div id="ObjectAData" class="tab-pane fade in active" role="tabpanel">
<table id="ObjectATable1" class="table dt-responsive" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
<th>Example5</th>
<th>Example6</th>
<th>Example7</th>
<th>Example8</th>
<th>Example9</th>
</tr>
</thead>
</table>
</div>
<div id="ObjectBData" class="tab-pane fade in" role="tabpanel">
<table id="ObjectBTable1" class="table dt-responsive" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
<th>Example5</th>
<th>Example6</th>
<th>Example7</th>
<th>Example12</th>
<th>Example13</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('[data-toggle="popover"]').popover();
});
</script>
<script>
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
</script>
<script>
$(document).ready(function () {
$("a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) {
console.log('show tab');
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.responsive.recalc();
});
$("#ObjectATable1").dataTable({
"bServerSide": true,
"sAjaxSource": "PopulateObjectATables",
"bProcessing": true,
"ordering": false,
"paging": false,
"scrollY": "150px",
"searching": false,
"info": false,
"columns": [
{ "data": "Example1" },
{ "data": "Example2" },
{ "data": "Example3" },
{ "data": "Example4" },
{ "data": "Example5" },
{ "data": "Example6" },
{ "data": "Example7" },
{ "data": "Example8" },
{ "data": "Example9" }]
//"deferRender": true,
});
$("#ObjectBTable1").dataTable({
"bServerSide": true,
"sAjaxSource": "PopulateObjectBTables",
"bProcessing": true,
"ordering": false,
"paging": false,
"scrollY": "150px",
"searching": false,
"info": false,
//"deferRender": true,
"columns": [
{ "data": "Example1" },
{ "data": "Example2" },
{ "data": "Example3" },
{ "data": "Example4" },
{ "data": "Example5" },
{ "data": "Example6" },
{ "data": "Example7" },
{ "data": "Example12" },
{ "data": "Example13" }
]
});
});
</script>
MVC Controller ActionResults
public ActionResult PopulateObjectATables(jQueryDataTableParamModel param)
{
ExampleAllViewModel myVM = new ExampleAllViewModel();
List<ObjectA> ObjectAList = new List<ObjectA>(_repository.GetAllObjectA().ToList());
myVM.ListObjectA = ObjectAList;
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = myVM.ListObjectA.Count(),
iTotalDisplayRecords = myVM.ListObjectA.Count(),
aaData = myVM.ListObjectA
});
}
public ActionResult PopulateObjectBTables(jQueryDataTableParamModel param)
{
ExampleAllViewModel myVM = new ExampleAllViewModel();
List<ObjectB> ObjectBList = new List<ObjectB>(_repository.GetAllObjectB().ToList());
myVM.ListObjectB = ObjectBList;
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = myVM.ListObjectB.Count(),
iTotalDisplayRecords = myVM.ListObjectB.Count(),
aaData = myVM.ListObjectB
});
}
Although the errors themselves were not very descriptive or indicative of the root cause I was able to finally get the table ajax calls working once I realized the only difference between my two MVC ActionResult methods.
For ObjectB, inside of my repository method List<ObjectB> ObjectBList = new List<ObjectB>(_repository.GetAllObjectB().ToList()); I was eager loading a related entity along with ObjectB. However for ObjectA I was only returning ObjectA from the database.
Once I removed the include as shown below, the errors resolved.
return _context.ObjectB.ToList();
//return _context.ObjectB.Include(x => x.ObjectC).ToList();
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="com-#Model.demot.DemotId">
#Html.Partial("_Comments", Model.demot.Comments)
</div>
#using (Html.BeginForm("AddComments", "Demot", new { DemotId = #Model.demot.DemotId}, FormMethod.Post, new { data_ajax = true, data_ajax_target = "com-" + #Model.demot.DemotId }))
{
#Html.AntiForgeryToken();
<div class="error-summary-centred">
#Html.ValidationSummary()
</div>
<div id="add">
<table id="albumedit-address-table">
<tr>
<td>#Html.TextBoxFor(o => o.comment, new { #class = "comment", placeholder = "Comment", value = "" })</td>
<td>#Html.ValidationMessageFor(o => o.comment)</td>
</tr>
</table>
</div>
}
</div>
</div>
<script>
$(function () {
$('form').on('submit', function (e) {
var $form = $(this);
var $target = $form.attr('data-ajax-target');
$.ajax({
url: $(this).attr("action"),
type: $(this).attr("method"),
data: $(this).serialize(),
success: function (result) {
var $newContent = $(result);
$($('#' + $target)).replaceWith($newContent);
$newContent.effect("highlight");
$form.each(function(){
this.reset();
});
}
});
e.preventDefault();
});
});
</script>
I have many form in one page. My script work but only one time, subsequent requests sent to the server but no longer works adding results.
I would like to add comments ajax method worked all the time.
Please, any help.
You can try create a function that receive a parameter or ID when create a event.
For Example:
<script>
$(function() {
$('form').on('submit', function(e) {
var $form = $(this) functionAJAX(form)
})
});
functionAJAX() { /*His Code here*/ }
</script>