firstly let my say that the mdc documentation is difficult for non-pros like me.
I'm using Elixir Phoenix and Brunch.
I import and everything is fine.
import {MDCTab, MDCTabFoundation} from '#material/tabs'; import
{MDCTabBar, MDCTabBarFoundation} from '#material/tabs'; import
{MDCTabBarScroller, MDCTabBarScrollerFoundation} from
'#material/tabs';
I manually instantiate the tab bar in a separate function that I export
export var Tabbable = {
run: function(MDCTabBar, el){
var myDynamicTabBar = window.myDynamicTabBar = new MDCTabBar(document.querySelector('#' + el));
Which is following the documentation like this
const tabBar = new MDCTabBar(document.querySelector('#my-mdc-tab-bar'));
but is slightly different to the documentation's use of the tab bar in their code snippet
var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
But, whenever I try to use mdc I get a 'not defined' error. Therefore, I'm not using it :-)
Now, when the user clicks the tab bar I capture that like this:
myDynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
var nthChildIndex = tabs.activeTabIndex;
updatePanel(nthChildIndex);
});
The subtle difference is that my myDynamicTabBar is MDCTabBar but the documentation's dynamicTabBar is mdc.tabs.MDCTabBar
My tab control works, but it throws an error only visible in the console:
Uncaught Error: Invalid tab component given as activeTab: Tab not
found within this component's tab list
which is likely because I'm not using mdc.tabs? The documentation notes the change event happens on the MDCTabBar.
Therefore, how do I get rid of this annoying error in the console?
And why can I not access the global mdc? I have tried this in my Brunch file
globals: { mdc: "#material"}
But no good.
I'm right behind you on this! I'm frustrated with the docs too :(
You answered your own question in this Elixir thread which is very informative.
I found the real solution in this thread https://github.com/hyperapp/hyperapp/issues/546
MDCTabBar automatically initiates its children. So initiating tabs will result in that error.
The fix is to just initiate MDCTabBar
Related
I'm trying to access the local storage data in Edge set by my options page, using my popup script. Is there a current, working example of this available?
I was using localStorage, but it would only update the popup if I reloaded the extension after saving changes in my options page. I want to make it easier on the user by allowing the popup to access it immediately after saving, without reloading. I found the browser.storage.local.get(), but documentation conflicts everywhere I look, and I can't find viable working examples.
I have used, per Edge documentation:
browser.storage.local.get("sample");
But it throws an error requiring a callback function. So then I used:
let sample = browser.storage.local.get("example");
sample.then(ifGood, ifBad);
I get an error regarding property "then".
Then I simply tried adding a callback to the action itself:
sample = browser.storage.local.get("example", callbackFunction);
function callbackFunction(data){
alert(data);
}
The end alert should display a string, but it just displays an empty Object. How do I access the data returned in the callback? I tried callbackFunction(this) as an argument in the get, but it throws an error about the syntax of the get.
I found a work-around using browser.runtime.reload() in the Options page when saving the changes. It still reloads the extension, but it does it without requiring the user to do it manually.
You should use this syntax:
browser.storage.local.get(propertyName | null, callbackFn)
where
callbackFn = function fn(resultObject) {...}
When you pass null you will get whole storage object.
Look for example 1 or example 2 in my Edge extension.
I'm trying to set up a coded UI test to allow me to check for an error message on a login. The test runs, but I'm struggling to get the assert to work.
The response that comes back is nested as follows:-
<div class='ui-errors'>
<ul>
<li>Your password is invalid</li>
</ul>
</div>
What do I need to set up to check the first li in the div of that class in an assert?
Coded UI can capture DIV. In the following code I've created a custom DIV object from your provided example. AdrianHHH's answer will definitely get you information you need to insert in to my example.
var error = new HtmlDiv(new Parent(RootParentWindow));
error.SearchProperties.Add("Class", "ui-errors");
var errors = error.FindMatchingControls();
foreach (var item in errors)
{
Assert.IsTrue(item.GetProperty("InnerText").ToString().Contains("Your password is invalid"));
}
Coded UI does not really look at DIVs or ULs etc. Coded UI looks at what is drawn on the display. I suggest you use the Coded UI cross-hair tool to examine the error message then add an assertion to check for the message. You might also examine the same area of the screen for a test which passes to see how they differ.
If you are hand coding your test rather than letting Coded UI generate the code for you, I recommend creating a sandbox project and recording the assertion into that. Then copy the useful ideas from the generated code into your own test code.
If you can get a sample of the page where the assertion is needed I could create it for you, otherwise do what AdrianHHH said.
In case you don't know when you use the assertion tool, all the options you get are different ways to assert that particular control, eg you could assert if it exists or if the inner text is equal etc.
yonitdm answer will solve your problem, but as per your words, "first li in the div of that class" try below.
// Find Error Div
var errorDiv = new HtmlDiv(new Parent(RootParentWindow));
errorDiv.SearchProperties.Add("Class", "ui-errors");
errorDiv.Find();
// Get UL - First item in div
var errorUL = errorDiv.GetChildren().First(); // or GetChildren()[0]
// Get all LIs and take first item
var firstLI = errorDiv.GetChildren().First(); // or GetChildren()[0]
Assert.IsTrue(firstLI.GetProperty("InnerText").ToString().Contains("Your password is invalid"));
I'm trying to modify the scrollbar colors for jscrollpane.
This didn't work for me:
$('a.athlete_popup_content').click(function(){
$('#box_on_top').append($content); //.athlete class is within $content
$('.athlete').jScrollPane({autoReinitialise: true});
$('.jspVerticalBar').css('width', '10px');
$('.jspTrack').css('background','lightgrey');
$('.jspDrag').css('background','black');
$('.athlete').jScrollPane({autoReinitialise: true});
});
i tried placing athlete class both before and after... it doesn't do anything... also, the second time this runs, the scrollbar doesn't appear at all.
any help?
-=update=-
For the issue where it does not appear correctly the second time, I had to destroy the jsp on close and it started working.
var element = $('.athlete').jScrollPane();
var api = element.data('jsp');
api.destroy();
I was unable to get the colors to work.
I am including the .css initially, but want to change the colors on load. I wasn't able to figure out this issue so I just modified the .css
Thanks!
Your code es working perfectly, as you can see here. If you are calling jScrollPane() on a click event then the tags you are trying to reach (.jspVerticalBar, .jspTrack, .jspDrag) are created after css() calls, then you should use .on() to attach those calls to the event.
Why is the following example not working in ie9?
http://jsfiddle.net/dzyyd/2/
It spits out a console error:
"Unexpected call to method or property access."
I found it pretty quickly. You created the element, but did not put it anywhere. Once it is added to the document body, everything seems to be fine.
this._width=300;
this._height=300;
this._bgSvgContainer = document.createElement("div");
//NOTE: add the created div to the body of the document so that it is displayed
document.body.appendChild(this._bgSvgContainer);
var bgCanvas = Raphael(this._bgSvgContainer, this._width, this._height);
this._bgCanvas = bgCanvas;
var num = this._bgCanvas.text(this._width-10,this._height-10,"1");
It's really hard to tell with such a tiny code-fragment (doesn't run on any browser for me), but it's probably a scope issue this in IE during events is completely different to this using the W3C event model. See: quirksmode-Event order-Problems of the Microsoft model
Hi
I have a flash image gallery that worked just fine, until few days a go it stopped loading the images. the debugger throws this error :
SecurityError: Error #2000: No active security context.
can someone explain what can be the cause?
I've run into this problem when working with loading images where the path is located in an external XML file. So... I load the XML get the path from it but then the problem I had was I was loading 30+ images and the error was popping up only 6 times so.. I had no idea which file locations where the bad ones.
If you want flash to out put more info than just :
SecurityError: Error #2000: No active security context.
Add this event listener to your Loader:
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
and finally this function:
protected function ioErrorHandler(e:IOErrorEvent):void{
trace(e.text);
}
With this in place your Security Error will convert to a URL Not Found Error with the file location you supplied. With this information in hand it should be easier for you to debug the problem.
Error #2035: URL Not Found. URL: file:////Volumes/Macintosh%20HD/Users/cleanshooter/Documents/Website%20/here/there/everywhere/30805/filename.jpg
I faced this issue before,the final conclusion was related to incorrect image path or name
Did your images extensions change, possibly from like .jpg to .JPG or something?
Typically this is called if there is a problem with your external media. Here's a workaround for it, but I typically try and solve versus make it go away.
setTimeout( function():void{fileReference.load();}, 1);
Hope this helps.
I ran across this issue and used the above setTimeout example but for a slightly different purpose. I was calling a php script that hit Twitter and got the same security issue in Flash debug player. I just wanted to add my example which builds on the above to show how you can use this "workaround" for URLLoader as well as fileReference.
var myXMLLoader:URLLoader = new URLLoader();
var urlStr:String = "http://www.yourdomain.com/php/twitter.php";
var myVariables:URLVariables = new URLVariables();
myVariables.twitterID = "yourtwitterID";
var myURLRequest:URLRequest = new URLRequest(urlStr)
myURLRequest.data = myVariables;
setTimeout(function():void { myXMLLoader.load( myURLRequest ); }, 1);
myXMLLoader.addEventListener(Event.COMPLETE, onXMLLoadHandler);
You need to handle the error:
loader.contentLoaderInfo.addEventListener(HTTPStatusEvent.HTTP_STATUS, onHTTPError);
protected function onHTTPError(e:HTTPStatusEvent):void{
trace("HTTPError"+e.status);
}
This way it will handle the error and works fine.
In response to headwinds:
In AS3 you need to import flash.utils.setTimeout. The syntax for setTimeout is setTimeout(A, B, ...rest);
Where B is the function to get called afterwards,
A is the delay in ms (e.g. 1000 for a second)
and C is any number of parameters you need to provide for the function, separated by a comma.
E.g.
import flash.utils.setTimeout;
// package, etc
//main function
setTimeout(respond, 500, true, false);
private function respond(A : Boolean, B : Boolean) : void {
var result : Boolean = A == B;
trace(result);
}