x-editable custom fields cannot get text of select menu - javascript

Ive followed this example from another SO thread:
X-editable custom field type not respecting overridden defaults
and its helped me to create a similar custom field with x-editable. All is working ok but i cant figure out how render/display the 'text' of the select - the SO example ouputs the 'value'. my js to initialis the x-editable to use my custom inputs is thus:
$('#stffulladdress').editable({
url : '',
pk : 6,
value : {
address : "",
city : "",
region : "",
postcode : "",
country : "eng"
},
sourceCountry: [
{ value: "eng", text: "ENGLAND" },
{ value: "ire", text: "IRELAND" },
{ value: "sco", text: "SCOTLAND" },
{ value: "cym", text: "WALES" }
],
validate : function(value) {
if (value.address == '' || value.postcode == '') return "Address first lines AND Postcode required";
},
display : function(value) {
if (!value) {
$(this).empty();
return;
}
console.log(value.country);
var html = $('<div>').html( value.address + '<br />' + value.city + '<br />' + value.region + '<br />' + value.postcode + '<br />' + value.country );
$(this).html(html);
}
});
My custom x-editable class is the same as the SO example mentioned with the only difference being i have more inputs -they work ok as expected. I would have thought that this snippet from the x-edit class gets the text of the selected item:
value2html: function(value, element) {
if(!value) {
$(element).empty();
return;
}
var countryText = value.country;
$.each(this.sourceCountryData, function (i, v) {
if (v.value == countryText) {
countryText = v.text.toUpperCase();
}
});
var html = $('<div>').html( value.address + ',<br />' + value.city + ',<br />' + value.region + ',<br />' + value.postcode + ',<br />' + countryText );
$(element).html(html);
},
But upn displaying the selected country i still get the country value "eng" and not the text "England".
I've tried :
value.country which gives me the value 'eng'
and value.text gives undefined
Any idea how i can get the selected text??
thanks

Try the sourceCountry as follow:
sourceCountry: [
{ "eng": "ENGLAND" },
{ "ire": "IRELAND" },
{ "sco": "SCOTLAND" },
{ "cym": "WALES" }
],

Related

Need Some help to refactor or optimize the code in javascript object

I have tried writing the array of objects using ternary but still I am thinking to refactor the common properties between them if someone could help me with this would be helpful.
const{address } = A
data: conditionalValue ? [
{ text: text },
{ building: address },
{ ' ': pincode }
]:
[
{ text: text },
{ building: address },
{ ' ': pincode },
{ 'somevalue': someValue1 },
{ ' ': otherValue},
],
still the { text: text },{ building: address },{ ' ': pincode } objects are same between 2 condition
You can use some destructuring on a array of additional values:
const conditionalValue = false;
const data = [
{ text: 'text' },
{ building: 'address' },
{ ' ': 'pincode' },
...(
conditionalValue
? [{ 'somevalue': 'someValue1' },{ ' ': 'otherValue'}]
: []
)
];
console.log(data);
However, I think it might be cleaner to just push your other values into the data array.

FileSaver.js is saving .ics as .txt on iPhones

I'm trying to save a blob as name.ics, but for some reason on iPhone they all get saved as name.ics.txt
This is the code
// Creating event template for ICS file
const event = {
start: startAt,
end: endAt,
title: !location ? "Appointment " + appointment.appointmentType + " " + appointment.sessionName : "Appointment",
description: "Your Practitionier: " + appointment.practitionerName,
location: !location ? appointment.locationName + ", " + addressString + ", " + postalCode : location,
status: "CONFIRMED",
alarms: [
{
action: "display",
description: "Appointment",
trigger: { hours: reminder.hours, minutes: reminder.minutes, before: true },
},
],
};
// Event handlers
const handleSave = () => {
createEvent(event, (error, value) => {
const blob = new Blob([value], { type: "text/plain;charset=utf-8" });
saveAs(blob, "event-schedule.ics");
});
};

Sequelize multi table association query with ORs

I have to find a field in different tables, that is, I have to check if the search is in different fields of the Customer table, in different fields of the Shops table, and in different fields of the ContactPerson table
The Customer and Persons and Customer Shops tables are 1-N and are associated
My "search" variable is what I wanna find.
This is my code
CustomerPersonsRelation()
CustomerShop()
var result = await CustomerModel.findAll({
...params,
include: [
{model : ShopModel},
{model: ContactPersonModel}
]
})
All is imported don't worry about that.
My Params are these:
{
where: {
$or: [
{
'$Customer.customer_name$': { $like: '%' + search + '%' },
},
{
'$Customer.customer_fiscal_name$': { $like: '%' + search + '%' },
},
{
'$Customer.customer_responsable_name$': { $like: '%' + search + '%' },
},
{
'$Customer.customer_responsable_phone$': { $like: '%' + search + '%' },
},
{
'$Customer.customer_web$': { $like: '%' + search + '%' },
},
{
'$Shops.shop_name$': { $like: '%' + search + '%' },
},
{
'$Shops.shop_phone$': { $like: '%' + search + '%' },
},
{
'$Shops.shop_mobile$': { $like: '%' + search + '%' },
},
{
'$ContactPersons.contactp_name$': { $like: '%' + search + '%' },
},
{
'$ContactPersons.contactp_phone$': { $like: '%' + search + '%' },
},
{
'$ContactPersons.contactp_mobile$': { $like: '%' + search + '%' },
}
]
},
limit: 3
})
}
But that returns this error:
Error : SequelizeDatabaseError: The multi-part identifier "ContactPersons.contactp_mobile" could not be bound. (And this error for all related fields.)
What I can do for that works?
Solved!
After a lot of tests i discovered the error was not in relation and was not in the OR, was in the LIMIT.
After search i solved this adding duplicating: false in includes.
The final code is this:
var result = await CustomerModel.findAll({
include: [
{model : ShopModel, require: true, duplicating: false},
{model: ContactPersonModel, require: true, duplicating: false}
],
...params,
raw
})

jQuery getJSON parsing an array of dicts and flling a table

I have the following jQuery code in my page:
$('#submit').click(function() {
var $table = $('#search_body');
$.getJSON("/search_issues/" + $("#folders").val(), function(data) {
$.each(data, function(index, dict) {
alert ('each index ' + index);
$.each(obj, function(key, value){
alert('each key ' + key + ':' + value);
$table.innerHTML="<tr><td>" + key + ':' + value + "</td></tr>";
});
});
});
});
In the HTML markup, I have a table defined and the body of the table is defined as
<tbody id="search_body">
</tbody>
I put the two alert statements in the code, and it turns out, the first alert only pops up once, telling me index is 0.
If however, I point my browser to the url that is generated for the call to getJSON, I get an array of 9 objects.
This leads me to believe that my syntax in the inner (or possibly the outer) loop is incorrect. So, I went to an online lint form, and it said that I had no syntax errors, so it looks like a logic error.
BTW, $('#folders') does have a valid value (it's a dropdown and it has been selected)
Thanks
The objects returned when I point my browser is this:
[
{
planning: 0,
id: "0e1a9dba-8bfe-4316-8923-b76f76da3171",
rank: 0,
title: "Test Issue 4"
},
{
planning: 0,
id: "16ef48ab-1257-4fe4-a4ea-bb2a4b2757f6",
rank: 0,
title: "Test Issue 3"
},
{
planning: 0,
id: "4086f816-57dd-49e7-91a4-ef2ac9573555",
rank: 0,
title: "Test Issue 1"
},
{
planning: 0,
id: "45c598f0-fd6a-48d6-9822-1ca8b0a5af4b",
rank: 0,
title: "Test Issue 2"
},
{
planning: 0,
id: "50a62544-3350-4c78-a9eb-9d79a37846ea",
rank: 0,
title: "Test Issue 4"
},
{
planning: 0,
id: "ae7fa839-1161-4d54-92da-662e6aa35936",
rank: 0,
title: "Test Issue 6"
},
{
planning: 0,
id: "c4016338-a766-46ba-a651-3879a844f141",
rank: 0,
title: "Test creating an issue"
},
{
planning: 0,
id: "d9f38b4f-d4ef-4abf-ab30-d511c0082df1",
rank: 0,
title: "Test Issue 5"
}
]
I am changing your code a little bit assuming that this is the desired output:
$('#submit').click(function() {
var $table = $('#search_body');
$.getJSON("/search_issues/" + $("#folders").val(), function(data) {
$.each(data, function(index, dict) {
var $tr = $("<tr></tr>").appendTo($table);
$.each(dict, function(key, value){
$tr.append("<td>" + key + ': ' + value + "</td>");
});
});
});
});
obj does not appear defined ? Try substituting
$.each(dict, function(key, value){
for
$.each(obj, function(key, value){
Also substituting
$table[0].innerHTML += "<tr><td>" + key + ':' + value + "</td></tr>";
for
$table.innerHTML="<tr><td>" + key + ':' + value + "</td></tr>";
to concatenate innerHTML of $table; $table[0] being DOM element having property .innerHTML ; $table being jQuery object not having method .innerHTML
var data = [
{
planning: 0,
id: "0e1a9dba-8bfe-4316-8923-b76f76da3171",
rank: 0,
title: "Test Issue 4"
},
{
planning: 0,
id: "16ef48ab-1257-4fe4-a4ea-bb2a4b2757f6",
rank: 0,
title: "Test Issue 3"
},
{
planning: 0,
id: "4086f816-57dd-49e7-91a4-ef2ac9573555",
rank: 0,
title: "Test Issue 1"
},
{
planning: 0,
id: "45c598f0-fd6a-48d6-9822-1ca8b0a5af4b",
rank: 0,
title: "Test Issue 2"
},
{
planning: 0,
id: "50a62544-3350-4c78-a9eb-9d79a37846ea",
rank: 0,
title: "Test Issue 4"
},
{
planning: 0,
id: "ae7fa839-1161-4d54-92da-662e6aa35936",
rank: 0,
title: "Test Issue 6"
},
{
planning: 0,
id: "c4016338-a766-46ba-a651-3879a844f141",
rank: 0,
title: "Test creating an issue"
},
{
planning: 0,
id: "d9f38b4f-d4ef-4abf-ab30-d511c0082df1",
rank: 0,
title: "Test Issue 5"
}
];
var $table = $('#search_body');
// $.getJSON("/search_issues/" + $("#folders").val(), function(data) {
$.each(data, function(index, dict) {
alert ('each index ' + index);
$.each(dict, function(key, value){
alert('each key ' + key + ':' + value);
$table[0].innerHTML += "<tr><td>" + key + ':' + value + "</td></tr>";
});
});
// });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody id="search_body">
</tbody>
</table>

JSON jQuery no errors how to investigate

I don't see any error from console window, either I don't see that my code acted. How do I investigate and make my script fired correctly? Thanks
var mylist = [
{ title: 'a' },
{ title: 'b' },
{ title: 'c' },
{ title: 'd' },
{ title: 'e' },
{ title: 'f' },
{ title: 'g' },
{ title: 'h' },
{ title: 'i' },
{ title: 'j' },
{ title: 'k' },
{ title: 'l' },
{ title: 'm' },
{ title: 'n' },
{ title: 'o' },
{ title: 'p' },
{ title: 'q' }
];
$.getJSON(mylist, function( data ) {
var items = [];
console.log(items);
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-list",
html: items.join( "" )
}).appendTo( "body" );
});
You have a misunderstanding of what $.getJSON does. As you can read the in the documentation, the first argument must be a URL. $.getJSON then performs an Ajax request to the URL and parses the response as JSON.
You don't pass a URL and you don't even have JSON. All you have to do is iterate over the array:
var items = [];
$.each( mylist, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-list",
html: items.join( "" )
}).appendTo( "body" );
DEMO
I don't know which output you want, but that should give you a start. Read the $.each documentation, and learn about how to access objects.

Categories

Resources