Button does not work on some mobile devices (eg iPhone6, Androids) - mobile

this is my first question here and I was adviced to place this topic here.
I got a responsive website based on the AURA (PI-)theme. For the xs2 breakpoint I do show another slideshow on the homepage, where I have placed an button as call to action (other button type didn't work either)
On older smartphones like iPhone4 and 5 it is working. But on newer device it ain't.
Please take a look onto this test-page.
You can also check within chrome browser emulating such a device. There the click on the "Explore"-button doesn't work either.
Any help is gladly welcome and I appriciate it very much.
Thank you!

It's quite simple. You got a slideshow with a swipe handler which probably sets a preventDefault for swipe and click/tap. If I try to click it on a test device (android 4), it won't work either. But it does work if i hold it down and then press open. So it's not about the z-index (common error) but about the preventDefault. This means you would have to assign the link to the button/s in the slideshow with javascript.
EDIT:
To assign a link to an element using javascript (just javascript, no jquery or any other library), just put something like that into a script tag or javascript file:
document.getElementById("ID-of-your-button").addEventListener("click", function(){window.location.href = "http://link-desti.nation"});
and that should work fine. If there is another problem with it, just write a comment below please. I will reply on it as soon as possible.
P.S.: Sorry for the late edit, I was having hilariously much work on a "do immediately" level the last days.

Related

Adding Segment telemtry to React component that is only one DOM node

I'm looking to add segment analytics to my JupyterLab extension. No worries if you've never heard of a JupyterLab extension - the best way to think about it: I get control over a single node in the DOM where I can place some HTML, so I'm doing the following:
function Welcome(props) {return <h1>Hello</h1>;}
ReactDOM.render(<Welcome/>, dom_element_i_control)
This all works fine - I'm now looking to add some analytics code to this. For example, I'd like to be able to:
See when my code is rendered
See when someone interacts with my rendered element (e.g. if there was a button in the Welcome function, when the user clicked on it).
However, segment is a JS library that is delivered as a script that you load into a webpage at the top in a string tag like:
<script>
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&...}}();
</script>
Where would I even put this code? I don't have control over the larger page + HTML, so I'm not sure where I can slap this so I can start using analytics.
Thanks for any information!
My workaround:
Instead of using the above linked segment script, I used the analytics-node package from segment.
I create an Analytics object right before ReactDOM.render - and then can use it wherever I want :)
Note that this will not work for anyone who uses an add blocker, obviously!

React-Native: Code compiling correctly but screens are empty

I am fairly new to react native and have been attempting to build a very simple registration app.
Currently I have 2 screens running, the first landingscreen.js includes a button to prompt the first registration screen.
This screen works fine but its title shows as blank. (I am using react-navigator)
Below is the screen and you can find the corresponding code here.
On clicking the register here button the next screen is prompted which should show two fields an email and password field with the title "Let's create an account". As you can see below , all that works is the next button but I have no compilation errors. The code pertaining to this screen may be accessed here.
Any help or way pointing would be more than appreciated.
Thanks,
J.
Change navigation(you have written navigtion) spelling
static navigationOptions= {
title: "Let's make an account",
}
The headers not being seen was solved as #Paras Watts noted by fixing a spelling mistake.
To get the fields to show I then put the jsx pertaining to the form in the same render as the navigation also changing any tags to view to stick to the format of jsx.

Reload Grid in ATK4

I'm trying to learn enough to create a website that lets people answer quiz questions using Agile Toolkit 4.2.
I have a page that displays one question and its answer choices from the 'sampleq' model. I want to make a button that displays the next record in the model.
I've tried a bunch of different ways to get the js()->reload() command to work properly, but I haven't been able to do it. I get AJAX "unexpected identifier" error. I've been through the related questions on this site and looked for documentation on the ATK site, but I haven't found an example that works for me.
Can anybody tell me how to get the button to properly reload the grid?
function init(){
parent::init();
$page=$this;
}
function page_qlisting() {
$qid=$this->recall('value',1);
echo $qid;
$NextB=$this->add('Button')->SetLabel('Next Question '.$qid);
$grid=$this->add('Grid');
$grid->setModel('sampleq',array('question','A1','A2','A3'));
$grid->dq->where('id=',$qid);
if($NextB->isClicked()){
//$this->memorize('value',$qid+1);
$grid->js()->reload();
}
}
function page_qentry() {
$this->api->auth->check();
$this->add('Html')->set('Welcome to the question entry page.<br>');
$this->add('CRUD')->setModel('sampleq');
}
}
Edit:
After reading Romans' answer, I first tried this:
$qid=$this->recall('value',1);
$grid=$this->add('Grid');
$grid->setModel('sampleq',array('id','question','A1','A2','A3'));
$grid->dq->where('id=',$qid);
$this->add('Button')->SetLabel('Next Question')->js('click', $this->memorize('value',$qid+1))->js('click', $grid->js()->reload());
That actually works - it displays only one record at a time, and it displays the next one when I click the button. Next I tried adding a "Previous" button like so:
$qid=$this->recall('value',1);
$grid=$this->add('Grid');
$grid->setModel('sampleq',array('id','question','A1','A2','A3'));
$grid->dq->where('id=',$qid);
$this->add('Button')->SetLabel('Previous Question')->js('click', $this->memorize('value',$qid-1))->js('click', $grid->js()->reload());
$this->add('Button')->SetLabel('Next Question ')->js('click', $this->memorize('value',$qid+1))->js('click', $grid->js()->reload());
This doesn't work, though. Both buttons are decrementing. I tried laying it out like your adjuster buttons example here. Here's what my increment button code looks like in that attempt:
$incr=$this->add('Button')->SetLabel('Next Question');
if($incr->isClicked()){
$this->memorize('value',$qid+1);
$grid->js()->reload();
}
In that case, I get "Error in AJAXec response: SyntaxError: Unexpected identifier" when I click the button.
Can you offer any advice on how to make increment and decrement work with a grid (or crud)? Why doesn't the adjuster example work when you try to refresh a grid instead of refreshing the button? Thanks for the previous answer, and thanks in advance for any additional guidance that you may have time to offer.
This should be it:
$this->add('Button')->js('click', $grid->js()->reload());
If you use CRUD you might want to reload CRUD instead.

adding controller later

I'm trying to create an NG app where parts can be enabled/disabled dynamically. The idea is to have an "admin" page, where parts of the app can be enabled or disabled, and then see new functionality appear, in the form of an adjusted menu at the top of the page, and matching routes, controllers, etc loaded into the app (I'm using SocketStream w/ NG).
The first step was to add / remove routes dynamically, for which I found a solution at https://stackoverflow.com/a/13173667 - working well, as far as I can tell.
Next, adding items to the menu bar - easy with ng-repeat on ul/li items.
So the app adjusts its menu and recognizes the corresponding route. So far so good.
The problem comes with registering a controller. I'm calling myApp.controller('SandboxCtrl',[...]) with proper args (same as what worked when initialising statically on startup), but the controller does not appear to get loaded or inited properly. Navigating to the newly added route generates errors such as:
Error: Argument 'SandboxCtrl' is not a function, got undefined
assertArg#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:973
assertArgFn#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:984
#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:4638
update#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:14007
$broadcast#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:8098
#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:7258
wrappedCallback#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:6658
wrappedCallback#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:6658
#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:6695
$eval#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:7848
$digest#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:7713
$apply#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:7934
#http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js:5433
I'm currently at a loss on how to proceed. I've not been able to find a solution on the web. The app is too large to put in a jsFiddle, but I can commit the last changes on GitHub if needed.
Questions: is this feasible? what can I do to debug this? any examples I could look at?
EDIT: The code is now at https://github.com/jcw/housemon (needs node/npm/redis). It's easy to reproduce the problem: launch with "npm start", browse to localhost:3333, go to admin tab, click on "jcw-sandbox" and then "Install". Top menu will update with new a "Sandbox" entry. Clicking on that entry generates the error shown above.
Oh, almost forgot: relevant code is in client/code/app/main.coffee and client/code/modules/routes.coffee ...
The answer turns out to be two-fold:
the NG calls were made from SocketStream RPC callbacks, and had to be wrapped in $scope.$apply calls - my bad, didn't know about this SS/NG interaction
the rest of the solution was outlined by #matys84pl - pick up $controllerProvider (and $filterProvider) early on, so they can be called at a later time instead of the normal "app.controller" and "app.filter" members, which don't seem to work anymore later on
Example code in GitHub, I'll link to a specific commit so this answer stays valid:
https://github.com/jcw/housemon/commit/f199ff70e3000dbf57836f0cbcbb3306c31279de

Dojo : FilteringSelect : problems with coming back to valid state

I've came across this issue today and I think I might need some help. We are using 1.6.1 version of Dojo, but this is cross version issue.
Steps to reproduce the following issue are pretty simple:
click the dojo doc link for Filtering Select dijit.form.FilteringSelect
On the documentation page, click the first FilteringSelect sample
In the Codeglass window sample, click the filteringselect and add "x" to "California", thus bringing it to invalid state
While focused, delete the "x" letter.
and here comes the problem. Technically the value is correct, but the dijit is still like in error state (unless it loses focus).
I'd like to get the dijit react and render correctly straightaway I delete the character causing the invalid state without losing focus.
Any ideas for the workaround?
Thank you.
ok. for eveyryone else interested the solution was 'quite' simple, just use the dijit.form.FilteringSelect._refreshState() .The underscore prefix is might not be someone's cup of tea but that was the only way to get it in correct state.
in our case it was a bit tricky as we are using the dojox.data.QueryReadStore wrapped in our own object and I needed the proper trigger which I've found in connecting to onComplete event of the inherited fetch() method.

Resources