I'm using #sandstreamdev/react-swipeable-list package in one of my project to create a swipeable list with React. Explored the docs and thought of experimenting with one of the examples mentioned in it. Here is the application created by copying code from the given example. But it is behaving unexpectedly.
Actual Behavior:
Expected Behavior:
Whenever the list item shown is swiped right or left it should display reply or delete option accordingly under the list item. But instead the options are shown all the time. I think the issue here is with the CSS but I'm not sure exactly where I messed it up. Please help me in resolving this issue.
You forgot to import the css of the library.
import '#sandstreamdev/react-swipeable-list/dist/styles.css';
here is the fix
https://codesandbox.io/s/twilight-waterfall-lhkfo
Related
I've implemented a basic search functionality using freeSolo material-ui, but I have a trouble when my array has two same titles. When I attempt to type 'a' I strangely get Woolies as one of the option. When you click elsewhere within the application and click on search box again, I get the correct output.
Confused how can I get rid of this bug.
Screenshot 1
Screenshot 2
REPO URL: https://stackblitz.com/edit/react-ovvfuz?file=demo.tsx
Any help would be greatly appreciated :)
I'm trying to convert the Adjuster example mentioned here: http://agiletoolkit.org/learn/understand/view/interactive
into a View that is able to show me the next/previous picture of a list of given images.
I guess the number in the example could be an index into an array of pictures.
I'm just not sure how to provide the list of pictures, when all the code is put in init() for the View, so no way to give it the picturelist before that...
Should I use memorize/recall for this list also to prevent it getting lost upon reload ?
is there another example that might help me?
I think you what you are doing can be much easier done with a classic JavaScript Lightbox script. You would supply it list of images and it would show one full-screen.
If not, you can use this:
https://gist.github.com/romaninsh/7217119
This will give you slides similar to the ones on http://agiletech.ie/
Be advised that this code is a little old.
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.
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
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.