I'm following a tutorial that shows one how to make a chat app with a paging feature but for some reason the code responsible for the Prev page and Next page paging buttons do not work as expected.
Here is the app in a Plunker:
http://embed.plnkr.co/zxp9wcKaMcfM2U0vAJhG/preview
Every time one clicks the Next button, one is supposed to see the next 10 message in the Firebase message object starting from the first one. Keep in mind I have 28 messages in the messages object. So when you click the Next button once, you will see the next 10 messages as expected but when you click it a second time the message list goes blank.
So when I tried to debug this manually I decided to run console.log(lastItem.name) since this seemed to be the critical parameter to get this function to work. So you can see in the console that the first time you click Next, you will see the Firebase ID of -JX7ZlaB0QTa0Z47eu28 logged. That makes sense since it is the name/ID of the last message object in the first 10 that are returned to the page on page load. When you click Next again, we expect to see a similar looking message object name/ID but instead we just see the string messages logged to the console.
So it seems like the pageNext function is jumping up the data tree, from an individual message object to the whole entire messages object. And then when we press Next again we see this error
TypeError: Cannot read property 'name' of undefined
at h.$scope.pageNext (http://run.plnkr.co/plunks/zxp9wcKaMcfM2U0vAJhG/main.js:32:24)
So it looks like it jumps to the root of the data tree I guess which contains nothing. Any idea why this is happening and how to fix it?
Your messages only have a user and text property.
In the pageNextand pageBack methods, where you're getting the error, you're getting the last message and trying to read the name property which doesn't 'exist.
I'm guessing you meant to read the user from the last message?
In your pageNext and pageBack method you're referring to the wrong snapshot.
When I fix that, the plunker works:
messageRef.startAt(null, name).limit(numberOfItems).once('value', function(snapshot) {
snapshot.forEach(function(snapItem) {
var itemVal = snapItem.val();
itemVal.name = snapItem.name(); // was snapshot.name()
messages.push(itemVal);
});
deferred.resolve(messages);
});
Related
I have a codesandbox for this question: https://codesandbox.io/s/chakra-modal-input-forked-jelhlr?file=/src/App.jsx
I want to get the filename via the modal, and when the user completes that action, I want to do stuff with that information, in this case I want to make an api request.
Thanks!
EDIT:
I have a form with the following onSubmit:
// 1. prepare data for POST request
const data=prepareData();
// 2. get title for data entry from user
onOpen();
// 3. send data via POST request
const response=await axios.post('route',{title,data})
The way things are, the modal shows at step 2 and without waiting for user input, step 3 occurs. I want to get the title name from the user and then I want step 3 to occur.
I found the package react-modal-promise that does exact this. Works perfectly!
The value of the textbook is saved into the ref titleInputRef.
This means you can access the value of the ref/textbox with the following:
titleInputRef.current.value
To log the value to the console, for example:
console.log(titleInputRef.current.value)
In my form if i enter numbers rather than text and it will give an error then after clicking on next button it should not be redirected to next page.
how to prevent this.
The clicking on the next button will execute a validation function, and based on the result, you will decide whether to navigate to the other page or display an error and stay on the same page.
Even better (and assuming that you have multiple fields in the form): check the value of every field when the user leaves the field (onBlur) and notify the user about the error immediately then. This is not instead of running validation on 'Next' or on 'Submit', since the user may click on the button without visiting that field.
Long time ago (as a test for me, during my study of react), I created a small project that implements a form. It is far from perfect, but you might find it useful: https://github.com/rahamin1/reactstrap-form
I'm building account system using sencha touch (architect) and now I have an issue where the code executed but the this.getMainView().pop(); NOT and the view states on current one !
my views:
Login scrn--> cstmrs list--> cstmr details--> rceipt--> checks
When I get to receipt view (without checks) the code executed and auto returned to customer's details view.
But soon I click to add a check to the receipt (only displaying the form without any code) the check view injected to mainview after that I click back button to return to receipt window, but now when I click save button the receipt is saved and the data arrives server side ok, but the big problem the this.getMainView().pop(); doesn't work or doesn't executed !!
Is there any wrong with my code? it works without displaying the 'checks' form !
Nothing in firebug/chrome debugger
I use this code to show forms:
var mainView=this.getMainView();
mainView.push({xtype: "frmChcks",title:'new check'});
And this code for getting back:
this.getMainView().pop();
Thank you in advice
Ahhhh it was because I used a hidden field called 'id', don't use 'id' for you components :-)
I am fairly new to ionic (using the 1.0.0 beta1) and Angular, and I am working on my first project, where I experience weird bugs, I cannot understand.
My app is based on the "Ionic Book" task app, described here: http://ionicframework.com/docs/guide/building.html.
Here's the link to my app: http://plnkr.co/edit/zp49fsbmOfMiQfXDopxt?p=preview1
In my version of the task-app, the tasks are called "instances" and each instance has several "categories" in it. Each category has a title and a status.
The user can enter instances in the side menu, via the '+' button. And each instance is created with some dummy categories.
The user can choose his instances and then choose a category to see its status.
To see what bugs occur, please visit my app http://plnkr.co/edit/zp49fsbmOfMiQfXDopxt?p=preview1 and add a few instances with dummy titles like a, b, c, d. The url form may remain empty, it is not yet needed. Don't click on a category yet. You will notice the switching from one category to another works as expected (though all instances have the same categories).
Now when you click on a category in an instance, say in instance b, the view shows the category status, with the right category title in the nav-bar. When you now click on the back button, the mess starts:
If you now click on any category, the view always displays the category, which you clicked at first! Not the one you want to see. Also, if I now change the instance (say to instance a) and try to switch back to instance b, the switch will not be performed (the title remains a)!
I really can't see where those bugs come from, as the localeStorage seems to be updated on clicks! (check the lastActiveInstance and lastActiveCat variables in localStorage!)
Do you guys see where my mistake is? By this time I think it must be some fundamental problem with the $stateProvider and the back button?
I'd really appreciate your help, since I am pretty desperate right now. Thank you
For what I've seen, it looks like you have only one MainCtrl for the whole application, is that right?
It looks like the variables of this controller are only updated once. So your activeInstance will receive it's value when you click for the first time to see the category, but then if you come back and click again on anything, the value of this variable is not being updated. You're calling selectCat function but I don't see it updating the values of activeInstance.
I hope it's only that!
It is now fixed with the new ionic 1.0 beta 5b.
View title updates as expected.
From the changelog:
- List item
- make it set navbar if title changes back to old value (919d4f8d, closes #1121)
In our project we use ZK for webpages. There is a combobox which has lists. When selected, it fetches data from a java object through onSelect, i have given the logic.
when i select one there are 4 listboxes on that page to be filled with data according to the selection. when i select first time, no problem occurs.
But on second time i get an error pop-up like "Not Unique in the id space of Window" and showing the list box item id which have to be filled on select.
Can any one help out there?
Note: Though it shows this error i get the listboxes filled correctly according to the combo box selection. Still i cant stop this error occurring..
Your issue is a conflict of ids in ZK's id space.
A bit of background..
ZK generates ids for components at runtime, if you open up the DOM in the browser you'll see each component has some machine readable id.
However, you can also give components an id. This id does not go to the DOM but lets you reference the component in your application.
These two shouldn't be confused. The conflict you're experiencing is with the latter type of id; you are assigning a component an id in your Java code or in your ZUL file which, at runtime, is not unique.
The case you describe where it only happens the second time you click is a tell tale sign here. The content you are adding on the event has an id defined in it and you are not removing this content when you are done.
Consider the following example:
#Wire
private Window myWindow;
#Listen(Events.ON_CLICK + " = #myButton")
public void onMyButtonClicked() {
Label myLabel = new Label("sean is cool");
myLabel.setId("myLabel");
myLabel.setParent(myWindow);
}
This will work the first time you click myButton, but will throw your error on the second click. That is because the second event tries to add myLabel to myWindow but there is already a myLabel there.
There are lots of ways to resolve this depending on what you are trying to do.
Have a look through the ZK documentation on ID Spaces for more.
I also faced the same error.
My scenario is the same, only the widgets being used are different.
Hence putting my workaround here.
I have put the following piece of code in the doBeforeCompose() method of the composer:
Component widgetWithId = page.getFellowIfAny("widgetWithId");
if (widgetWithId != null) {
widgetWithId.detach();
}
Here widgetWithId is the component/widget, which is tried to be regenerated by the code, with the same Id and ZK is throwing error for it.