I am trying to use the YUI datatable to display data from a JSON object which looks like this:
{"results":[{"label":"Column 1","notes":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. "},{"label":"Column 2","notes":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"label":"Column 3","notes":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. "},{"label":"Column 4","notes":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"label":"Column 5","notes":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"label":"Column 6","notes":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. "}]}
I can do this fine with the standard implementation. However, the column names (labels in above object) are dynamic so I will not know them until the data reaches the page. I therefore want to define the column definitions from the datasource which I am doing in doBeforeParseData().
From reading / IRC, it has been suggested that I should be able to add columns to the data table. I want the table to look like this:
Column 1 Column 2.......
note note.....
so the above data should produce one row of data. Here's what I have so far:
function loadTable() {
YAHOO.example.Basic = function() {
var myColumnDefs = [];
var myDataSource = new YAHOO.util.DataSource("/index/testajax");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.doBeforeParseData = function (oRequest, oFullResponse, oCallback) {
// alert(oFullResponse);
var colDefs = [];
var len = oFullResponse.results.length;
for (var i = 0; i < len; i++) {
var obj = {
key: oFullResponse.results[i].label,
sortable: true,
resizeable: true
};
myColumnDefs.push(obj);
}
console.log(myColumnDefs);
return oFullResponse;
};
myDataSource.responseSchema = {
resultsList:"results",
fields: ["label","notes"]
};
var myDataTable = new YAHOO.widget.DataTable("json",
myColumnDefs, myDataSource, {caption:"DataTable Caption"});
return {
oDS: myDataSource,
oDT: myDataTable
};
}();
}
Would be grateful for on any input on HOW to do this rather than why I shouldn't ;-)
thanks,
codecowboy
I spent a bit of my lunch hour on this, but I got something working for you. I looked at your JSON and the way you did it would not work in the data table. results is a list, every entry is a row, and every attribute is a column. Here is the json that I came up with that I hope works for you.
{
"resultSet":{
"columnList":[
{"key":"Column1","label":"My Col 1"},
{"key":"Column2","label":"My Col 2"},
{"key":"Column3","label":"My Col 3"}
],
"results":[
{
"Column1":"Row 1 value",
"Column2":"Row 1 value",
"Column3":"Row 1 value"
},
{
"Column1":"Row 2 value",
"Column2":"Row 2 value",
"Column3":"Row 2 value"
}
]
}
}
I made a small javascript object for handling what you need to do. What needs to be done is you need to make an ajax call to the server for the data. This is so you can define the columns in the datasource before you MAKE the datasource.
function DataProvider(url){
this.url = url;
}
DataProvider.prototype = {
url:null,
data:null,
ds:null,
getData:function() {return this.data},
initialize:function(){
YAHOO.util.Connect.asyncRequest('GET', this.url, this);
},
success:function(response){
var responseVal = YAHOO.lang.JSON.parse(response.responseText);
var columnList = responseVal.resultSet.columnList;
this.data = responseVal.resultSet.results;
this.ds = new YAHOO.util.FunctionDataSource(function(){return this.dataProvider.getData()});
this.ds.responseSchema = {
resultsList:"resultSet.results",
fields:columnList
}
this.ds.dataProvider = this;
/* make call to initialize your table using the data set */
var myDataTable = new YAHOO.widget.DataTable("basic", columnList, this.ds, {caption:"DataTable Caption"});
//console.debug(columnList);
//console.debug(this.data);
}
}
So when the page loads do the following
function init(){
var dataProvider = new DataProvider('testjson.json');
dataProvider.initialize();
}
And your html should look like this
<body onload="init()" class="yui-skin-sam">
<div id="basic"></div>
</body>
And you should have the following scripts included
<!-- css -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css">
<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/json/json-min.js"></script>
That should work, works for me in both IE and firefox.
Related
Using Gatsbyjs and GrapghQL queries don't work on the site. They work in the testing environment.
import React from "react";
import { Link, graphql, useStaticQuery } from "gatsby";
import Img from "gatsby-image";
import PropTypes from "prop-types";
// Components
import Layout from "../components/layout";
// CSS
import "../css/index.css";
// Page
const Index = () => {
return (
<Layout>
{/* Hero */}
<section id="hero">
<div className="hero-title container">
<h1>Web design and development</h1>
<h2>Costume Solutions for companies and individuals</h2>
</div>
</section>
{/* Services */}
<section id="services">
<div className="title">
<h2>Our Services</h2>
<h3>We Provide You Quality</h3>
</div>
<div className="services container">
<div className="service web-design">
<h2>Web Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div className="service social-media">
<h2>Social Media</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div className="service video-production">
<h2>Video Production</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</section>
{/* portfolio */}
<section id="Portfolio">
<div className="title">
<h2>Portfolio</h2>
<h3>Some Of Our Awesome Projects</h3>
</div>
<div className="portfolio container"></div>
</section>
</Layout>
);
};
// Index.propTypes = {
// data: PropTypes.object.isrequired,
// };
export const query = graphql`
{
protfolioImages: allFile(
filter: { relativeDirectory: { eq: "portfolio" } }
) {
nodes {
id
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
`;
export default Index;
ERROR:
Multiple "root" queries found in file: "cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410" and "cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410".
Only the first ("cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410") will be registered.
Instead of:
1 | query cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410 {
2 | bar {
3 | #...
4 | }
5 | }
6 |
7 | query cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410 {
8 | foo {
9 | #...
10 | }
11 | }
Do:
1 | query cUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410AndCUsersAndreDocumentsProgramingjarboeStudiossrcpagesindexJsx2863101410 {
2 | bar {
3 | #...
4 | }
5 | foo {
6 | #...
7 | }
8 | }
Looking into this it seems like other users have experienced this problem and have come up with two possible causes and solutions.
It may be related to your CMD. Apparently running Gatsby Build from Windows terminal produces the 'Multiple root queries' error, while running the same command with git bash compiles successfully.
Or Having multiple graphql queries on the same page, in this case separating the queries into their own files and importing them back again fixes the problem.
Have been searching for a while. I am using Gatsby and I have no errors in the console or terminal but values are undefined. Could it be because of the second "data" under "articles"?
GraphiQL Query:
Query/Component Code:
import React, { Component } from 'react'
import { graphql } from 'gatsby'
// This query is executed at build time by Gatsby.
export const GatsbyQuery = graphql`
{
umdHub {
articles {
data {
title
}
}
}
}
`
class ClientFetchingExample extends Component {
render() {
const {
umdHub: { articles },
} = this.props.data
console.log(articles.title)
return (
<div style={{ textAlign: 'center', width: '600px', margin: '50px auto' }}>
<h1>{articles.title} - Is the title of the article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
)
}
}
export default ClientFetchingExample
You already halfway there just small changes
const {
umdHub: { articles },
} = this.props.data
Now you have this articles object like this
articles: {
data: [
{
title: 'Learning to Listen'
},
{
title: 'Second Title'
}
...
]
}
Now you need to loop over data
import _ from 'lodash'
const data = _.get(articles, 'data', [])
_.map(data, title => {
console.log({ title })
})
If you want to only first title then
const title = _.get(articles, 'data[0].title', 'default value or blank string')
Here lodash is A modern JavaScript utility library delivering modularity, performance & extras.
I'm trying to filter categories when links.items contains a specific string.
const links = [
{
id: 1,
category: 'Category 1',
items: [
{
id: 1,
name: 'Link1',
url: 'https://#',
info: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
id: 2,
name: 'Link2',
url: 'https://#',
info: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
}
]
},
{
id: 2,
category: 'Category2',
items: [{
id: 1,
name: 'Link1',
url: 'https://#',
info: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
}]
},
{
id: 3,
category: 'Category3',
items: [{
id: 1,
name: 'Link1',
url: 'https://#',
info: ''
}]
}
]
Vue.component('link-component', {
template: `
<div>
<h4>Links</h4>
<!-- Search -->
<input type="text" v-model="search" append-icon="search" placeholder="Search"></input>
<!-- Level 1 -->
<div v-for="value in filteredLinks" :key="value.id">
<pre>{{ value.category }}</pre>
</div>
<!-- Level 2 -->
<div class="card-content" v-for="item in value.items" :key="item.id">
<p>
<a :href="item.url" target="_blank">{{ item.name }}</a>
</p>
<p> {{ item.info }} </p>
</div>
</div>
`,
data: {
links,
search: ''
},
computed: {
filteredLinks () {
return this.links.filter(links => {
return links.items.toLowerCase().includes(this.search.toLowerCase())
})
}
}
});
new Vue({
el: '#app'
});
I think this is really simple but I don't get it running... Can someone help? Thanks!
I import the links from a json file and figured out to filter them like this:
filteredLinks () {
return this.links.filter((link) => {
return link.items.some((item) => {
return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
})
})
}
I want to run an if statement over each of my posted requests and if any are a collection do something different.
When I die dump $request->all I have an array that looks like this;
"_token" => "MMRFBAgyThsIHzITzT26Qwdp4L6HDV0JTPGs6h"
"page_name" => "Travel"
"heading" => "Travel Europe"
"textarea" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru ▶"
"seo_title" => "travel"
"seo_description" => "travel"
"attribute_1" => "Food"
"attribute_2" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
"attribute_3" => "Hotels"
"attribute_6" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
"attribute_5" => "Events"
"attribute_4" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
"attribute_7" => null
"attribute_8" => null
"attribute_9" => UploadedFile {#233 ▶}
The data will be different so I can't write anything static e.g.$request->input('attribute_9')
This is how I'm currently handling the attributes which are the unknown requests.
$input = $request->all();
foreach($input as $key=>$value) {
if(strstr($key,'attribute_')) {
$i = str_replace("attribute_", "", $key);
if (!empty($value)) {
if ($value instanceof Illuminate\Http\UploadedFile) {
dd('lets have a collection...');
}
Attribute::where('id', $i)->update(['value' => $value]);
} else{
Attribute::where('id', $i)->update(['value' => '']);
}
}
}
You can see I've tried to check the $value using instanceOf but that hasn't worked. The if statement is never true and the page just returns.
Example of attribute input submission -
#if($comp_attr['data_type'] == 'file')
<div class="form-grp img-form" style="width: {{ $comp_attr['width'] }}%;">
<label>Banner Image</label>
<span class="img-hold">
{{ $banner }}
</span>
<input type="{{ $comp_attr['field_type'] }}" name="attribute_{{ $comp_attr['id'] }}" />
</div>
#else
<div class="form-grp" style="width: {{ $comp_attr['width'] }}%;">
<label>{{ $comp_attr['label'] }}</label>
<input type="{{ $comp_attr['field_type'] }}" name="attribute_{{ $comp_attr['id'] }}" value="{{ $comp_attr['value'] }}" />
</div>
#endif
I believe you are trying to get the $_FILES
So you can get all the files using
$request->allFiles();
This will return you all the files in the request. then you can perform any action on it.
Hope this helps
Instead of
name="attribute_{{ $comp_attr['id'] }}"
Try
name="attributes[{{ $comp_attr['id'] }}]"
Notice the new 's' ^ , and the brackets on either side of the {{ }}
By using brackets we convert it to an associative array, keyed by the blade variable.
Then on the php side you can do something like this:
foreach($request->get('attributes') as $i => $value)
{
...
}
I'm new to jquery and I need to integrate a bit of code and I'm calling it from an external html file with the .load() function. That part of code it's a .div containing a video and a description. All I need to do is to make fitVids work on the code loaded from the external file.
This is the html loaded in the div.featured-container:
<div class="featured-container">
<div class="container player clearfix">
<div class="span8 video-container">
<iframe width="600" height="338" src="http://www.youtube.com/embed/QkhqI49QeaM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="span4 featured-content">
<div class="feat-meta">May 8, 2010 at 16:50 / by Silviu Stefu</div>
<h2>Retiner - Mobile UI Kit</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
</p>
<a class="button-normal" href="">Read More...</a>
</div>
</div>
</div>
And here is the JS:
//load the first list item link
var firstLoad = $('.thumbnails li:nth-child(2) a').attr('href')+' .player';
$('.featured-container').load(firstLoad,'',showTheContent());
function showTheContent() {
$('.player').fitVids().fadeIn('slow');
}
//load the links on click
$('.thumbnails li a').click(function(){
var toLoad = $(this).attr('href')+' .player';
$('.player').fadeOut('slow',loadContent);
$('#load').remove();
$('#load').fadeIn('normal');
function loadContent() {
$('.featured-container').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('.player').fadeIn('slow',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
So, where I should put the .fitVids() function to make the fideo fluid?
I would use the success function for this, so that if its loaded run the code.
$("#success").load("file.html", function(response, status, xhr) {
if (status == "succes") {
// your code
}
});