I initialize the table as follows:
<div id="ordersList"
data-role="uigrid"
data-scrollable="false"
data-checkbox="true"
data-pageable="true"
data-class="zebra"
data-bind="source: orders, events : { selectionChanged: selectionChanged }"
data-columns="[
<% if (isSeller) { %>
{ title: 'Покупатель', field: 'buyerName' },
{ title: 'GLN покупателя', field: 'buyerGln' },
<% } else { %>
{ title: 'Продавец', field: 'sellerName' },
{ title: 'GLN продавца', field: 'sellerGln' },
<% } %>
{ title: 'Номер заказа', templateId: 'col-template' },
{ title: 'Статус', field: 'status' }
<% if (!isSeller) { %>
,{ title: '', templateId: 'col2-template', width: 35 }
<% } %>
]"></div>
</div>
How to add the class to the table?
This variant does'n work - data-class="paging-fix zebra"
uh ... did you try add it by usual way?
<div id="ordersList" class="MyClass"
data-role="uigrid"
...
Here you can see that class is added.
In your case, creating a grid whith an div, you can apply an Class direcly in your selector, if you preffer or if you having problems, you can append class to the widget Wrapper (something like : Objectgrid.wrapper) after initialization
Hope this help
Related
I am trying to add google autocomple api, but it works only after page reload and sometimes doesn't works even after ``page reload , Below is the code:
<%= javascript_include_tag 'https://maps.googleapis.com/maps/api/js?key=' + Rails.application.secrets.google_api_key + '&libraries=places' %>
<div class="mui-textfield" data-turbolinks="false">
<input type="hidden" name="id" value='' id="user_id">
<%= text_field_tag :location, nil, id: 'txtPlaces', class: "form-text", placeholder: '', required: true %>
<%= hidden_field_tag :full_address, nil, id: 'full_address', class: "form-text", placeholder: '' %>
</div>
<script>
var ready = function () {
var options = {
type:['(regions)'],
componentRestrictions: {
country: ['au']
}
};
google.maps.event.addDomListener(window, 'load', function () {
var input = document.getElementById('txtPlaces');
var places = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(places, 'place_changed', function () {
$("#full_address").val($("#txtPlaces").val());
});
});
// This is some custom requirement
$('.save-address').on('click', function(e){
if($("#full_address").val() !== $("#txtPlaces").val()){
e.preventDefault();
e.stopPropagation();
$("#txtPlaces").val('');
$(this).submit();
}
});
};
<%#*$(document).ready(ready);%>
<%#*$(document).on('page:load', ready);%>
$(document).on("turbolinks:load", ready);
</script>
I have tried both above ready and page:load function as well but no luck
Other than this, below is the code to reach above page
<li><%= link_to('Active', admin_staffs_path(status: 'accepted'), data: { turbolinks: false })
My aim is to create navigation from data that I pass into htmlWebpackPlugin options, and I want to create it using for loop. Every time I try, I got errors like Cannot read property 'length' of undefined. Plus, I use ejs-compiled-loader because I need to use <%- include path/to/template %>. And I don't use express (and I would use it if only there is no other ways).
index.ejs:
<!-- index.ejs -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<%- include app/templates/header %>
</body>
</html>
header.ejs:
<!-- header.ejs -->
<div class="header">
<div class="header-inner">
<div class="header-logo"><img src="../../assets/images/logo.png" alt="Logo"></div>
<div class="nav">
<ul>
<% for (var i = 0; i < htmlWebpackPlugin.options.navItems.length; i++) { %>
<li><a href="<%= htmlWebpackPlugin.options.navItems[i].href %>">
<%= htmlWebpackPlugin.options.navItems[i].title %>
</a></li>
<% } %>
</ul>
</div>
</div>
</div>
webpack.config.js:
module.exports = {
// ...
plugins: [
new webpack.DefinePlugin({
IS_DEV: IS_DEV
}),
new HtmlWebpackPlugin({
template: '!!ejs-compiled-loader!./index.ejs',
title: appHtmlTitle
}),
// HEADER
new HtmlWebpackPlugin({
template: path.join(__dirname, 'app/templates/header.ejs'),
// template: '!!ejs-compiled-loader!./app/templates/header.ejs' tried as well
navItems: [
{
href: './',
title: 'startseite'
},
{
href: './offers.html',
title: 'angebote'
},
{
href: './about.html',
title: 'über uns'
},
{
href: './contact.html',
title: 'kontakt'
}
],
test: 'Test'
})
],
module: {
rules: [
// BABEL
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
options: {
compact: true
}
},
// STYLES
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: IS_DEV
}
},
]
},
// CSS / SASS
{
test: /\.scss/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: IS_DEV
}
},
{
loader: 'sass-loader',
options: {
sourceMap: IS_DEV,
includePaths: [dirAssets]
}
}
]
},
// IMAGES
{
test: /\.(jpe?g|png|gif)$/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
}
};
What am I doing wrong? If ejs-compiled-loader doesn't have access to passing params, what are the easy-maintaining alternatives?
P.s. This is my first question asked here, please don't judge too strict. Thanks in advance.
The following is code which the question author, Alex Naidovich, edited into their question (everything below "SOLVED" in that revision) and indicated it resolved the problem. It's copyright 2018 Alex Naidovich and is under a CC BY-SA 4.0 license.
nav.js:
module.exports = [
{
href: './',
title: 'Home'
}, {
href: './about.html',
title: 'About Us'
}, {
href: './contact.html',
title: 'Contact Us'
}
]
webpack.config.js:
const NAV = require('path/to/nav.js'); // without extension
module.exports = {
// ...
plugins: {
// ...
new HtmlWebpackPlugin({
template: '!!ejs-compiled-loader!./index.ejs',
filename: 'index.html',
title: appHtmlTitle,
NAV: NAV // <- added NAV into plugin
}),
}
// ...
};
index.ejs:
<!doctype html>
<!-- html and head tags stuff -->
<body>
<% var NAV = htmlWebpackPlugin.options.NAV %> <!-- added this -->
<%- include app/templates/header %>
</body>
</html>
header.ejs:
<div class="header">
<div class="header-inner">
<div class="nav">
<ul>
<!-- header.ejs successfully gets variable NAV from index.ejs -->
<% NAV.forEach(function(navItem) { %>
<li>
<%= navItem.title %>
</li>
<% }) %>
</ul>
</div>
</div>
</div>
That should definitely work.
I just ran into something similar, and for my project it was due to using webpack 4. I had better luck with compile-ejs-loader.
I haven't gone as far as trying to pass in an object for the templates, all I needed was ejs include support.
I use select2 to call an ajax search on my form. The form is unable to get response with my ajax, I tested at postman my Brand method, and it is able to return json, so I wonder if it is something wrong with my apllication.js or input? Previously I test with:
Sample input
<%= f.select :brand_id, Brand.all.collect {|x| [x.name, x.id]}, {include_hidden: false} %>
it is able search all data inside brand table.
products_controller.rb
def brand
#brands = Brand.select(:id, :name).where("name like :q", q: "%#{params[:q]}%")
respond_to do |format|
format.json { render json: {brands: #brands.map { |e| {id: e.id, name: e.name} }}
}
end end
input form
<%= f.hidden_field :brand_id, class: "brand-select", data: { source: dashboard_brand_path, placeholder: 'Search for a name' } %>
application.js
$( ".brand-select" ).select2({
minimumInputLength: 1,
placeholder: "Brand search",
theme: "bootstrap",
tags: [],
ajax: {
url: "/dashboard/brand",
dataType: 'json',
type: "GET",
quietMillis: 50,
id: function(obj) {
return obj.id;
},
data: function (term) {
return {
q: params.term, // search term
page: params.page
};
},
results: function (data) {
return {
results: $.map(data, function (item) {
return {
name: item.name,
id: item.id
}
})
};
}
},
});
Thank for helping
<%= f.hidden_field :brand_id, class: "brand-select", data: { source: dashboard_brand_path, placeholder: 'Search for a name' } %>
You have Used hidden_field. I guess you should use
<%= f.select :brand_id, Brand.all.collect {|x| [x.name, x.id]}, {include_hidden: false}, class: 'brand-select', placeholder: 'Search for a name' %>
Need a code example of repaint() method for dxList widget in Phonejs
NB: I want to call repaint() after a user action such as click.
Use the "repaint" method in the following manner:
<!--TRIGGER-->
<div data-bind="dxButton: { text: 'repaint dxList', clickAction: onClick }"></div>
<!--TARGET LIST-->
<div id="targetList" data-bind="dxList: { width: 100, dataSource: [{ key: 1, title: 'element_1'}, { key: 2, title: 'element_2' }, { key: 3, title: 'element_3' }] }">
<div data-bind="dxAction: '#itemDetailsViewName/{key}'" data-options="dxTemplate : { name: 'item' } ">
<div data-bind="text: title"></div>
</div>
</div>
onClick: function () {
var list = $("#targetList").dxList("instance");
list.option('width', 200);
list.repaint();
}
I've been beating my head against the wall on this one for a while.
I've done a ton of google searches and I think that I've set it up correctly, but it doesn't work.
I have an enhancedGrid on top and a tabContainer on the bottom.
The idea is to click on an item on the top and show different related data on the bottom tabs.
The top grid is displayed correctly (I've removed all the plugins to save on space).
The two tabs on the bottom display correctly if I have regular text in the contentPanes, but when I embed a grid in the first tab, the other tabs are not shown.
Thank you in advance for your help!
Chris
Here is my sourcecode:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:spring="http://www.springframework.org/tags"
xmlns:util="urn:jsptagdir:/WEB-INF/tags/util"
version="2.0" style="margin-bottom:3px">
<jsp:output omit-xml-declaration="yes"/>
<style type="text/css">
<spring:message code="dojo_version" var="dj" />
#import "<spring:url value="/resources/${dj}/dijit/themes/claro/claro.css" />";
#import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />";
#import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" />";
#accountDiv {height:15em; width:100%;}
#contactDiv {height:100%; width:100%;}
</style>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojox.layout.ContentPane");
dojo.ready(function() {
accountSetup();
contactSetup();
});
function accountSetup() {
var layout = [[
{ field: 'name', name: 'Name', width: '15%' },
{ field: 'description', name: 'Description', width: '14%' },
{ field: 'website', name: 'Website', width: '15%' },
{ field: 'numberEmployees', name: '# Emp', width: '5%' },
{ field: 'taxId', name: 'Tax ID #', width: '8%' },
{ field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
{ field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
]];
var accountGrid = new dojox.grid.EnhancedGrid({
id: 'accountGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, document.createElement('div'));
dojo.xhrGet({
url: "${pageContext.request.contextPath}/accounts/allShallow",
headers: {"Accept": "application/json"},
handleAs: "json",
load: function(data) {
accountGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
dojo.byId("accountDiv").appendChild(accountGrid.domNode);
accountGrid.startup();
};
function contactSetup() {
var layout = [[
{ field: 'name', name: 'Name', width: '15%' },
{ field: 'description', name: 'Description', width: '14%' },
{ field: 'website', name: 'Website', width: '15%' },
{ field: 'numberEmployees', name: '# Emp', width: '5%' },
{ field: 'taxId', name: 'Tax ID #', width: '8%' },
{ field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
{ field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
]];
var contactGrid = new dojox.grid.EnhancedGrid({
id: 'contactGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, document.createElement('div'));
dojo.xhrGet({
url: "${pageContext.request.contextPath}/accounts/allShallow",
headers: {"Accept": "application/json"},
handleAs: "json",
load: function(data) {
contactGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
dojo.byId("contactDiv").appendChild(contactGrid.domNode);
contactGrid.startup();
};
</script>
<div>
<util:panel title="Accounts" id="accountPanel">
<div id="accountDiv" />
</util:panel>
</div>
<div style="height:346px; width:100%">
<div data-dojo-type="dijit.layout.TabContainer" style="height: 100%">
<div data-dojo-type="dojox.layout.ContentPane" title="Contacts" selected="true">
<div id="contactDiv" />
</div>
<div data-dojo-type="dojox.layout.ContentPane" title="Projects">
123
</div>
</div>
</div>
</div>
How about directly targeting the desired <div> instead of creating a new one?
Eg.
var contactGrid = new dojox.grid.EnhancedGrid({
id: 'contactGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, "contactDiv");
Have you tried to use placeAt instead of appendChild
yourGrid.placeAt(dijit.byId("yourContainerId").containerNode, 'last');
yourGrid.startup();
You can just add css class to the grid,
<style type="text/css">
#accountDiv dojoxGridMasterHeader {height:15em; width:100%;}
#contactDiv dojoxGridMasterHeader {height:100%; width:100%;}
</style>
and now import the following when you want the grid to display your tabs to be displayed
dojo.addClass('accountDiv ', 'accountDiv dojoxGridMasterHeader');
here dojoxGridMasterHeader is for exaple as i wanted my header to be showen, you can use developers tool or firebug to get the exact tabs css and display it.