Help with passing id variable to JS

How-to Discussions
1

Hello,

I have been stuck on this issue for a couple days now. I’m sure it’s a simple fix but I’m new here. I’m trying to pass an ID variable to my Javascript function when a card in the UI is swiped right. Below is my code but I can’t seem to append the ID to my fetch string. Any help is appreciated!

var Observable = require("FuseJS/Observable");

var data = Observable();
var id = Observable(0);


module.exports = {
data: data,
id: id,
};

function addVote() {
var url = 'http://MY_URL/app/add-vote.php?id='+data.id.value; 
fetch(url, { method: 'POST' })
.then(function (response) {
return response.text(); 
})
.then(function (body) {
console.log(body);
}); 


}

Then the UI:


						<Each Items="{data}">



							<Panel Margin="0" Height="400" Width="293">

								<Rotation Degrees="0" />

								<DockPanel Margin="0" Height="100%" Width="100%">

									<Grid Columns="auto,1*,auto"  Margin="0,14,0,5" Dock="Top">

										<Image ux:Name="visited" File="Assets/icon-up-arrow.png" Margin="10,0,10,0" Opacity="0" Height="40" Alignment="VerticalCenter" /> 

										<StackPanel Alignment="VerticalCenter">
											<Text Value="{title}" FontSize="18" Alignment="Center" Color="#000" />


											<Text Value="{votes} votes - {market}" FontSize="12" Alignment="Center" Color="#c4c4c4" Margin="0,-3,0,10" />

											
										</StackPanel>

										<Image ux:Name="notVisited" File="Assets/icon-skip.png" Margin="10,0,10,0" Opacity="0"  Height="40" Alignment="VerticalCenter" /> 
									</Grid>

									
									<Image ux:Name="notVisitedOverlay" StretchMode="UniformToFill" File="Assets/SkipOverlay.png" Opacity="0" Dock="Fill" />
									<Image ux:Name="visitedOverlay" StretchMode="UniformToFill" File="Assets/VoteOverlay.png" Opacity="0" Dock="Fill" />

									<Rectangle Dock="Fill">
										<ImageFill Url="{image}" StretchMode="UniformToFill" WrapMode="ClampToEdge" />
									</Rectangle>
									

									<Grid Columns="1*,1,1*" Margin="0,0,0,0" Dock="Bottom" Height="55">

										<StackPanel Padding="0,5,1,5" Margin="0,0,1,0">
											<Text FontSize="12" Alignment="Center" Color="#000">SKIP! </Text>
											<Text FontSize="12" Alignment="Center" Color="#c4c4c4">Swipe Left</Text>
										</StackPanel>

										<Rectangle Color="#e5e5e5" />

										<StackPanel Padding="0,5,0,5">
											<Text FontSize="12" Alignment="Center" Color="#000">VOTE UP!</Text>
											<Text FontSize="12" Alignment="Center" Color="#c4c4c4">Swipe Right</Text>
										</StackPanel>

									</Grid>
								</DockPanel>

								<Rectangle Color="White" Margin="0" Height="100%" Width="100%">
									<Shadow Distance="0" Size="2" ux:Name="shadow" />
								</Rectangle>

								<InForceFieldAnimation ForceField="visitedAttractor" From="0.1" To="0.3">
									<Change visited.Opacity="1" Duration="1" />
									<Change visitedOverlay.Opacity="1" Duration="1" />
								</InForceFieldAnimation>

							

						

								<!-- Add Vote -->
								<EnteredForceField ForceField="visitedAttractor" Threshold="0.05" Handler="{addVote}">
								</EnteredForceField>


								<Draggable />

								<WhileDragging>
									<BringToFront />
									<Scale Factor="1.1" Duration="0.5" Easing="BackOut" />
									<Change shadow.Distance="20" Duration="0.5" Easing="BackOut" />
									<Change shadow.Size="20" Duration="0.5" Easing="BackOut" />
								</WhileDragging>

							</Panel>
						</Each>
2

Hi Mike!
I’m no expert either, ux aside, I believe you have some issues in your js. First, you’re handler is calling addVote which isn’t exposed in your module.exports. Additionally, you’ll need to pass args from the ux page to this handler and your function isn’t receiving any. i.e.:

function addVote(args) {..}

also, in your addVote function, you’re referencing data.id.value. You have these defined as separate Observables and not related. Your data Observable, which you are iterating over in your ux doesn’t appear to have any structure – i.e. {title}, {votes}, {image}, etc. Perhaps you’re referencing it elsewhere, but data could be defined as:

var item = Observable({
    id: 0,
    title: "",
    votes: 0,
    image: ""
});

and assuming you have more than one, you would want data to be an array of item objects, then at that point you can reference youritem Observable for the id element as item.value.id. However, getting it from ux to js – I believe you would ref it in your addVote(args){} function as args.data.id. Check out this video: https://youtu.be/qzy4CEtNGo0?t=1877.

I’m sure Uldis will be able to provide better information than I on how to reference data passed from the ux. But the above video has some of that action in it.

And, I believe I recall it being accomplished in the example project in the docs. The Hikes tutorial: https://www.fusetools.com/docs/tutorial/tutorial

Hope this helps!

3

@Darrin is pretty much spot on. The addVote() function should accept arguments, like so: addVote(args), and then the “swiped” item should be present in args.data. Using a separate id variable likely is not needed in this case at all.

That aside, we still need to see a complete reproduction to suggest anything. We don’t see what’s inside data, so we can’t test this code.

4

Thanks guys! Still working on this issue. Below is what’s in my module exports…

 module.exports = {
    data: data,
    id: id,
    reset: reset,
    resetting: resetting,
    addVote: addVote,
};
5

Hey Mike, we still need a complete reproduction that we can copy-paste and run. Otherwise it’s impossible to help.