I´m working on php to send data to ajax.
$phpArray = array("ok", "
<script>
mygallery = [
{type: "image", image: "img/gallery/slider/1.jpg", thmb: "img/gallery/slider/thumbs/1.jpg", alt: "", title: "", description: "", titleColor: "#000000", descriptionColor: "#000000"},
{type: "image", image: "img/gallery/slider/2.jpg", thmb: "img/gallery/slider/thumbs/2.jpg", alt: "", title: "", description: "", titleColor: "#000000", descriptionColor: "#000000"},
</script>"
);
echo json_encode($phpArray);
How to do the escape properly for this ? I have tried online javascript escape but doesn´t work
Just escape the " with backslashes:
$phpArray = array("ok", "
<script>
mygallery = [
{type: \"image\", image: \"img/gallery/slider/1.jpg\", thmb: \"img/gallery/slider/thumbs/1.jpg\", alt: \"\", title: \"\", description: \"\", titleColor: \"#000000\", descriptionColor: \"#000000\"},
{type: \"image\", image: \"img/gallery/slider/2.jpg\", thmb: \"img/gallery/slider/thumbs/2.jpg\", alt: \"\", title: \"\", description: \"\", titleColor: \"#000000\", descriptionColor: \"#000000\"},
</script>"
);
echo json_encode($phpArray);
Related
I create DateTime picker in Strapi with the required field validation but can't save. occurring following error.
apI Parametr
components: []
contentType: {name: "Events", description: "", connection: "default", collectionName: "events",…}
name: "Events"
description: ""
connection: "default"
collectionName: "events"
attributes: {title: {type: "string", required: true},…}
title: {type: "string", required: true}
created_by: {nature: "oneWay", target: "plugins::users-permissions.user", dominant: false, unique: false}
image: {type: "media", multiple: false, required: true}
seo_description: {type: "text"}
seo_title: {type: "string"}
description: {type: "richtext", required: true}
calendly_url: {type: "string"}
start_date: {type: "datetime", required: true}
type: "datetime"
required: true
end_date: {type: "datetime"}
PUT http://localhost:1337/content-type-builder/content-types/application::events.events 400 (Bad Request)```
I want to display the caption, but not the column headers. When the grid is first displayed only the caption should be visible. When the grid is expanded, the column headers are visible. Please see jsFiddle
var $grid = $("#grid");
$grid.closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-hdiv")
.hide();
Here you go with a solution https://jsfiddle.net/7v70640y/5/
$("#grid").jqGrid({
colModel: [
{ name: "firstName" },
{ name: "lastName" }
],
caption: "The caption",
hiddengrid: true,
data: [
{ id: 10, firstName: "Angela", lastName: "Merkel" },
{ id: 20, firstName: "Vladimir", lastName: "Putin" },
{ id: 30, firstName: "David", lastName: "Cameron" },
{ id: 40, firstName: "Barack", lastName: "Obama" },
{ id: 50, firstName: "François", lastName: "Hollande" }
]
});
$('div[role="columnheader"]').parent().hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>
<table id="grid"></table>
Just hide the div & it's parent div which has role as columnheader
$('div[role="columnheader"]').parent().hide();
Update with multiple jqGrid
Here you go with a solution https://jsfiddle.net/7v70640y/6/
$("#grid1").jqGrid({
colModel: [
{ name: "firstName" },
{ name: "lastName" }
],
caption: "The caption",
hiddengrid: true,
data: [
{ id: 10, firstName: "Angela", lastName: "Merkel" },
{ id: 20, firstName: "Vladimir", lastName: "Putin" },
{ id: 30, firstName: "David", lastName: "Cameron" },
{ id: 40, firstName: "Barack", lastName: "Obama" },
{ id: 50, firstName: "François", lastName: "Hollande" }
]
});
$("#grid2").jqGrid({
colModel: [
{ name: "firstName" },
{ name: "lastName" }
],
caption: "The caption",
hiddengrid: true,
data: [
{ id: 10, firstName: "Angela", lastName: "Merkel" },
{ id: 20, firstName: "Vladimir", lastName: "Putin" },
{ id: 30, firstName: "David", lastName: "Cameron" },
{ id: 40, firstName: "Barack", lastName: "Obama" },
{ id: 50, firstName: "François", lastName: "Hollande" }
]
});
$('#gview_grid1').find('div[role="columnheader"]').parent().hide();
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<table id="grid1"></table>
<br/><br/>
<table id="grid2"></table>
Hope this will help you.
Please see the image.
Not sure why the table doesn't stretch out. I want it stretch out from left to right.
The script:
<script type="text/javascript">
var jqgrid_data = [
{
id: "1",
name: "Test 1",
note: "Note 1",
amount: "150.00",
tax: "15.00",
total: "210.00"
}, {
id: "2",
name: "Test 2",
note: "Note 2",
amount: "220.00",
tax: "22.00",
total: "320.00"
}, {
id: "3",
name: "Test 3",
note: "Note 3",
amount: "40.00",
tax: "4.00",
total: "430.00"
}, {
id: "4",
name: "Test 4",
note: "Note 4",
amount: "510.00",
tax: "51.00",
total: "210.00"
}, {
id: "5",
name: "Test 5",
note: "Note 5",
amount: "210.00",
tax: "21.00",
total: "320.00"
}, {
id: "6",
name: "Test 6",
note: "Note 6",
amount: "70.00",
tax: "7.00",
total: "430.00"
}, {
id: "7",
name: "Test 7",
note: "Note 7",
amount: "80.00",
tax: "10.00",
total: "210.00"
}, {
id: "8",
name: "Test 8",
note: "Note 8",
amount: "300.00",
tax: "10.00",
total: "320.00"
}, {
id: "9",
name: "Test 9",
note: "Note 9",
amount: "90.00",
tax: "10.00",
total: "430.00"
}, {
id: "10",
name: "Test 10",
note: "Note 10",
amount: "200.00",
tax: "20.00",
total: "210.00"
}, {
id: "11",
name: "Test 11",
note: "Note 11",
amount: "77.00",
tax: "9.00",
total: "320.00"
}, {
id: "12",
name: "Test 12",
note: "Note 12",
amount: "56.00",
tax: "8.00",
total: "430.00"
}, {
id: "13",
name: "Test 13",
note: "Note 13",
amount: "554.00",
tax: "10.00",
total: "210.00"
}, {
id: "14",
name: "Test 14",
note: "Note 14",
amount: "265.00",
tax: "2.00",
total: "320.00"
}, {
id: "15",
name: "Test 15",
note: "Note 15",
amount: "765.00",
tax: "3.00",
total: "430.00"
}, {
id: "16",
name: "Test 16",
note: "Note 16",
amount: "89.00",
tax: "1.00",
total: "210.00"
}, {
id: "17",
name: "Test 17",
note: "Note 17",
amount: "99.00",
tax: "2.00",
total: "320.00"
}, {
id: "18",
name: "Test 18",
note: "Note 18",
amount: "49.00",
tax: "3.00",
total: "430.00"
}
];
</script>
<script>
$(document).ready(
function () {
jQuery("#jqgrid").jqGrid({
url: API_URL,
data: jqgrid_data,
datatype: "local",
height: '350',
colNames: ['Actions', 'Inv No', 'Client', 'Amount', 'Tax', 'Total'],
colModel: [
{ name: 'act', index: 'act', width:80, sortable: false },
{ name: 'id', index: 'id', width: 80 },
{ name: 'name', index: 'name', width: 80, editable: true },
{ name: 'amount', index: 'amount', align: "right", width: 80, editable: true },
{ name: 'tax', index: 'tax', align: "right", width: 80, editable: true },
{ name: 'total', index: 'total', align: "right", width: 80, editable: true }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager_jqgrid',
sortname: 'id',
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
gridComplete: function () {
var ids = jQuery("#jqgrid").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<button class='btn btn-xs btn-default btn-quick' title='Edit Row' onclick=\"jQuery('#jqgrid').editRow('" + cl + "');\"><i class='fa fa-pencil'></i></button>";
se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('" + cl + "');\"><i class='fa fa-save'></i></button>";
ca = "<button class='btn btn-xs btn-default btn-quick' title='Cancel' onclick=\"jQuery('#jqgrid').restoreRow('" + cl + "');\"><i class='fa fa-times'></i></button>";
jQuery("#jqgrid").jqGrid('setRowData', ids[i], { act: be + se + ca });
}
},
editurl: "dummy.html",
caption: "Vendor Managerment",
multiselect: true,
autowidth: true
});
});
</script>
<table id="jqgrid"></table>
<div id="pager_jqgrid"></div>
It seems that the width of the table is fixed.
I had the code which is similar with:
gridComplete: function() {
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
de = "<input style='height:22px;width:70px;' type='button' value='Delete' onclick='deleteRow('" + cl + "' );' />";
jQuery("#list").jqGrid('setRowData', ids[i], { Delete: de });
}
}
After I removed it, it stretches out.
How do I pass headers in an enyo.ajax call ?
enyo.kind({
name: "enyo.sample.AjaxSample",
kind: "FittableRows",
classes: "enyo-fit ajax-sample",
components: [
{kind: "FittableColumns", classes:"onyx-toolbar-inline", components: [
{content: "YQL: "},
{kind: "onyx.Input", name:"query", fit:true, value:'select * from weather.forecast where woeid in (select woeid from geo.places where text="san francisco, ca")'},
{kind: "onyx.Button", content:"Fetch", ontap:"fetch"}
]},
{kind: "FittableColumns", classes:"onyx-toolbar-inline", components: [
{content: "URL: "},
{kind: "onyx.Input", name:"baseUrl", fit:true, value:'http://query.yahooapis.com/v1/public/yql?format=json'}
]},
{kind: "onyx.TextArea", fit:true, classes:"ajax-sample-source"},
{name: "basicPopup", kind: "onyx.Popup", centered: true, floating: true, classes:"onyx-sample-popup", style: "padding: 10px;", content: "Popup..."}
],
fetch: function() {
var ajax = new enyo.Ajax({
url: this.$.baseUrl.getValue(),
headers: [{
"user-username" : "testuser",
"user-pwd" : "tester"
}]
});
// send parameters the remote service using the 'go()' method
ajax.go({
q: this.$.query.getValue()
});
// attach responders to the transaction object
ajax.response(this, "processResponse");
// handle error
ajax.error(this, "processError");
},
processResponse: function(inSender, inResponse) {
// do something with it
this.$.textArea.setValue(JSON.stringify(inResponse, null, 2));
},
processError: function(inSender, inResponse) {
var errorLog = "Error" + ": " + inResponse + "! " + (JSON.parse(inSender.xhrResponse.body)).error.description;
this.$.textArea.setValue(JSON.stringify(inSender.xhrResponse, null, 2));
this.$.basicPopup.setContent(errorLog);
this.$.basicPopup.show();
}
});
You're really close here. What you want to do is the following:
var ajax = new enyo.Ajax({
url: this.$.baseUrl.getValue(),
headers: {
"user-username" : "testuser",
"user-pwd" : "tester"
}
});
headers is an object, not an array.
This code return the result below in snaps.
How to populate text field with FirstName and LastName when click on template instead of [object object] ?
function forAutoComplete(FieldName){
var autoCompleteUsers = $("#employees").kendoAutoComplete({
minLength: 1,
dataTextField: FieldName,
template: '<div style="border-bottom: 1px solid DARKGRAY; padding:10px 0; clear:both;">' +
'<img style="float:left; margin-right:20px;" width=\"127\" height=\"127\" src=\"<?php echo base_url() ?>/user_uploads/employee_images/${data.Photo}\" alt=\"${data.Photo}\"/>'+
'<div style="display: inline-block;"><p>${ data.FileNo}</p>' +
'<h3>${ data.FirstName } ${ data.LastName }</h3></div>'+
'<div style="clear: both; "></div></div>',
dataSource: {
serverFiltering: true,
transport: {
read: {
type: "GET",
dataType: "json",
contentType:'application/json; charset=utf-8',
url: "<?php echo base_url() ?>index.php/hr_management/manage_hr/search_employee/",
data: function (arg){
return {FieldName : autoCompleteUsers.data("kendoAutoComplete").value()};
}
}
}
},
height: 300,
change: onChangeAutoComplete
});
}
The problem is likely to be related with the value that you set for dataTextField.
Doing some-sort-of-reverse-engineering, I guess that the JSON data that you return is something like:
[
{data: { FileNo: "0001", FirstName: "OnaBai", LastName: "it's me", Photo: "https://si0.twimg.com/profile_images/2648375258/7f7e451f0de1eb467fe35f4f481d7bf7_bigger.jpeg" } },
{data: { FileNo: "0002", FirstName: "Burke", LastName: "Holland", Photo: "https://si0.twimg.com/profile_images/3342899483/51e933d69222ce8ad8cd14e655116959.jpeg" } },
{data: { FileNo: "0003", FirstName: "Todd", LastName: "Anglin", Photo: "https://si0.twimg.com/profile_images/1478082886/todd-anglin-close-up_illustrated.png" } }
]
If so, you should be defining it as data.FirstName.
If you are defining it as:
[
{ FileNo: "0001", FirstName: "OnaBai", LastName: "it's me", Photo: "https://si0.twimg.com/profile_images/2648375258/7f7e451f0de1eb467fe35f4f481d7bf7_bigger.jpeg" },
{ FileNo: "0002", FirstName: "Burke", LastName: "Holland", Photo: "https://si0.twimg.com/profile_images/3342899483/51e933d69222ce8ad8cd14e655116959.jpeg" },
{ FileNo: "0003", FirstName: "Todd", LastName: "Anglin", Photo: "https://si0.twimg.com/profile_images/1478082886/todd-anglin-close-up_illustrated.png" }
]
Then it should be just FirstName.
Example of the first approach in here while second in here
If you define dataTextField: "data", and use the first approach for your JSON then you get the [object Object]. See it here