We Keep Coding

SurveyJs with Laravel 8 without Larvel-surveyjs package

I want to create a survey app for my client for this I select surveyjs library to build the app.
I have created all tables like Survey, Questions, Answers, and Options now I want to pass dynamics questions and answers from database like
public function my_survey($slug)
{
$surveys = Survey::where('slug',$slug)->first();
$questions = Question::where('survey_id',$surveys->id)->with('answers')->get();
return view('user.my-survey', compact('surveys','questions'));
}
this will return the array of questions and options saved in database. and
this is Surveyjs script
Survey
.StylesManager
.applyTheme("modern");
var json = {
pages: [
{
questions: [
{
type: "matrix",
name: "Quality",
title: "Please indicate if you agree or disagree with the following statements",
columns: [
{
value: 1,
text: "Strongly Disagree"
}, {
value: 2,
text: "Disagree"
}, {
value: 3,
text: "Neutral"
}, {
value: 4,
text: "Agree"
}, {
value: 5,
text: "Strongly Agree"
}
],
rows: [
{
value: "affordable",
text: "Product is affordable"
}, {
value: "does what it claims",
text: "Product does what it claims"
}, {
value: "better then others",
text: "Product is better than other products on the market"
}, {
value: "easy to use",
text: "Product is easy to use"
}
]
}, {
type: "rating",
name: "satisfaction",
title: "How satisfied are you with the Product?",
isRequired: true,
mininumRateDescription: "Not Satisfied",
maximumRateDescription: "Completely satisfied"
}, {
type: "rating",
name: "recommend friends",
visibleIf: "{satisfaction} > 3",
title: "How likely are you to recommend the Product to a friend or co-worker?",
mininumRateDescription: "Will not recommend",
maximumRateDescription: "I will recommend"
}, {
type: "comment",
name: "suggestions",
title: "What would make you more satisfied with the Product?"
}
]
}, {
questions: [
{
type: "radiogroup",
name: "price to competitors",
title: "Compared to our competitors, do you feel the Product is",
choices: ["Less expensive", "Priced about the same", "More expensive", "Not sure"]
}, {
type: "radiogroup",
name: "price",
title: "Do you feel our current price is merited by our product?",
choices: ["correct|Yes, the price is about right", "low|No, the price is too low for your product", "high|No, the price is too high for your product"]
}, {
type: "multipletext",
name: "pricelimit",
title: "What is the... ",
items: [
{
name: "mostamount",
title: "Most amount you would every pay for a product like ours"
}, {
name: "leastamount",
title: "The least amount you would feel comfortable paying"
}
]
}
]
}, {
questions: [
{
type: "text",
name: "email",
title: "Thank you for taking our survey. Your survey is almost complete, please enter your email address in the box below if you wish to participate in our drawing, then press the 'Submit' button."
}
]
}
]
};
window.survey = new Survey.Model(json);
survey
.onComplete
.add(function (sender) {
document
.querySelector('#surveyResult')
.textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
$("#surveyElement").Survey({model: survey});
I want to pass dynamic questions and options from laravel controller to the above script. please help me how to acheive this

In your my-survey view put questions in JSON format:
#isset($questions)
<script type="text/javascript">
window.questions= {!! $questions !!};
</script>
#endisset
In Surveyjs script put:
const json = window.questions;
window.survey = new Survey.Model(json);

jqwidgets jxGrid (selectionmode checkbox) select row (check) for any click on the row

I've a jqxGrid with checkboxes (documentation and example).
I'd like to select the row (and as result the checkbox become checked) when the user click on any place/column of the row (and not only on checkbox) but it doesn't seems to be possible.
Someone found a solution for this?
PS - The events "cellselect" or "rowselect" aren't triggered when the selectionmode = "checkbox" (but it works for "multiplerows")
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/rowselection.htm

Have you tried the 'rowclick' event?

I think the 'cellclick' event might help you out.
$("#jqxgrid").on("cellclick", function (event)
{
var args = event.args;
var rowBoundIndex = args.rowindex;
var selectedRowIndexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
var toggleSelection = selectedRowIndexes.indexOf(rowBoundIndex) > -1
? 'unselectrow'
: 'selectrow';
$("#jqxgrid").jqxGrid(toggleSelection, rowBoundIndex);
});
You could try out the following code snippet; it should do what you expect.
Hope it helps !
$(document).ready(function() {
var data = [{
id: "1",
legalName: "Agrawal, Parag",
agencyName: "Social Services",
agencyAddress: "Market Square, 1355 Market St<br>#900<br>San Francisco, CA 94103",
phone: "(415) 222-9670",
hireDate: "04-3-2022",
has401k: true,
lock: 1
},
{
id: "2",
legalName: "Zuckerberg, Mark",
agencyName: "Defense Advocates Office",
agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
phone: "(123) 456-1234",
hireDate: "01-30-2019",
has401k: true,
lock: 1
},
{
id: "2",
legalName: "Walker, Johnny",
agencyName: "Prosecutor's Office",
agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
phone: "(123) 329-0124",
hireDate: "10-03-2016",
has401k: false,
lock: 1
},
{
id: "2",
legalName: "Daniels, Jack",
agencyName: "Prosecutor's Office",
agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
phone: "(123) 856-5309",
hireDate: "07-28-2011",
has401k: false,
lock: 1
},
{
id: "2",
legalName: "Fonda, Jane",
agencyName: "Social Services",
agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
phone: "(123) 456-1234",
hireDate: "06-14-2021",
has401k: true,
lock: 1
},
{
id: "2",
legalName: "Bauer, Jack",
agencyName: "National Defense",
agencyAddress: "24 Bauer Way<br>Menlo Park, CA 94025",
phone: "(123) 242-4242",
hireDate: "11-10-2008",
has401k: false,
lock: 1
}
];
// prepare the data
var source = {
datatype: "json",
datafields: [{
name: "legalName"
},
{
name: "agencyName"
},
{
name: "agencyAddress"
},
{
name: "phone"
},
{
name: "hireDate",
type: "date"
},
{
name: "has401k",
type: "bool"
},
{
name: "lock",
type: "number"
}
],
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
var source = {
localdata: data,
datatype: "array",
};
$("#jqxgrid").jqxGrid({
source: dataAdapter,
theme: "energyblue",
width: "98%",
height: "630px",
selectionMode: "checkbox",
autoheight: true,
autorowheight: true,
columns: [{
text: "Legal Name",
datafield: "legalName",
width: "20%"
},
{
text: "Agency Name",
datafield: "agencyName",
filtertype: "checkedlist",
width: "20%"
},
{
text: "Agency Address",
datafield: "agencyAddress",
width: "20%"
},
{
text: "Phone",
datafield: "phone",
width: "20%"
},
{
text: "Hire Date",
datafield: "hireDate",
cellsformat: "d",
filtertype: "range",
width: "10%"
}
]
});
$("#jqxgrid").on("cellclick", function (event)
{
var args = event.args;
var rowBoundIndex = args.rowindex;
var selectedRowIndexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
var toggleSelection = selectedRowIndexes.indexOf(rowBoundIndex) > -1
? 'unselectrow'
: 'selectrow';
$("#jqxgrid").jqxGrid(toggleSelection, rowBoundIndex);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqx-all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.base.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.energyblue.min.css" rel="stylesheet"/>
<div id="jqxgrid"></div>

Inquirer.prompt exiting without an answer

I was wondering if anybody could help me out with an explanation as to why the below code would cause the command line to exit without waiting for an answer from the user.
init();
function init() {
loadPrompts();
}
async function loadPrompts() {
const { choice } = await inquirer.prompt([
{
type: "list",
name: "choice",
message: "What would you like to do?",
choices: [
{
name: "View All Employees",
value: "VIEW_EMPLOYEES",
},
{
name: "View All Employees By Department",
value: "VIEW_EMPLOYEES_BY_DEPARTMENT",
},
{
name: "View All Employees By Manager",
value: "VIEW_EMPLOYEES_BY_MANAGER",
},
{
name: "Add Employee",
value: "ADD_EMPLOYEE",
},
{
name: "Remove Employee",
value: "REMOVE_EMPLOYEE",
},
{
name: "Update Employee Role",
value: "UPDATE_EMPLOYEE_ROLE",
},
{
name: "Update Employee Manager",
value: "UPDATE_EMPLOYEE_MANAGER",
},
{
name: "View All Roles",
value: "VIEW_ROLES",
},
{
name: "Add Role",
value: "ADD_ROLE",
},
{
name: "Remove Role",
value: "REMOVE_ROLE",
},
{
name: "View All Departments",
value: "VIEW_DEPARTMENTS",
},
{
name: "Add Department",
value: "ADD_DEPARTMENT",
},
{
name: "Remove Department",
value: "REMOVE_DEPARTMENT",
},
{
name: "Quit",
value: "QUIT",
},
],
},
]);
switch (choice) {
case "VIEW_EMPLOYEES":
return viewEmployees();
default:
return quit();
}
}
async function viewEmployees() {
const employees = await db.findAllEmployees();
console.table(employees);
loadPrompts();
}
The aim is a simple command-line application that asks the user to select an option - then depending on what they have selected a function will be executed. But what is happening is that the application is running, showing the options then immediately exiting...

You Should use await with loadPrompts() to work synchronously;
(async function init(){
await loadPrompts();
})();

Kendo UI Dropdownlist checked

I have a kendo ui function dropdownlist, and it will call at Grid column editor. My question, by default how to display "Yes" when Add New Record in edit function. Currently it display null when Add New Record.
Demo in Dojo
Here I provide a working demo. Thank You

If I understand correctly you only have to add a default value to the Price in the Model?
"Price": {type: "string", defaultValue: "y" },
I include the whole function, just in case:
$(function() {
$("#grid").kendoGrid({
dataSource: {
data: [
{ Name: "Young John", Price: "y" },
{ Name: "John Doe", Price: "n" },
{ Name: "Old John", Price: "y" }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" },
"Price": {type: "string", defaultValue: "y" },
}
}
}
},
editable: "inline",
toolbar: ["create"],
columns: [{ field: "Name"},
{ field: "Price",
template: "#=(data.Price == 'y' ? 'Yes' : 'No')#",
editor: radioPrice
} ],
edit: function(e) {
if (e.model.isNew()) {
e.model.Price = 'y';
}
}
});
});

kendo grid sort after delete

I made a simple grid (Which is Sortable) and added a few records in it . When i delete all records and then if i click on any column to sort it take all records back even though i delete all of them
Here is what i am doing
$(document).ready(function () {
var dataitem = {};
var grid = $('#mygrid').kendoGrid({
dataSource: {data : [{
status: 'On',
description: 'a longer description'
}, {
status: 'On',
description: 'a longer description'
}, {
status: 'On',
description: 'a longer description'
}, {
status: 'On',
description: 'a longer description'
}, {
status: 'On',
description: 'a longer description'
}, {
status: 'On',
description: 'a longer description'
}]},
width: 250,
height: 200,
sortable:true,
columns: [{
field: "status"
}, {
field: "description",
title: "Description"
}, {
command: [{
name: "delete",
text: "delete",
click: _handleDelete,
imageClass: "ui-icon ui-icon-close"
}],
title: " ",
width: "100"
}]
}).data('kendoGrid');
var kWindow = $('#window').kendoWindow({
width: "500px",
title: "Delete dialog",
visible: false
}).data('kendoWindow');
$('.yesbtn').click(function () {
console.log('My message');
grid.dataSource.remove(dataitem);
kWindow.close();
});
$('.nobtn').click(function () {
console.log('My other message');
dataitem = {};
kWindow.close();
});
function _handleDelete(event) {
dataitem = grid.dataItem($(event.currentTarget).closest("tr"));
kWindow.open();
};
});
jsFiddle

Just noticed that other peoples also facing same problem and that was a bug in library and they fixed in latest version . So, i just updated version and its fixed.