Develop Reference

How to get selected checkbox based on first selected dropdown after refresh the page?

I have dropdown, checkboxes and button submit. First, the user will choose at dropdown (position of work). Second, the user will select the checkbox and after that submit the data. Here, after refresh it should be appear back the previous selected dropdown and checkbox. But, I did not get it. Anyone here have more better solution?
JavaScript Dropdown
//dropdown position
$("#dropdown").kendoDropDownList({
optionLabel: "- Select Position -",
dataTextField: "functionName",
dataValueField: "hrsPositionID",
dataSource: {
transport:{
read: {
url: "../DesignationProgramTemplate/getData.php",
type: "POST",
data: function() {
return {
method: "getDropdown",
}
}
},
},
},
change: onChange
}).data('kendoDropDownList');
dropdownlist = $("#dropdown").data("kendoDropDownList");
Checkbox treeview (Kendo UI)
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json"
}
},
schema: {
model: {
id : "ehorsProgramID",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Accounting" }
});
$("#AccountingTree").kendoTreeView({
check: onCheck,
checkboxes: { checkChildren: true } ,
// select: onSelect,
dataSource: homogeneous,
dataBound: function(){
this.expand('.k-item');
},
dataTextField: ["module","groupname","ehorsProgramName"]
});
AJAX for submit button
//AJAX call for button
$("#primaryTextButton").kendoButton();
var button = $("#primaryTextButton").data("kendoButton");
button.bind("click", function(e) {
var test = $("#dropdown").val()
$.ajax({
url: "../DesignationProgramTemplate/getTemplate.php",
type: "post",
data: {'id':test,'progid':array},
success: function () {
// you will get response from your php page (what you echo or print)
kendo.alert('Success'); // alert notification
//refresh
//location.reload("http://hq-global.winx.ehors.com:9280/ehors/HumanResource/EmployeeManagement/DesignationProgramTemplate/template.php");
},
});
});
JavaScript for check checkboxes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
var array = [];
function onCheck() {
var checkedNodes = [],treeView = $("#AccountingTree").data("kendoTreeView"),message;
var checkedNodes2 = [],treeView2 = $("#AdminSystemTree").data("kendoTreeView"),message;
var checkedNodes3 = [],treeView3 = $("#FnBTree").data("kendoTreeView"),message;
var checkedNodes4 = [],treeView4 = $("#HumanResourceTree").data("kendoTreeView"),message;
var checkedNodes5 = [],treeView5 = $("#InventoryManagementTree").data("kendoTreeView"),message;
var checkedNodes6 = [],treeView6 = $("#SalesMarketingTree").data("kendoTreeView"),message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
checkedNodeIds(treeView2.dataSource.view(), checkedNodes);
checkedNodeIds(treeView3.dataSource.view(), checkedNodes);
checkedNodeIds(treeView4.dataSource.view(), checkedNodes);
checkedNodeIds(treeView5.dataSource.view(), checkedNodes);
checkedNodeIds(treeView6.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = checkedNodes.filter(x => !!x).join(",");
array = checkedNodes.filter(x => !!x);
} else {
message = "No nodes checked.";
}
}
Output
JavaScript for accessing the dataItem
// cookies
var values = ["LA1","LA6","LA12"]; //array nnti array ni la localstorage/cookies
var setTreeViewValues = function(values) {
var tv = $("#AccountingTree").data("kendoTreeView");
document.write(JSON.stringify(tv));
tv.forEach(function(dataItem) {
alert("test");
if (dataItem.hasChildren) {
var childItems = dataItem.children.data();
//document.write(JSON.stringify(childItems[0].items[0].programID));
}
// document.write(JSON.stringify(dataItem.items));
if (values.indexOf(childItems[0].items[0].programID) > -1) {
dataItem.set("checked", true);
}
});
};
setTreeViewValues(values);
console.log(datasource.data()[0].hasChildren);
// end cookies

So without knowing how you are binding the existing values to the page I am assuming you will be calling the page state somewhere within your Page loading.
So I have prepared a dojo that shows two different ways of setting the checked state of the items.
https://dojo.telerik.com/EhaMIDAt/8
1. Setting at the DataSource Level
So when setting up the datasource you can add an extra attribute to your collection called checked this will then set the checked value for the item or children items when loaded. using the example I have in the dojo:
{
id: 9,
text: "Reports",
expanded: true,
spriteCssClass: "folder",
items: [{
id: 10,
text: "February.pdf",
spriteCssClass: "pdf"
},
{
id: 11,
text: "March.pdf",
spriteCssClass: "pdf",
checked: true
},
{
id: 12,
text: "April.pdf",
spriteCssClass: "pdf"
}
]
}
this will set the checked state to true for you and show the checkbox as checked.
2. Manually Set the values after loading all the DataSources.
So I have done this on a button click but this could easily be done on a ready state or some other trigger if needed. Here the button when clicked will find the node in the tree with the text Research.pdf and either set it in a checked or unchecked state for you.
$('#checked').bind('click', () => {
var box = $("#treeview").data("kendoTreeView").findByText('Research.pdf').find('input[type="checkbox"]');
box.prop('checked', !box.is(':checked'));
});
Again the sample it taken from dojo link above. Hopefully this gives you a start on getting the values set according to your specific requirements.
I would probably have the value checked state set when you load the datasource for the treeview.

Simple jQuery and PHP login issue

Hello I am trying to implement a simple login feature using jQuery and PHP however the login keeps failing and I cannot figure out why.
This is the PHP function that deals with the login
function login()
{
$return = array(
'success' => false
);
if ($users[$_POST['login']] == $_POST['password']) {
$return = array(
'success' => true
);
$_SESSION['loggedIn'] = true;
}
print(json_encode($return));
}
The username is declared in a different PHP file and is declared like so.
$users['admin'] = '123654';
The following jQuery code should do the loging in.
$(self).on('click', '.loginSubmitButton', function() {
var username = $('#username').val().trim();
var password = $('#password').val().trim();
$.post(settings.server, {
login: username,
password: password
}, function(data) {
if (data.success == true) {
}
else {
alert('Wrong username or password!')
}
});
});
So far it doesnt implement anything in case of success because everytime I try to run this code and I enter the login credentials I get the Wrong username or password! alert.

You need to make the following changes to two sections:
PHP - add $users to function() like function($users) or add global as so:
function login()
{
global $users;
$return = array(
'success' => false
);
if ($users[$_POST['login']] == $_POST['password']) {
$return = array(
'success' => true
);
$_SESSION['loggedIn'] = true;
}
print(json_encode($return));
}
jQuery - As you are returning a JSON encoded string you need to parse it into jQuery:
$(self).on('click', '.loginSubmitButton', function() {
var username = $('#username').val().trim();
var password = $('#password').val().trim();
$.post(settings.server, {
login: username,
password: password
}, function(data) {
var data = JSON.parse(data);
if (data.success == true) {
}
else {
alert('Wrong username or password!')
}
});
});

Jtable Delete not Deleting

I'm having a problem with the Jquery Jtable plugin delete method. The variable 'email' is passed between pages and into the .php file. The list action function works, so I know it isn't a connection issue. My database name is maps.
Below is my code:
Javascript:
var emailHolder="email#email.com";
var file="c";
function loadForm()
{
$("#my-form" ).dialog( "open" );
}
$(document).ready(function () {
//Prepare jTable
$('#PeopleTableContainer').jtable({
title: 'Table of people',
actions: {
listAction: 'PersonActions.php?action=list&emailHolder='+emailHolder,
deleteAction: 'PersonActions.php?action=delete&emailHolder='+emailHolder+"&fileHolder="+file
},
fields: {
filename: {
key:true,
title: 'File',
width: '40%'
},
email: {
title:'User',
key: true,
create: false,
edit: false,
list:false
}
}
});
Php:
{
$email= $_GET['emailHolder'];
//Delete from database
$result = mysql_query("DELETE FROM maps WHERE (email='$email' and filename = " . $_POST["filename"] . ");");
//Return result to jTable
$jTableResult = array();
$jTableResult['Result'] = "OK";
print json_encode($jTableResult);
}

I am not sure try removing 'key' from 'email' field in your jtable

Dependent / Cascading Dropdown

I am using the cascading dropdown jquery plugin. ( https://github.com/dnasir/jquery-cascading-dropdown)
I have two dropdowns. 'Client' and 'Site'.
Based on which client you select, the sites list should be appropriately reduced to only show the sites for the selected client. I have setup two php scripts returnClientList.php and returnSiteList.php that successfully return json arrays with a label/value pair.
My problem is that I cannot reduce the site list, after selecting the client. The event successfully fires but I only get the full list back. As you will see, the code is using the getJSON request which i know from the manual sends a HTTP GET. Looking at the network panel of chrome reveals that there is no GET value actually being sent.
Hopefully something obvious but I am new to jquery so help appreciated.
My code:
JS
$('#edit-shift').cascadingDropdown({
selectBoxes: [
{
selector: '.clients',
source: function(request, response) {
$.getJSON('returnClientList.php', request, function(data) {
var selectOnlyOption = data.length <= 1;
response($.map(data, function(item, index) {
return {
label: item.label,
value: item.value,
selected: selectOnlyOption // Select if only option
};
}));
});
}
},
{
selector: '.sites',
requires: ['.clients'],
source: function(request, response) {
$.getJSON('returnSiteList.php', request, function(data) {
var selectOnlyOption = data.length <= 1;
response($.map(data, function(item, index) {
return {
label: item.label,
value: item.value,
selected: selectOnlyOption // Select if only option
};
}));
});
}
},
{
onChange: function(event, value, requiredValues){}
}
]
});
PHP
//this script returns a json array for use in jquery autocomplete fields for site lists...
header('Content-type: application/json');
require("connect.php");
$client_id = $_GET['?'];
//do the query for sites that are active
$sql = "SELECT * FROM site WHERE active=1 AND client_id='$client_id' ORDER BY site_name ASC";
$result = mysql_query($sql) or die('Error: ' . mysql_error());
//loop the results and create php array
while($row = mysql_fetch_array($result)){
$arr[] = array('label' => $row['site_name'], 'value' => $row['id']);
}
echo json_encode($arr);

Ended up writing my own solution to this and scrapped the plugin. Enjoy.
//dynamically returns the sites once the user chooses a client - edit/add shift form
$('.client-id').change(function () {
var selectedClient = $(this).val();
if (selectedClient != null && selectedClient != '') {
$.getJSON('returnSiteList.php', { id: selectedClient },
function (Sites) {
var siteSelect = $('.site-id');
siteSelect.empty();
$.each(Sites, function (index, site) {
siteSelect.append($('<option/>', {
value: site.value,
text: site.label
}));
});
});
}
});

Extjs - Dynamically generate fields in a FormPanel

I've got a script that generates a form panel:
var form = new Ext.FormPanel({
id: 'form-exploit-zombie-' + zombie_ip,
formId: 'form-exploit-zombie-' + zombie_ip,
border: false,
labelWidth: 75,
formBind: true,
defaultType: 'textfield',
url: '/ui/modules/exploit/new',
autoHeight: true,
buttons: [{
text: 'Execute exploit',
handler: function () {
var form = Ext.getCmp('form-exploit-zombie-' + zombie_ip);
form.getForm().submit({
waitMsg: 'Running exploit ...',
success: function () {
Ext.beef.msg('Yeh!', 'Exploit sent to the zombie.')
},
failure: function () {
Ext.beef.msg('Ehhh!', 'An error occured while trying to send the exploit.')
}
});
}
}]
});
that same scripts then retrieves a json file from my server which defines how many input fields that form should contain. The script then adds those fields to the form:
Ext.each(inputs, function(input) {
var input_name;
var input_type = 'TextField';
var input_definition = new Array();
if(typeof input == 'string') {
input_name = input;
var field = new Ext.form.TextField({
id: 'form-zombie-'+zombie_ip+'-field-'+input_name,
fieldLabel: input_name,
name: 'txt_'+input_name,
width: 175,
allowBlank:false
});
form.add(field);
}
else if(typeof input == 'object') {
//input_name = array_key(input);
for(definition in input) {
if(typeof definition == 'string') {
}
}
} else {
return;
}
});
Finally, the form is added to the appropriate panel in my interface:
panel.add(form);
panel.doLayout();
The problem I have is: when I submit the form by clicking on the button, the http request sent to my server does not contain the fields added to the form. In other words, I'm not posting those fields to the server.
Anyone knows why and how I could fix that?

Your problem is here:
id: 'form-exploit-zombie-'+zombie_ip,
formId: 'form-exploit-zombie-'+zombie_ip,
what you are doing is that you are setting the id attribute of the form panel and the id attribute of the form (form tag) to the same value. Which means that you have two elements with the same id and that is wrong.
Just remove this line
formId: 'form-exploit-zombie-'+zombie_ip,
and you should be fine.

Did you check the HTTP Request parameter for the form values?
If you server side is in PHP, what do you get from response by passing any field name? For example, if one of your input name was "xyz" what do you get by
$_POST[ 'txt_xyz' ]