Expected Behavior
Create the Chips component with the autocomplete option using Javascript (no jQuery).
Current Behavior
Running the component I get the message
materialize.min.js:6 Uncaught TypeError: Cannot read property '0' of null
at n.value (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js:6:104488)
at new n (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js:6:101364)
at Function.value (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js:6:11799)
at Function.value (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js:6:106244)
Steps to Reproduce
Codepen link: Using 1.0.0-alpha3
HTML:
<div class="row">
<div class="col s12 m6">
Groups:
<div class="chips chips-autocomplete-groups"> </div>
</div>
</div>
JS:
var elem = document.querySelector('.chips-autocomplete-groups');
if (elem != null) {
var insChipAC = M.Chips.init(elem, {
placeholder: 'Enter a group',
secondaryPlaceholder: '+Group',
autocompleteOptions: {
data: {
'Alex': null,
'Brandy': null,
'Charlie': null
},
limit: Infinity,
minLength: 1
}
});
}
In 1.0.0-alpha2 version I was able to create the component
Codepen link: Using 1.0.0-alpha2
Environment
Version used: 1.0.0-alpha3
Browser Name and version: Chrome 63.0.3239.108
Operating System and version (desktop or mobile): Ubuntu 16.04
It's a bug. Fixed in https://github.com/Dogfalo/materialize/pull/5514 (link do pull request)
Related
In my vue/cli 4 / Bootstrap 4.3 app I use vue-upload-component component for files uploading
and it works ok. I want to add cypress for testing file uploading and I
added https://github.com/abramenal/cypress-file-upload/tree/v3.5.3 into my project, but failed
with this testing.
I have in vue file:
<file-upload
ref="upload"
v-model="imageFiles"
post-action="/post.method"
put-action="/put.method"
#input-file="inputFile"
#input-filter="inputFilter"
:multiple="false"
class="btn btn-outline-secondary btn-sm m-2 file-input-class"
data-cy="file-input"
>
<i :class="'action_link '+getHeaderIcon('upload')"></i>Upload image
</file-upload>
...
const VueUploadComponent = require('vue-upload-component')
Vue.component('file-upload', VueUploadComponent)
and in my browser it is rendered into :
<span class="btn btn-outline-secondary btn-sm m-2 file-input-class file-uploads file-uploads-html5" data-cy="file-input">
<i class="action_link fa fa-upload"></i>
Upload image
<label for="file"></label>
<input type="file" name="file" id="file">
</span>
I cypress test file I do :
import 'cypress-file-upload'
describe('Admin category fileupload functionality', () => {
...
const fileName = '/sample_images/sample.png';
cy.contains('Image Preview/Upload')
cy.fixture(fileName).then(fileContent => {
// cy.find('#file')
// .should('have.value', 'Invalid Text')
console.log('++Inside Tests cy::')
console.log(cy)
cy.get('#file').upload({ fileContent, fileName, mimeType: 'image/png' });
});
But in the console I got error:
THEN function(){}
TypeError: cy.get(...).upload is not a function
I see next ouput of cy var :
Also in testing code above to uncomment 2 lines :
cy.find('#file')
.should('have.value', 'Invalid Text')
I do not have should errors, as I expected, asnd I do not understand why ?
How to make file uploading testing?
"axios": "^0.19.0",
"cypress-file-upload": "^4.0.6",
"file-saver": "^2.0.2",
"vue": "^2.6.10",
"vue-upload-component": "^2.8.20",
Thanks!
You're showing "^4.0.6" as your cypress-file-upload version. There is a difference between the latest version and version 3.5.3.
The exposed command has changed from upload() to attachFile() since version 4.0.0
There is also a note in the latest version saying it's unstable at the moment. Maybe you should revert back to 3.5.3 and keep your code as is.
i am beginner to Phonegap, here i am executing this reference code in Android Emulator and working in phonegap 2.0 to get simple output. After running this code, Logcat shows the following error:
xmlHTTPrequest cannot load http://api.careerbuilder.com/v1/jobsearch?DeveloperKey? origin null is not allowed by access control-Allow origin
here html code:
<div data-role="page" id="page1">
<div data-role="header" data-theme="b">
<p><center>Career Builder</center></p>
</div>
<div data-role="content" data-theme="d">
<input type="text" id="t1" placeholder="Location....">
<input type="button" id="but" value="Search" onclick=show()><br>
<ul id="list" data-role="listview" data-theme="a" data-filter="true">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
}
function show() {
var val=document.getElementById("t1").value;
$.ajax({
type: "GET",
url: "http://api.careerbuilder.com/v1/jobsearch?&DeveloperKey= my api key",
contentType:"xml/application",
data:{
val:val,
},
dataType: "xml",
success: function(xml)
{
xmlParser(xml);
}
});
}
function xmlParser(xml) {
$(xml).find("JobSearchResult").each(function () {
var com=$(this).find("Company").text();
var job=$(this).find("JobTitle").text();
$("#list").append
('<ul><li>Company Name :' + com + '</li><li>Job Title :' + job + '</li><ul>');
$('#list').listview('refresh');
});
}
This is caused by the same-origin policies enforced by all modern browsers. Read up on how CORS works for more details. Basically the issue is that your web page is on a different domain than the careerbuilders.com URL, and the CORS headers are either not transmitted correctly by careerbuilders.com, or aren't interpreted correctly by phonegap.
I'm in the process of creating a application using Hot Towel, which supports multiple language (eg. english, french)
I have the referred the following links
Translating Views
Durandal localization example
And my question is how can i render views of application based on user language. If user selects english, the complete application should display contents in english. How to achieve this
I have tried something like in the second link.
define({
'root': {
welcome: 'Welcome!',
flickr: 'Flickr'
},
'fr-fr': true,
'es-es': true,
});
Is this i have to create seperate views for languages or i have to create seperate App folder for contents
Suggest me some best practices.
I don't recommend using separate views or separate folders if your project is a big one.
You can just create a file of the labels and if you use lib like knockout just data-bind these labels once (text: xxxx). In addition you can use i18n to manage labels.
With selected language just load the specific language file to your viewmodel.
EDIT1:
I'd never encountered a complete sample nor tutorial. So how I do is to :
use tools like i18n to get the key-paired dictionary file for labels in html and in some javascript code like messages.
then manually I indexed these labels by augmenting knockout viewmodels for views and variables for modules.
This is my last option in waiting for better solution. Hope this can help!
you can do some thing like this . YOu can change the APP folder if you are need do lot of locale changes you can use the following method
#{
string strAcceptLanguage;
strAcceptLanguage = System.Configuration.ConfigurationManager.AppSettings["Locale"].ToString();
if (strAcceptLanguage == "en-us")
{
#Scripts.Render("~/Scripts/vendor.js")
<script type="text/javascript" src="~/Scripts/require.js" data-main="en-US/main"></script>
}
else if (strAcceptLanguage == "es-es")
{
#Scripts.Render("~/Scripts/vendor.js")
<script type="text/javascript" src="~/Scripts/require.js" data-main="en-UK/main"></script>
}
else if (strAcceptLanguage == "fr-fr")
{
#Scripts.Render("~/Scripts/vendor.js")
<script type="text/javascript" src="~/Scripts/require.js" data-main="AUZ/main"></script>
}
}
in the Index.cshtml you can use the above code and for the you need to have value in Webconfig file
<add key="Locale" value="en-us" />
and in the SPA page each time when the user try to change the locale by pressing button or any kind of option you have to trigger a event to call a AJAX post to assess a REST api to update the Given Locale Value in the webconfig file
changeLocale: function (val) {
var name = JSON.stringify({
locale: val
});
$.ajax({
cache: false,
url: "http://localhost:49589/api/Locale",
type: "POST",
dataType: "json",
data: name,
contentType: "application/json; charset=utf-8",
processData: false,
success: function (json) {
alert(json);
location.reload();
},
error: function (json) {
alert("error" + JSON.stringify(json));
}
});
you have to write the above code in the shell.js and the shell.html has the following code
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary" data-bind="click: changeLocale.bind($data, 'en-us')">English</button>
<button type="button" class="btn btn-primary" data-bind="click: changeLocale.bind($data, 'es-es')">French</button>
<button type="button" class="btn btn-primary" data-bind="click: changeLocale.bind($data, 'fr-fr')">Japanese</button>
</div>
And the rest api like this
[HttpPost]
public string ChangeLocale(Locale l)
{
ConfigurationManager.AppSettings["Locale"] = l.locale;
return "success";
}
hope this will help
I am trying to recreate this example in my project, to add the drag and drop feature to the dojo uploader:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_Uploader.html
Copying the exact same code in jsfiddle or in my application the line
if(uploader.addDropTarget && uploader.uploadType=='html5'){
returns undefined for addDropTarget and iframe for the uploadType.
I tried it with various browsers, and even added force: html5 in the uploader but nothing changed.
Please, note that everything works ok except from the dnd.
I am using dojo 1.8.1.
In dojo 1.8, the uploader is not yet fully AMD compliant. So, in order to make the example from the trunk tests work in 1.8, you need to create the uploader programmatically using the dojox.form.Uploader constructor rather the required AMD module. As follows :
<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
<fieldset>
<legend>DnD Test</legend>
<input class="browseButton" id="uploader"/>
<input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
<div id="files" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader"' ></div>
</fieldset>
</form>
<div id="dropTarget">Drop files here !</div>
And in the javascript :
require([
'dojo/parser',
'dojo/dom',
'dijit/registry',
'dojox/form/Uploader',
'dojox/form/uploader/FileList',
'dojox/form/uploader/plugins/HTML5',
'dojo/domReady!'
], function(parser, dom, registry, ready){
var dropTarget = dom.byId('dropTarget'), uploader;
parser.parse().then(function(){
// You need to use dojox.form.Uploader, as in dojo 1.8,
// the module is not fully AMD compliant yet.
uploader = new dojox.form.Uploader({
name:'uploadedfile',
label:'Select Some Files',
multiple:true,
force:'html5'
}, 'uploader');
uploader.startup();
if(require.has('file-multiple')){
console.debug("Adding a new drop target");
registry.byId('uploader').addDropTarget(dropTarget);
}
});
});
See http://jsfiddle.net/psoares/6r2jZ/
i'm currently building an app where you can like the app itself from a like button inside the frame. So, i load the js sdk :
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $appid; ?>', // App ID
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Canvas.setSize()
checkIfLoaded();
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
then i just write a like button in the html :
<div id="page" class="page-01">
<div id="content">
<h1><img src="img/skin/logo.png" alt=""/></h1>
<div class="block-01">
<div id="fb-root"></div>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="105" data-show-faces="false"></div>
</div>
</div>
<div id="footer">
</div>
</div>
I was expecting a like on my application by this button, but it like the url hosting my application.
I'm new to js sdk, is there a way to do this kind of things ?
There is no such thing as "Liking Application", actually the only thing you can bound your Like Button is URL (which may represent OpenGraph object).
You cannot use Like Button to like any internal Facebook Objects like Page, Application, User, etc.
If you speaking about liking the Page that associated with specific Application you should use Like Box social plugin (which is intended to be used with Pages).
You'll need to specify the URL to like with data-href="url to like"