WEBVTT 00:00:07.290 --> 00:00:19.410 Okay now we are going to see how to use or how to store some data inside a button and then we'll use 00:00:19.500 --> 00:00:24.370 that data to change the contents of our model. 00:00:24.530 --> 00:00:25.170 OK. 00:00:25.560 --> 00:00:26.400 So let's 00:00:29.490 --> 00:00:39.090 let's add some data to this button so we can do that by adding another attributes 00:00:41.790 --> 00:00:43.870 to the button. 00:00:44.860 --> 00:00:52.840 Ok so for example let's call this post and contact us for a specific order number. 00:00:53.150 --> 00:01:03.800 So let's say Order Number 1 1 to 2. 00:01:05.890 --> 00:01:09.430 OK. 00:01:11.610 --> 00:01:14.330 You can have a few other buttons if you want to. 00:01:14.510 --> 00:01:20.790 But what we try to do here is we don't try to do something specific to this puzzle that based on some 00:01:20.790 --> 00:01:23.350 data stored inside this puzzle. 00:01:23.540 --> 00:01:26.120 So we're going to add another data attribute to this puzzle. 00:01:26.560 --> 00:01:27.720 OK. 00:01:28.080 --> 00:01:29.100 So are you going to call it 00:01:33.450 --> 00:01:36.410 data minus sign something so let's call it. 00:01:36.450 --> 00:01:39.360 Or the example. 00:01:40.110 --> 00:01:40.660 OK. 00:01:40.740 --> 00:01:43.060 Make sure that all letters are Wallaces. 00:01:43.090 --> 00:01:45.380 No no capital letters Okay. 00:01:45.490 --> 00:01:48.690 And we can say that to any volume we want. 00:01:48.690 --> 00:01:51.770 So let's say that's a 1 1 to 2. 00:01:53.060 --> 00:01:54.090 OK. 00:01:54.280 --> 00:02:00.310 Now we're going to write some code so that's when we open the model. 00:02:00.390 --> 00:02:02.790 The header is changed. 00:02:03.030 --> 00:02:10.950 So we want to see rather than the sticks we see order number followed by the order number stored in 00:02:10.950 --> 00:02:11.630 the bottom. 00:02:11.920 --> 00:02:12.910 OK. 00:02:13.050 --> 00:02:16.110 Which is 1 1 2 2. 00:02:16.890 --> 00:02:18.250 So let's go ahead and do that. 00:02:18.390 --> 00:02:19.740 So first we're going to access 00:02:22.320 --> 00:02:29.970 the model using its ID my inquiry. 00:02:31.380 --> 00:02:35.560 OK I'm going to use the on method. 00:02:36.330 --> 00:02:52.120 So the events this time is going to be show vs model and the function this time is going to take a a 00:02:52.200 --> 00:02:55.450 barometer and we're going to use the event object. 00:02:56.490 --> 00:03:02.460 OK so first let's 00:03:09.210 --> 00:03:16.860 create a variable button where we store the button that triggered the model. 00:03:17.250 --> 00:03:19.170 So to do that we're going to select 00:03:21.750 --> 00:03:25.580 events box related targets. 00:03:25.910 --> 00:03:26.500 OK. 00:03:26.610 --> 00:03:33.900 So this is going to be the button that's triggered the model in our case it's this puzzle. 00:03:34.290 --> 00:03:35.340 OK. 00:03:36.100 --> 00:03:37.020 OK fine. 00:03:37.110 --> 00:03:39.910 Now let's create another variable. 00:03:40.200 --> 00:03:46.680 So we want the order number which is stored inside the button. 00:03:47.100 --> 00:03:47.990 OK. 00:03:48.000 --> 00:03:56.820 So are going to do let's call this variable order number and to access this one 00:04:00.480 --> 00:04:07.990 we get a corporate copy this and we get to go to this button OK which is this one 00:04:10.770 --> 00:04:15.420 and we're going to use data. 00:04:15.420 --> 00:04:21.270 The basic function as a parameter we're right order number. 00:04:21.420 --> 00:04:25.850 OK. 00:04:25.860 --> 00:04:28.390 All right. 00:04:30.110 --> 00:04:31.740 OK right now let's 00:04:34.430 --> 00:04:39.800 update the the models content. 00:04:40.170 --> 00:04:41.300 OK. 00:04:41.730 --> 00:04:48.860 Before we do that let's just send an alert message to make sure that our variable is correct. 00:04:48.900 --> 00:04:52.970 So let's just sent a message when it's 00:04:56.870 --> 00:05:01.870 on and I'm just to make sure it is working. 00:05:02.490 --> 00:05:06.380 It's working so we can see the when 1 to 2 to find. 00:05:06.720 --> 00:05:13.930 OK so now let's use this variable to change the contents of the head. 00:05:15.700 --> 00:05:25.740 So OK so we'll need two to select first the the model. 00:05:26.220 --> 00:05:26.490 OK 00:05:26.680 --> 00:05:32.640 . 00:05:33.300 --> 00:05:35.100 Using this. 00:05:35.110 --> 00:05:36.660 And we'll find 00:05:42.210 --> 00:05:46.940 the elements of ID. 00:05:47.530 --> 00:05:50.630 So we're looking here at the header. 00:05:50.730 --> 00:05:59.460 So the head of ID my model number we're going to select the elements of ID my model number. 00:06:01.000 --> 00:06:04.530 OK I will label sorry. 00:06:04.860 --> 00:06:08.490 And we're going to change the text. 00:06:10.060 --> 00:06:22.450 Ok to order number k plus the order of the variable. 00:06:22.980 --> 00:06:26.550 Ok so let's try and make sure it's working with the save. 00:06:26.730 --> 00:06:28.100 Refresh the page. 00:06:28.360 --> 00:06:30.280 And if you join now we can see that. 00:06:30.300 --> 00:06:32.250 So order of 1 1 to 2. 00:06:32.440 --> 00:06:33.180 OK. 00:06:33.240 --> 00:06:36.210 So you can try to add a couple of other buttons on your own. 00:06:36.490 --> 00:06:41.750 Each person you can have a different order number and use that specific order number in the button. 00:06:41.880 --> 00:06:47.820 And whenever you click on one of these buttons you can see a different model where it with a different 00:06:47.820 --> 00:06:49.260 header showing up OK 00:06:49.280 --> 00:06:57.170 .