Use Custom Image for PrimeReact Data Tree Icon - reactjs
I'm using the Data Tree component from PrimeReact, docs linked below. The tree component takes in an object with fields defined as such
const data = [
{
"key": "0",
"label": "Documents",
"data": "Documents Folder",
"icon": "pi pi-fw pi-inbox",
"children": [{
"key": "0-0",
"label": "Work",
"data": "Work Folder",
"icon": "pi pi-fw pi-cog",
"children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
},
{
"key": "0-1",
"label": "Home",
"data": "Home Folder",
"icon": "pi pi-fw pi-home",
"children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
}]
}
]
called as such
<Tree value={data} />
The icon attribute determines the symbol rendered next to the label tag. I want to use my own .png in place of the icons available. I would initially try to add an img tag but this does not seem to work. If anymore information is needed please let me know.
https://www.primefaces.org/primereact/#/tree
try using css. In your css file:
youricon{
background-image: url('local-url');
}
So it goes like this:
const data = [
{
"key": "0",
"label": "Documents",
"data": "Documents Folder",
"icon": "youricon",
"children": [{
"key": "0-0",
"label": "Work",
"data": "Work Folder",
"icon": "youricon",
"children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
},
{
"key": "0-1",
"label": "Home",
"data": "Home Folder",
"icon": "youricon",
"children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
}]
}
]
On a related note, try using icons which are easily available like FontAwesome, FeatherIcons, Octicons. If you are using primereact, It's updated version has its own icons primeicons.
You need to install it first using: npm install primeicons --save .
You can get more details here: https://www.primefaces.org/primereact/#/icons
Related
What are all the contents I can add to a Discord webhook?
I am making a discord webhook, and I want to know all the different things I can add to it.
As far as styling it goes; I only have a color and a message. (My code is not included besides that, just the code for the color and the message)
.setTitle('Biscuit AIO Cooked!')
.setColor('#84e1f4');
If anyone can link me a site or reply to me with all of the things I can add to the webhook, please do so :)
Read about message embeds and embed visualizer.
At last one of the features of a webhook is that you can send several embeds at once message. So code will looks like this.
{
"content": "this `supports` __a__ **subset** *of* ~~markdown~~ 😃 ```js\nfunction foo(bar) {\n console.log(bar);\n}\n\nfoo(1);```",
"embeds": [
{
"title": "title ~~(did you know you can have markdown here too?)~~",
"description": "this supports [named links](https://discordapp.com) on top of the previously shown subset of markdown. ```\nyes, even code blocks```",
"url": "https://discordapp.com",
"color": 11038012,
"timestamp": "2020-07-03T15:05:41.392Z",
"footer": {
"icon_url": "https://cdn.discordapp.com/embed/avatars/0.png",
"text": "footer text"
},
"thumbnail": {
"url": "https://cdn.discordapp.com/embed/avatars/0.png"
},
"image": {
"url": "https://cdn.discordapp.com/embed/avatars/0.png"
},
"author": {
"name": "author name",
"url": "https://discordapp.com",
"icon_url": "https://cdn.discordapp.com/embed/avatars/0.png"
},
"fields": [
{
"name": "🤔",
"value": "some of these properties have certain limits..."
},
{
"name": "😱",
"value": "try exceeding some of them!"
},
{
"name": "🙄",
"value": "an informative error should show up, and this view will remain as-is until all issues are fixed"
},
{
"name": "<:thonkang:219069250692841473>",
"value": "these last two",
"inline": true
},
{
"name": "<:thonkang:219069250692841473>",
"value": "are inline fields",
"inline": true
}
]
},
{
"title": "title ~~(did you know you can have markdown here too?)~~",
"description": "this supports [named links](https://discordapp.com) on top of the previously shown subset of markdown. ```\nyes, even code blocks```",
"url": "https://discordapp.com",
"color": 11038012,
"timestamp": "2020-07-03T15:05:41.392Z",
"footer": {
"icon_url": "https://cdn.discordapp.com/embed/avatars/0.png",
"text": "footer text"
},
"thumbnail": {
"url": "https://cdn.discordapp.com/embed/avatars/0.png"
},
"image": {
"url": "https://cdn.discordapp.com/embed/avatars/0.png"
},
"author": {
"name": "author name",
"url": "https://discordapp.com",
"icon_url": "https://cdn.discordapp.com/embed/avatars/0.png"
},
"fields": [
{
"name": "🤔",
"value": "some of these properties have certain limits..."
},
{
"name": "😱",
"value": "try exceeding some of them!"
},
{
"name": "🙄",
"value": "an informative error should show up, and this view will remain as-is until all issues are fixed"
},
{
"name": "<:thonkang:219069250692841473>",
"value": "these last two",
"inline": true
},
{
"name": "<:thonkang:219069250692841473>",
"value": "are inline fields",
"inline": true
}
]
}
]
}
An error occurred while requesting the visualisation's config resource
I got an error "An error occurred while requesting the visualisation's config resource" while trying to request my custom visualisation. All files have been made public.
manifest.json
{
"name": "Custom Vis",
"description": "By Sorrow",
"devMode": true,
"components": [{
"id": "Custom Vis",
"name": "Custom Vis",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
"description": "Custom Vis",
"resource": {
"js": "custom-vis/final.js",
"config": "custom-vis/config.json",
"css": "custom-vis/style.css"
}
}]
}
config.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "barDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "barMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "color",
"label": "Colors",
"elements": [
{
"type": "FONT_COLOR",
"id": "barColor",
"label": "Bar Color",
"defaultValue": "black"
}
]
}
]
}
Can someone tell me why it doesn't work?
You need to create a folder on the Google Cloud where your files will go:
Then add it like here:
"resource": {
"js": "gs://yourname/index.js",
"config": "gs://yourname/index.json",
"css": "gs://yourname/index.css"
}
PS: watch a video here https://developers.google.com/datastudio/visualization/local-dev
That will save you a lot of time on development.
I stumbled upon the same issue.
Resources were provided in the default tutorial in a form of
"resource": {
"js": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
"config": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
"css": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
}
What was not clear is that they actually need to include gs:// in the path. Would be clearer if they explicitly mentioned it like so:
"resource": {
"js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
"config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
"css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
}
It must work this way.
How to update the specific element in JSON data with setState in React
I am working in React with TypeScript. I am using the below JSON format to build the tree structure to display the content as folder. I stored the below JSON data in state object as treeViewData.
{
"path": "Parent Site",
"name": "Parent Site",
"type": "directory",
"isRoot": true,
"children": [
{
"path": "Parent Site/Sub Site 1",
"name": "Sub Site 1",
"type": "directory",
"children": [
{
"path": "Parent Site/Sub Site 1/Documents",
"name": "Documents",
"type": "directory",
"children": []
},
{
"path": "Parent Site/Sub Site 1/My Documents",
"name": "Documents",
"type": "directory",
"children": [
{
"path": "Parent Site/Sub Site 1/My Documents/Folder1",
"name": "Folder1",
"type": "directory”,
"children": []
},
{
"path": "Parent Site/Sub Site 1/My Documents/Folder2",
"name": "Folder2",
"type": "directory”,
"children": []
}
]
},
{
"path": "Parent Site/Sub Site 1/My New Documents",
"name": "Documents",
"type": "directory",
"children": []
}
]
},
{
"path": "Parent Site/Sub Site 2",
"name": "Sub Site 2",
"type": "directory",
"children": [
{
"path": "Parent Site/Sub Site 2/Documents",
"name": "Documents",
"type": "directory",
"children": [
{
"path": "Parent Site/Sub Site 2/Documents/Folder1",
"name": "Folder1",
"type": "directory”,
"children": []
},
{
"path": "Parent Site/Sub Site 2/Documents/Folder2",
"name": "Folder2",
"type": "directory”,
"children": []
},
{
"path": "Parent Site/Sub Site 2/Documents/Folder3",
"name": "Folder3",
"type": "directory",
"children": []
}
]
}
]
}
]
}
From the above JSON data, I want to insert new set of properties in the Children object. Let us consider the below child which is resided in the Parent Site/Sub Site 2.
"path": "Parent Site/Sub Site 2/Documents/Folder1",
In this current node, Children array is empty. I want to insert new set of four properties to be added like below.
"path": "Parent Site/Sub Site 2/Documents/Folder1/Inside New Folder",
"name": "Inside New Folder",
"type": "directory”,
"children":[]
How to do this in React? How to perform the setState operation of this scenario? Please help me.
Thanks
Philip
Sorting arrays in Mongo
H have json document with array. As I can't add to beginning of array with push or addtoset I need to sort array. Example
{
"Component": [
{
"Id": "PDP-1",
"Links": {"Link": [
{
"Text": "Western Division",
"Url": "/1x7-en70ai/last-minute-holidays-western-division",
"Title": "Last minute holidays Western Division"
},
{
"Text": "Browse Regions ",
"Url": "/1x7-en6uly-10ts/last-minute-holidays-gambia/regions",
"Title": "Last minute holidays Gambia",
"Style": "BrowseForMore"
},
{
"Text": "City of Banjul",
"Url": "/1x6-en6vq7/holidays-city-of-banjul",
"Title": "City of Banjul Holidays"
},
{
"Text": "Western Division",
"Url": "/1x6-en70ai/holidays-western-division",
"Title": "Western Division Holidays"
}
]},
"Title": "Regions",
"Type": "PDP"
},
{
"Id": "PDP-2",
"Links": {"Link": [
{
"Text": "Bijilo",
"Url": "/1x7-enbmy6/last-minute-holidays-bijilo",
"Title": "Last minute holidays Bijilo"
},
{
"Text": "Browse Cities ",
"Url": "/1x7-en6uly-10tt/last-minute-holidays-gambia/cities",
"Title": "Last minute holidays Gambia",
"Style": "BrowseForMore"
},
{
"Text": "Banjul Beach",
"Url": "/1x6-enakgm/holidays-banjul-beach",
"Title": "Banjul Beach Holidays"
},
{
"Text": "Bijilo",
"Url": "/1x6-enbmy6/holidays-bijilo",
"Title": "Bijilo Holidays"
},
{
"Text": "Brufut Heights",
"Url": "/1x6-encok8/holidays-brufut-heights",
"Title": "Brufut Heights Holidays"
},
{
"Text": "Kololi",
"Url": "/1x6-enpnle/holidays-kololi",
"Title": "Kololi Holidays"
},
{
"Text": "Kotu",
"Url": "/1x6-enq067/holidays-kotu",
"Title": "Kotu Holidays"
}
]},
"Title": "Cities",
"Type": "PDP"
}
],
"Id": "118431",
"Template": {
"PageTemplate": {
"Code": "2B2",
"text": "041 - TEMP2 - COP_CONCOU_{LAST MINUTE}"
},
"Category": {
"Code": "1X7",
"Type": "Product",
"text": "Last minute holidays"
},
"GeoObject": {
"Code": "EN6ULY",
"text": "Gambia, The"
},
"GeoObjectType": {
"Code": "1A",
"text": "Political"
},
"GeoObjectSubType": {
"Code": "10TR",
"text": "Country"
}
},
"Type": "Content",
"Url": "/1x7-en6uly/last-minute-holidays-gambia",
"_id": {"$oid": "528492d4c90fa9fcd0436929"}
}
I want to sort this by Style in Links.Link 'BrowseForMore'. Any idea how to do it? I thought I could add dummy array with push which could then sort it the way I want. Any help appreciated
You appear to want to update the array and keep the sort order with your Links.Link.Style value at the front of the list. In which case use the $sort modifier with update.
db.collection.update(
{ _id: id },
{ $push: { "Links.Link: {$each: [doc], $sort { Style: -1 }}} }
)
The $each operator is required even if there is only one document, but can take many.
if you are trying to use $addToSet to maintain unique documents the official MongoDB line is that sets are considered to be unordered and hence the modifiers are not available here.
what is wrong with this json array code facebook form
The error i am getting is this : Can't parse fields attribute. Is it a JSON array or CSV list?
The problem is in the select menu which is being included in the form. what i want to achieve is a select box as shown here on this link : Registration plugin
But somehow the problem is that the select box is not being displayed!
<iframe src='http://www.facebook.com/plugins/registration.php?
client_id=325340244194060&
redirect_uri=http://www.pingcampus.com/facebook_registration_plugin/store_user_data.php&
fields=[
{"name":"name"},
{"name":"email"},
{"name":"gender"},
{"name":"birthday"},
{'name':'captain', 'description':'Best Captain', 'type':'select', 'options':{'P':'Jean-Luc Picard','K':'James T. Kirk'}}
{'name':'captain', 'description':'College','type':'select','options':
{'P':'Jean-Luc Picard','K':'James T. Kirk',
'1':'Acropolis','2':'Astral','3':'Aurobindo','4':'BM','5':'Central','6':'Chameli','7':'IET (DAVV)','8':'IIST
','9':'IIST2
','10':'IPS
','11':'JDCT
','12':'KCB
','13':'LKCT
','14':'LNCT
','15':'MIT (Malwa)
','16':'Malwa (Malwa2)
','17':'Mandsaur
','18':'Mathuradevi
','19':'MITM (Medi1)
','20':'MIST (Medi2)
','21':'MGIEM
','22':'Nalin
','23':'Oriental
','24':'Patel
','25':'Prestige
','26':'Priyatam
','27':'Rishiraj
','28':'RKDF
','29':'Royal
','30':'Sanghvi
','31':'Sdbansal
','32':'SGSITS
','33':'SIMS
','34':'SKSITS
','35':'Star
','36':'SVCE
','37':'SVITS
','38':'Transnational
','39':'Truba
','40':'Venkateshwar
','41':'Vidhyasagar
','42':'Vikrant
','43':'Vindhya
','#':'--------------------------------
','#':'Commerce
','#':'--------------------------------
','44':'Acro
','45':'Apex
','46':'Arihant
','47':'BM
','48':'Chamelidevi
','49':'Chimc
','50':'Choithram
','51':'Christian
','52':'DCBS (Daly College)
','53':'IBMR
','54':'IIMR (IIST)
','55':'IIPS (DAVV)
','56':'Ilva
','57':'IMIR
','58':'Imperial
','59':'IMS (DAVV)
','60':'Islamia
','61':'JDCT
','62':'LKCT
','63':'LNCT
','64':'Maharaja
','65':'MIT (Malwa)
','66':'Mathuradevi
','67':'Matushri
','68':'MBKhalsa
','69':'Medicaps
','70':'Patel
','71':'Pioneer
','72':'Prestige
','73':'Priyatam
','74':'Renaissance
','75':'Rishiraj
','76':'Sahib
','77':'SAIMS
','78':'Sanghvi Innovative
','79':'Sapient
','80':'SGSITS
','81':'SIMS
','82':'SJDM
','83':'SKSITS
','84':'Softvision
','85':'SVCE
','86':'Rransnational
','87':'Vaishnav
','88':'Venkteshwar
','89':'Vidhyasagar
','90':'Vikrant
','#':'--------------------------------
','#':'Pharmacy
','#':'--------------------------------
','91':'Acropolis
','92':'Aurobindo
','93':'BM
','94':'Central
','95':'SOPE (DAVV)
','96':'IIP(IIST)
','97':'IPS
','98':'Oriental
','99':'Rishiraj
','100':'RKDF
','101':'Safe
','102':'SGSITS
','103':'Smriti (SCOPE)
','104':'svce
','105':'vikrant
','#':'--------------------------------
','#':'Medical
','#':'--------------------------------
','106':'Arihant
','107':'Bombay Hospital
','108':'Index
','109':'MGMMC
','110':'RD Memorial
','111':'Shubhdeep
','#':'--------------------------------
','#':'Dental
','#':'--------------------------------
','112':'Aurobindo
','113':'CDSH
','114':'GCD
','115':'Index
','116':'Modern
','#':'--------------------------------
','#':'Arts
','#':'--------------------------------
','117':'BIG Aims
','118':'Frameboxx
','119':'INIFD
','120':'MAAC
','121':'SDPS
','122':'SJMC (DAVV)
','123':'Virtual Voyage
','124':'Zica
','132':'EMRC (DAVV)
','#':'--------------------------------
','#':'Architecture
','#':'--------------------------------
','125':'IPS
','126':'SDPS
','#':'--------------------------------
','#':'Law
','#':'--------------------------------
','127':'Christian
','128':'SOL(DAVV)
','129':'IIL
','130':'Vaishnav'} },
{"name":"Arts","description":"Arts","type":"checkbox","value":"Arts"},
{"name":"Act","description":"Act","type":"checkbox","value":"Act"},
{"name":"Cooking","description":"Cooking","type":"checkbox","value":"Cooking"},
{"name":"Dance","description":"Dance","type":"checkbox","value":"Dance"},
{"name":"Designing","description":"Designing","type":"checkbox","value":"Designing"},
{"name":"Fashion","description":"Fashion Designing","type":"checkbox","value":"Fashion Designing"},
{"name":"Interior","description":"Interior Designing","type":"checkbox","value":"Interior Designing"},
{"name":"Modeling","description":"Modeling","type":"checkbox","value":"Modeling"},
{"name":"Photography","description":"Photography","type":"checkbox","value":"Photography"},
{"name":"Poetry","description":"Poetry / Writing","type":"checkbox","value":"Poetry / Writing"},
{"name":"Programming","description":"Programming","type":"checkbox","value":"Programming"},
{"name":"Reading","description":"Reading","type":"checkbox","value":"Reading"},
{"name":"Sketching","description":"Sketching / Drawing","type":"checkbox","value":"Sketching / Drawing"},
{"name":"Singing","description":"Singing","type":"checkbox","value":"Singing"},
{"name":"Sports","description":"Sports","type":"checkbox","value":"Sports"},
{"name":"Stunting","description":"Stunting","type":"checkbox","value":"Stunting"},
{"name":"Videography","description":"Checkthis","type":"checkbox","value":"Videography"},
{"name":"Other","description":"Other","type":"checkbox","value":"Other"},
{"name":"captcha"}
]'
scrolling="auto"
frameborder="no"
style="border:none"
allowTransparency="true"
width="500"
height="800"
>
</iframe>
Try to replace fields=[....] with valid JSON
[
{
"name": "name"
},
{
"name": "email"
},
{
"name": "gender"
},
{
"name": "birthday"
},
{
"name": "captain",
"description": "BestCaptain",
"type": "select",
"options": {
"P": "Jean-LucPicard",
"K": "JamesT.Kirk"
}
},
{
"name": "captain",
"description": "College",
"type": "select",
"options": {
"1": "Acropolis",
"2": "Astral",
"3": "Aurobindo",
"4": "BM",
"5": "Central",
"6": "Chameli",
"7": "IET(DAVV)",
"8": "IIST",
"9": "IIST2",
"10": "IPS",
"11": "JDCT",
"12": "KCB",
"13": "LKCT",
"14": "LNCT",
"15": "MIT(Malwa)",
"16": "Malwa(Malwa2)",
"17": "Mandsaur",
"18": "Mathuradevi",
"19": "MITM(Medi1)",
"20": "MIST(Medi2)",
"21": "MGIEM",
"22": "Nalin",
"23": "Oriental",
"24": "Patel",
"25": "Prestige",
"26": "Priyatam",
"27": "Rishiraj",
"28": "RKDF",
"29": "Royal",
"30": "Sanghvi",
"31": "Sdbansal",
"32": "SGSITS",
"33": "SIMS",
"34": "SKSITS",
"35": "Star",
"36": "SVCE",
"37": "SVITS",
"38": "Transnational",
"39": "Truba",
"40": "Venkateshwar",
"41": "Vidhyasagar",
"42": "Vikrant",
"43": "Vindhya",
"44": "Acro",
"45": "Apex",
"46": "Arihant",
"47": "BM",
"48": "Chamelidevi",
"49": "Chimc",
"50": "Choithram",
"51": "Christian",
"52": "DCBS(DalyCollege)",
"53": "IBMR",
"54": "IIMR(IIST)",
"55": "IIPS(DAVV)",
"56": "Ilva",
"57": "IMIR",
"58": "Imperial",
"59": "IMS(DAVV)",
"60": "Islamia",
"61": "JDCT",
"62": "LKCT",
"63": "LNCT",
"64": "Maharaja",
"65": "MIT(Malwa)",
"66": "Mathuradevi",
"67": "Matushri",
"68": "MBKhalsa",
"69": "Medicaps",
"70": "Patel",
"71": "Pioneer",
"72": "Prestige",
"73": "Priyatam",
"74": "Renaissance",
"75": "Rishiraj",
"76": "Sahib",
"77": "SAIMS",
"78": "SanghviInnovative",
"79": "Sapient",
"80": "SGSITS",
"81": "SIMS",
"82": "SJDM",
"83": "SKSITS",
"84": "Softvision",
"85": "SVCE",
"86": "Rransnational",
"87": "Vaishnav",
"88": "Venkteshwar",
"89": "Vidhyasagar",
"90": "Vikrant",
"91": "Acropolis",
"92": "Aurobindo",
"93": "BM",
"94": "Central",
"95": "SOPE(DAVV)",
"96": "IIP(IIST)",
"97": "IPS",
"98": "Oriental",
"99": "Rishiraj",
"100": "RKDF",
"101": "Safe",
"102": "SGSITS",
"103": "Smriti(SCOPE)",
"104": "svce",
"105": "vikrant",
"106": "Arihant",
"107": "BombayHospital",
"108": "Index",
"109": "MGMMC",
"110": "RDMemorial",
"111": "Shubhdeep",
"112": "Aurobindo",
"113": "CDSH",
"114": "GCD",
"115": "Index",
"116": "Modern",
"117": "BIGAims",
"118": "Frameboxx",
"119": "INIFD",
"120": "MAAC",
"121": "SDPS",
"122": "SJMC(DAVV)",
"123": "VirtualVoyage",
"124": "Zica",
"125": "IPS",
"126": "SDPS",
"127": "Christian",
"128": "SOL(DAVV)",
"129": "IIL",
"130": "Vaishnav",
"132": "EMRC(DAVV)",
"P": "Jean-LucPicard",
"K": "JamesT.Kirk",
"#": "--------------------------------"
}
},
{
"name": "Arts",
"description": "Arts",
"type": "checkbox",
"value": "Arts"
},
{
"name": "Act",
"description": "Act",
"type": "checkbox",
"value": "Act"
},
{
"name": "Cooking",
"description": "Cooking",
"type": "checkbox",
"value": "Cooking"
},
{
"name": "Dance",
"description": "Dance",
"type": "checkbox",
"value": "Dance"
},
{
"name": "Designing",
"description": "Designing",
"type": "checkbox",
"value": "Designing"
},
{
"name": "Fashion",
"description": "Fashion Designing",
"type": "checkbox",
"value": "Fashion Designing"
},
{
"name": "Interior",
"description": "Interior Designing",
"type": "checkbox",
"value": "Interior Designing"
},
{
"name": "Modeling",
"description": "Modeling",
"type": "checkbox",
"value": "Modeling"
},
{
"name": "Photography",
"description": "Photography",
"type": "checkbox",
"value": "Photography"
},
{
"name": "Poetry",
"description": "Poetry / Writing",
"type": "checkbox",
"value": "Poetry / Writing"
},
{
"name": "Programming",
"description": "Programming",
"type": "checkbox",
"value": "Programming"
},
{
"name": "Reading",
"description": "Reading",
"type": "checkbox",
"value": "Reading"
},
{
"name": "Sketching",
"description": "Sketching / Drawing",
"type": "checkbox",
"value": "Sketching / Drawing"
},
{
"name": "Singing",
"description": "Singing",
"type": "checkbox",
"value": "Singing"
},
{
"name": "Sports",
"description": "Sports",
"type": "checkbox",
"value": "Sports"
},
{
"name": "Stunting",
"description": "Stunting",
"type": "checkbox",
"value": "Stunting"
},
{
"name": "Videography",
"description": "Checkthis",
"type": "checkbox",
"value": "Videography"
},
{
"name": "Other",
"description": "Other",
"type": "checkbox",
"value": "Other"
},
{
"name": "captcha"
}
]
Your fields parameter for Registration social plugin contain not valid JSON object (JSON should use double quotes instead of single quotes) and you're missing , (comma) in the middle of array, after next line:
{'name':'captain', 'description':'Best Captain', 'type':'select', 'options':{'P':'Jean-Luc Picard','K':'James T. Kirk'}}
Update:
Actually even usage of just valid JSON may not work in that case due to fact that this is passed as query string arguments, so that JSON should be properly encoded to avoid problems. Also may cause some issues.
Also you have two fields named "captain" (which cause problem with registration plugin too).
Here I've created some samples (due to massive code of fields, I'm not putting them here):
Creating fields from JavaScript object and passing em to Registration plugin: http://jsfiddle.net/QwdCv/
Correctly encoded fields in URL passed directly within iframe tag src attribute: http://jsfiddle.net/QwdCv/1/