I'm trying to do a jquery ajax tutorial but I'm not able to get it to work.
$(document).ready(function () {
//var theme = getDemoTheme();
var url = "http://localhost/schoollife/services/getchapters.php?a=showdata";
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'curriculam_type', type: 'string' },
{ name: 'class_type', type: 'string' },
{ name: 'subject_type', type: 'int' },
{ name: 'chapter_name', type: 'string' },
{ name: 'chapter_number', type: 'int' },
{ name: 'author_name', type: 'string' },
{ name: 'reviewer_name', type: 'int' }
],
//id: 'id',
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 940,
source: dataAdapter,
//theme: theme,
columnsresize: true,
columns: [
{ text: 'Curriculum', datafield: 'curriculam_type', width: 100 },
{ text: 'Class', datafield: 'class_type', width: 100 },
{ text: 'Subjects', datafield: 'subject_type', width: 100 },
{ text: 'Chapter', datafield: 'chapter_name', width: 160 },
{ text: 'Chapter Number', datafield: 'chapter_number', cellsalign: 'center',width: 60},
{ text: 'Content Author', datafield: 'author_name'},
{ text: 'Content Reviewer', datafield: 'reviewer_name'},
{ text: 'Edit', datafield: 'Edit', width: 60, cellsrenderer: function () {
return '<div style="width:100%"><img src="../images/edit.png" style="margin-left: 25%"/></div>';
},
},
{ text: 'Delete', datafield: 'delete', width: 60, cellsrenderer:function () {
return "<div style='width:100%'><a href='javascript:void(0)' class='**delbutton**'><img src='../Images/delete.png' style='margin-left:25%'/></a></div>";
},
},
]
});
$(document).ready(function() {
$(".**delbutton**").click(function(){
alert('sdsdsd');
alert('Are You sure you want to delete!');
evt.preventDefault();
var id=this.href;
var url='http://localhost/schoollife/services/getchapters.php?a=deletechapter&chapter_id='+data[i].id;
$.messager.confirm('Confirm','Are you sure you want to delete record?');
$.ajax({
cache:false,
dataType:'json',
url:'http://localhost/schoollife/services/getchapters.php?a=deletechapter&chapter_id='+data[i].id,
async:false,
success:function(data){
alert(data);
}
})
});
});
});
If I do the same in a .js file I wouldn't have any problem. What am I missing here?
Thanks
Well, what about <script> tag:
<script>
//js code here
</script>
You need of course to place it after including jquery.
you have to close }); first document on load function . and consider about open bracket and close bracket
Related
I'm using this code to create a simple CRUD using Jsgrid and php, but the page isn't loading when i change the type field to date. I watched almost the entire youtube and I didn't find anything about.
I dont even know what to do
Can somebody help me?
index.php:
<body>
<div class="container">
<br />
<div class="table-responsive">
<h3 align="center">Inline Table Insert Update Delete in PHP using jsGrid</h3><br />
<div id="grid_table"></div>
</div>
</div>
<script type="text/javascript" src="js.js"></script>
</body>
js.js
var db = {
loadData: function(filter){
return $.ajax({
type: "GET",
url: "fetch_data.php",
data: filter
});
},
insertItem: function(item){
return $.ajax({
type: "POST",
url: "fetch_data.php",
data: item
});
},
updateItem: function(item){
return $.ajax({
type: "PUT",
url: "fetch_data.php",
data: item
});
},
deleteItem: function(item){
return $.ajax({
type: "DELETE",
url: "fetch_data.php",
data: item
});
}
};
var MyDateField = function (config) {
jsGrid.Field.call(this, config);
};
MyDateField.prototype = new jsGrid.Field({
sorter: function (date1, date2) {
return new Date(date1) - new Date(date2);
},
itemTemplate: function (value) {
return new Date(value).toDateString();
},
insertTemplate: function (value) {
return this._insertPicker = $("<input class='date-picker'>").datetimepicker();
},
editTemplate: function (value) {
return this._editPicker = $("<input class='date-picker'>").datetimepicker();
},
insertValue: function () {
return this._insertPicker.data("DateTimePicker").useCurrent();
},
editValue: function () {
return this._editPicker.data("DateTimePicker").useCurrent();
}
});
jsGrid.fields.date = MyDateField;
$('#grid_table').jsGrid({
width: "100%",
height: "600px",
filtering: true,
inserting:true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 9,
deleteConfirm: "Do you really want to delete data?",
controller: db,
fields: [
{
name: "id",
type: "hidden",
css: 'hide'
},
{
title:"Load Number",
name: "loadnumber",
type: "text",
width: 150,
validate: "required"
},
{
title:"Broker MC",
name: "brokermc",
type: "text",
width: 150,
validate: "required"
},
{
title:"Broker",
name: "brok3r",
type: "text",
width: 50,
validate: function(value)
{
if(value > 0)
{
return true;
}
}
},
{
title:"Driver",
name: "driver",
type: "text",
width: 150,
validate: "required"
},
{
title:"Load Date",
name: "loaddate",
type: "date"
},
{
type: "control"
}
]
});
i tried to rename to "MyDateField", the page loads but the item field disappears, how can i fix it?
Im fetching my data in my server side and I put checkbox.
I need some clarification, do I need to put checkbox here or it will be automatically added?
Controller
$result[] = array(
'#' => '<span style="font-size: 12px; color: gray">'.$counter++.'</span>',
'number' => '<p>'.$value->number.'</p>',
'vendor' => '<p>'.$vendor->name .'</p>',
'document_reference' => '<p>'.$value->document_reference.'</p>',
'date_needed' => '<p>'.$value->date_needed.'</p>',
'requesting_department' => '<p>'.$department->name.'</p>',
'amount' => '<p align="right">'.number_format($value->total_amount,2).'</p>',
'status' => '<p>'.$status.'</p>',
'approval_status' => '<p id="'.$value->id.'">'.$approval.'</p>',
'created_by' => '<p id="created_at'.$value->id.'">'.$user->name.'</p>',
'action' => '<i class="fa fa-eye"></i>',
'checkbox' => '<input type="checkbox" name="checkbox[]" value="'.$value->id.'">'
In my view page I used route to call this method. In here I have now my data.
My View
var table3 = $('#get-rfp-for-approval-table').DataTable({
'processing': true,
'serverSide': true,
ajax: {
url: '/requests/request-for-payment/getRFPforApproval',
dataSrc: ''
},
columns: [
{ data: '#' },
{ data: 'number' },
{ data: 'vendor' },
{ data: 'document_reference' },
{ data: 'date_needed' },
{ data: 'requesting_department' },
{ data: 'amount' },
{ data: 'status' },
{ data: 'created_by' },
{ data: 'approval_status' },
{ data: 'action' },
{ data: 'checkbox' },
],
columnDefs: [
{
targets: 11,
checkboxes: {
selectRow: true
}
}
],
select: {
style: 'multi'
},
order: [[1,'desc']]
});
Example I have 15 data, I checked data 5 and data 14. then I submit the form.
My form
if ( $('#approved-selected-form').length > 0 ) {
$('#approved-selected-form').submit(function(e){
var form = this;
var rows_selected = table3.column(0).checkboxes.selected();
// Iterate over all selected checkboxes
$.each(rows_selected, function(index, rowId){
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'checkbox[]')
.val(rowId)
);
});
var formData = $(this).serialize();
swal({
title: "Are you sure?",
text: "Transaction will be approved.",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willSave) => {
if (willSave) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
})
$.ajax({
url: '/requests/request-for-payment/approvedTransaction',
type: "POST",
data: formData,
beforeSend: function() {
var span = document.createElement("span");
span.innerHTML = '<span class="loading-animation">LOADING...</span>';
swal({
content: span,
icon: "warning",
buttons: false,
closeOnClickOutside: false
});
$('.request-for-payment-finish').attr('disabled', 'disabled');
},
success: function(response) {
if (response != '') {
$('#get-request-for-payment-table').DataTable().destroy();
getRequestForPaymentTable();
$('#add-request-for-payment-form').trigger("reset");
swal("Transaction has been saved!", {
icon: "success",
});
setTimeout(
function()
{
window.location.href = "/requests/request-for-payment?id="+response+"#view-request-for-payment-modal";
}, 1500);
}
},
complete: function() {
$('.request-for-payment-finish').removeAttr('disabled');
}
});
} else {
swal("Save Aborted");
}
});
e.preventDefault();
return false;
})
}
NOTE: I tried to dd it in my controller it gives me this
array:1 [
"get-rfp-for-approval-table_length" => "10"
]
I also noticed that in my th, I dont have checkbox(when I clicked this, everything will be checked). Im using this as a guide. https://jsfiddle.net/snqw56dw/3182/.
Question: How can I get those values in my controller?
You should be returning ID in your controller.
$result[] = array(
// ... skipped ...
'checkbox' => $value->id
);
Also since checkbox in column with index 11, you should be using that index when retrieving the data.
var rows_selected = table3.column(11).checkboxes.selected();
On the side note, I see that you're using server-side processing mode ('serverSide': true). Make sure your controller returns proper response.
I have a login with username and password, and a button with login. I want to send data from username and password to server-side PHP.
Ext.require([
'Ext.form.Panel',
'Ext.layout.container.Anchor'
]);
var log = Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: 'login',
title: 'Login section',
bodyPadding: '10 10 0',
width: 300,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
border: false,
xtype: 'panel',
flex: 1,
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype: 'textfield',
fieldLabel: 'User Name',
anchor: '-5',
name: 'first',
id: 'userName'
}, {
xtype: 'textfield',
fieldLabel: 'Password',
anchor: '-5',
name: 'password',
inputType: 'password',
id: 'password'
}]
}
],
buttons: ['->', {
text: 'Login',
name: 'submit',
/*listeners: {
tap: function () {
var form = Ext.getCmp('userName');
//var values = form.getValues();
Ext.Ajax.request({
url: 'index.php',
params: form,
success: function (response) {
var text = response.responseText;
Ext.Msg.alert('asfasfaf', text);
},
failure: function (response) {
Ext.Msg.alert('Error', 'Error while submitting the form');
console.log(response.responseText);
}
});
}
}*/
/* handler: function () {
Ext.Ajax.request({
url: 'index.php',
method: 'POST',
params: Ext.getCmp('userName').getValue(),
success: function (response) {
Ext.Msg.alert('success ' + Ext.getCmp('userName').getValue());
},
failure: function (response) {
Ext.Msg.alert('server-side failure with status code ' + response.status);
}
});
}*/
},
{
text: 'Register?'
}]
});
});
I see that you have already tried to extract values and send request to php. May be this structure will help you. But you have to be sure that your php url accepts parameters with names 'param1' and 'param2' (or whatever your php accepts:) )
{
xtype : 'button',
text : "Submit"
formBind : true,
handler : function() {
var userName = this.up('form').down('#userName');
var password = this.up('form').down('#password');
Ext.Ajax.request({
url: url, // your php url
method: 'POST',
params: {param1: userName, param2:password },
disableCaching: false,
success: function(response, opts)
{
var text = response.responseText; // for debugging print text and decodedText
var decodedText = Ext.decode(text);
if(decodedText.success)
{
}
}
failure: function()
{
}
});
}
}
Ext.getCmp('userName').getValue();
You can use the Ext Form's submit method from within your button handler, e.g.:
// ....
buttons: [{
text: 'Submit!',
handler: function(btn) {
btn.up('form').getForm().submit({
url: 'mybackend.php',
success: function(ret) {},
failure: function(ret) {},
});
}
}],
// .....
Are there any security risks using the jqwidget way of data loading from remote database i.e giving the path of the php file that just echoes the json data?
Here is a sample code
$(document).ready(function () {
var source =
{
datatype: "json",
datafields: [
{ name: 'CompanyName'},
{ name: 'ContactName'},
{ name: 'ContactTitle'},
{ name: 'Address'},
{ name: 'City'}
],
url: 'grid_data.php',
cache: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
source: source,
columns: [
{ text: 'Company Name', datafield: 'CompanyName', width: 250},
{ text: 'ContactName', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
{ text: 'Address', datafield: 'Address', width: 200 },
{ text: 'City', datafield: 'City', width: 120 }
]
});
});
I use AppendGrid as my plugin for table insert form containing header and detail.
Here is my code :
$('#tblAppendGrid').appendGrid({
initRows: 1,
columns: [
{ name: 'CodeNo', display: 'Code No', type: 'text', ctrlCss: { 'text-align': 'center' },ctrlAttr: { maxlength: '10' }},
{ name: 'CartonNo', display: 'Carton No', type: 'text', ctrlCss: {'text-align': 'center'},ctrlAttr: { maxlength: '10' }},
{ name: 'JawNo', display: 'Jaw No', type: 'text',ctrlCss: { 'text-align': 'center' },ctrlAttr: { maxlength: '10' }},
{ name: 'Time', display: 'Time', type: 'text', ctrlAttr: { maxlength: '10' },
ctrlCss: {'text-align': 'center' }, value: '<?php echo"$jam_ini";?>'},
{ name: 'wos', display: 'Weight Of Sample(67-72 g)',
type: 'text', ctrlAttr: { maxlength: 10 }, ctrlCss: { 'text-align': 'center' }},
{ name: 'odour', display: 'Odour/flavour&Taste (Normal)*',
type: 'select', ctrlOptions: {V: 'V',X: 'X'},ctrlCss: {'align': 'center' }},
{ name: 'ph', display: 'pH(6,0-6,4)', type: 'text', ctrlAttr: { maxlength: '10' }, ctrlCss: {'text-align': 'center' }},
{ name: 'et', display: 'Electrolit Test (Negative)', type: 'select', ctrlOptions: {N: 'N',P: 'P'}
,ctrlCss: {'align': 'center' }},
{ name: 'it', display: 'Ink. Test(Negative)**', type: 'select', ctrlOptions: {N: 'N',P: 'P','':''},
ctrlCss: {'align': 'center' }},
{ name: 'remark', display: 'Remark', type: 'text', ctrlAttr: { maxlength: '10' }, ctrlCss: {'text-align': 'center' }}
]
});
// Dummy: Handle save button clicked
$('#tombolsave').button().click(function () {
$("#status").html("Saving...");
$("#loading").show();
var HeaderID = $("#HeaderID").val();
var UserName = $("#UserName").val();
var date = $("#date").val();
var bop = $("#bop").val();
var pdate = $("#pdate").val();
var exdate = $("#exdate").val();
var line = $("#line").val();
var toi = $("#toi").val();
var data = $('#tblAppendGrid').appendGrid('getAllValue');
var count = $('#tblAppendGrid').appendGrid('getRowCount');
for (var i=0;i<=count;i++){
var CodeNo = data[i].CodeNo;
var CartonNo = data[i].CartonNo;
var JawNo = data[i].JawNo;
var Time = data[i].Time;
var wos = data[i].wos;
var odour = data[i].odour;
var ph = data[i].ph;
var et = data[i].et;
var it = data[i].it;
var remark = data[i].remark;
alert(it);
$.ajax({
type:'POST',
url: "aksi.php",
data: "op=save&HeaderID="+HeaderID+"&UserName="+UserName+"&date="+date+"&bop="+bop+
"&pdate"+pdate+"&exdate="+exdate+
"&line="+line+"&toi"+toi+"&i="+i+
"&CodeNo[]="+CodeNo+"&CartonNo[]"+CartonNo+"&JawNo[]="+JawNo+
"&Time[]="+Time+"&wos[]"+wos+"&odour[]="+odour+"&ph[]="+ph+"&et[]"+et+"&it[]="+it+
"&remark[]="+remark,
cache: false,
success: function(msg){
if(msg=="sukses"){
$("#status").html("Berhasil...");
$("#loading").hide();
document.location.reload();
}else{
$("#status").html("ERROR..");
}
}
});
}
});
});
My problem in AJAX POST, how I can post each detail value and how I use it in aksi.php.
Hope this can make sense.
in your script nothing wrong you just forget to add this "=" in a part like "&CartonNo[]"+CartonNo to "&CartonNo[]="+CartonNo
on aksi.php just make an array like
//script connect to database
for($i = 0; $i< $max; $i++){
//detail
$CartonNo = $_POST[CartonNo][$i];
....
//sql action
}