Updating existing item

sandy-reeder-cureton · August 21, 2017, 7:57pm

I have an index to my collection. there are links to the details page for that row which are linked using URL. I have an update page is have a link either from the table or the detail page which goes to the input page. I added a button to the dynamic/detail page, and pointed it to update, hoping that the collection pointer would be on the record I was on. How can I send a parameter to the page from my button so that the update page goes to the one I am searching for.

Or to not presume the answer, I need to be able to search for a collection record and send that record id to the update page.

Hope that makes sense. Alternatively, add a user input search field to the input page and make it the filter?

Here is a link to the index page. If you select as an example, the name in the first row, it will go to the detail page, where there is the update button. If you click it, it will go to the update page with a different person. I’m good with a code example if code is needed.

andreas-kviby · August 22, 2017, 8:46am

I would appreciate some code or screenshots to understand your issue more clearer.

sandy-reeder-cureton · August 22, 2017, 6:47pm

Sorry, I mean to put the link in the post. Here is the link https://www.png68.online/class-index.

Click the link on the first name, it’ll take you to dynamic page which has a button for “update” if you pick it it goes to a form to update. You page through there to whatever record you want, but I would prefer to pass the page a filter or pointer to start.

andreas-kviby · August 22, 2017, 8:41pm

Hey
I can’t login its protected. Does your form work to update and what is is that don’t work?

sam-wix · August 23, 2017, 7:33am

Hey Sandy,

I think I got what you’re trying to do. And the good news is that it is very easy to do.

Looks to me like your update page is not a dynamic page. I think you should use a dynamic page for updates.

You should be able to convert your current page to a dynamic one by clicking on the settings icon that appears when you hover over the page it in the Site Structure Sidebar and choosing Set as a Dynamic Page . (Also, since you already have a dynamic item page using the UserID, you will need to add something to the URL to make it unique. Something like: Classmates/update/{UserId}).

You can remove the previous and next buttons, since you won’t need them anymore.

Next, change the Update button on the read-only dynamic page to connect (using the Connect Panel) to the new read-write dynamic page you just created.

When someone clicks Update on the read-only items page, it will navigate to the read-write item page of the same item.

sandy-reeder-cureton · August 23, 2017, 1:47pm

OK got it. Will give that a try. next would like to be able to add a search field to the top oc the class list to position to that spot in the table Clues for that would be welcome

Thanks Sam i really appreciate your helping me make this work your new function is great

sam-wix · August 23, 2017, 2:28pm

I can’t think of any way to scroll to a specific item in the table, but maybe someone else can.

However, I have another idea that might work for you. You can filter the whole table to only show the items that match the search terms.

Let’s say you add a button and a text input on top of your table. Users will enter a search term and click on the button to filter the table based on the term.

Here’s some code that should get you started:

import {wixData} from 'wix-data';

export function searchButton_onClick(event) {
	$w("#dynamicDataset").setFilter( wixData.filter()
		.contains("fieldToSearch", $w("#searchTerm").value)
	);
}

Here I assume the ID of the dataset is dynamicDataset, the ID of the text input is searchTerm, and the button has been connected to an onClick event handler named searchButton_onClick. Also, I assume you only want to search in one field, named here fieldToSearch that you should change to the field you want to search in. If you want to search in more than one field, you’ll need to get a little fancier with setting the filter.

code-queen · August 23, 2017, 3:05pm

Now I’m going to create something just to try this out …

sam-wix · August 23, 2017, 5:03pm

Let us know how it goes.

sandy-reeder-cureton · August 23, 2017, 9:00pm

Hi Sam, I changed the page to dynamic as you suggested. The url pointers seem to have been created correctly in the database. changed the update button on the detail/view page, to link to the newly made dynamic update page, but no mater which person I pick, so no matter which person is showing, when the update button is clicked, it shows, the last record I had added to the database. You can try it as I left the pages unprotected.

The other weird thing is that if I click the address bar, this is what it shows
https://www.png68.online/Classmates/dbailey/Bailey-Fugate, which is not the record/item which is displaying.

sandy-reeder-cureton · August 23, 2017, 9:44pm

OK, I duplicated my Class Index to create Class Search.
Added code per your example in the code box. When I test I get this error

“There was an error in your script
TypeError: e is not a function. (In ‘e()’, ‘e’ is null)”

Here is my code
//For full API documentation, including code examples visit http://wix.to/94BuAAs

$w.onReady(function () {
//TODO: write your page related code here…
import {wixData} from ‘wix-data’;

export function searchButton_onClick(event) {
$w(“#Classmates”).setFilter( wixData.filter()
.contains(“title”, $w(“#textInput1”).value)
);
}
});

The data isn’t filtered.
I looked at the API reference for wixdata and filter and can’t tell what is causing the error.

ziv-shalev · August 23, 2017, 10:14pm

try taking this bit:

import {wixData} from 'wix-data';
export function searchButton_onClick(event) {
	$w("#Classmates").setFilter( wixData.filter()
		.contains("title", $w("#textInput1").value)
	);
}

out of the onReady() function.

in general -

import statements should be at the top of the file
event handlers (such as the onClick above) are separate functions and should be placed outside of the body of other functions.

so your code should look like this:

import {wixData} from 'wix-data'; 

$w.onReady(function () {
	//TODO: write your page related code here...
});

export function searchButton_onClick(event) 
{ 
	$w("#Classmates").setFilter(wixData.filter()
		.contains("title", $w("#textInput1").value)); 
}

sandy-reeder-cureton · August 24, 2017, 1:31am

Ziv, thanks for your reply, I fixed the code. Now it doesn’t get any errors, but does not seem to work.
Also, Sam, if you’re on tonight later, the update page doesn’t work correctly, see earlier post.

Thanks both of you.

For convenience . here is link tothe class search thing…https://www.png68.online/copy-of-class-index-1

here is link to the update page . https://www.png68.online/Classmates/dbailey/Bailey-Fugate .
– Oddly, the URL is not the page which is showing.

sam-wix · August 24, 2017, 4:33am

Hi again Sandy,

I don’t think the update dynamic page was created correctly. Maybe recreating it from scratch will be clearer. (If you think you see where you went wrong you can also edit the settings of the page that you already have.)

When you create the new dynamic page, select Item Page because you only want to update one item at a time.

Then, for the URL, you’ll need to play with it a bit to get it to look like this: Classmates/update/{UserId}.
(The current URL you have, Classmates/dbailey/Bailey-Fugate , indicates that this might be your problem. Seems like you have the page’s URL set to something like: Classmates/{UserId}/{LastName}.) When I say “play with it”, I mean that you can’t just use the Add Field button, you need to get into the text box to enter the update/ and possibly delete a field that is automatically populated there if it isn’t the UserId field.

At this point, just throw on a text input and connect it to one of the fields that identifies a classmate. That will allow you to test the page without designing the whole thing first.

Now, go back to the page with the Update button and connect it using the Connect to Dat a button to link to the new update page. It should be called something like Classmates Update (UserId) .

And test.

sandy-reeder-cureton · August 24, 2017, 7:03pm

Thanks Sam. So, I figured out that when you set up the link to the dynamic dataset via the button, it puts in the URL at the time you create the link. That’s why it was always the same person. and not the one selected.

However, I decided to see if I could just change the view page to R/W and add a submit button and voilla, it works. So now I just need to decide how to go about show/hiding the update button for site members vs others. I think I saw that in one of the examples.

However, next priority is trying to get the code that you suggested to work on the class search page. The code gets no errors, but doesn’t work. https://www.png68.online/copy-of-class-index-1 . Once I get the hang of making the code work, I will try some other coding.