In DashCode, how to access the dataArray from an onClick handler - javascript

I have a list that is automatically populated from an XML DataSource using bindings.
Each XML record contains a title, a description and a URL
Each UI row contains a title and a description.
When onclick is called on the title, I would like to call the openURL with the URL specified in the DataSource.
Is it possible to identify the current selection and navigate in the datamodel from the onclickHandler?

In a Dashcode project I'm working on right now I have a datasource that includes a URL to the product on Amazon.com. I haven't done this from the list view, but from my detail view I created a link to the Amazon page for the currently displayed product.
On the detail layout the URL field is transformed to be:
"Click here to purchase the product on Amazon.com."
And the word here is a standard html link.
I used a Value Transformer to do this. In my data source the URL field contains a fully qualified URL to the product on Amazon.com. So where you see "value" in the code below Dashcode is replacing that with a URL in the HTML code that is then included in the page.
myBuildAmazon = Class.create(DC.ValueTransformer,{
transformedValue: function(value){
// Insert Code Here
value="Click <a href="+value+" target='_blank' >here</a> to purchase the product on Amazon.com.";
return value;
}
});
One important thing is that when you bind the datasource to the field select HTML from the popup menu that comes up rather than Text.
I hope this helps.

Related

Javascript function to pass product ID into Facebook pixel event

I'm trying to get the dynamic retargeting ads on Facebook working. I need to pass the product ID value into the "add to cart" pixel event to properly associate relevant products in the ads.
On the product pages, the ID appears in the URL, so I created a variable to pull the ID using this:
function () {
var urlPart = document.location.pathname.split('/')[3];
return urlPart;
}
However, for the "add to cart" event, the product ID is only available in the link.
Example:
Add to Cart
Where "AA1257" is the product ID.
So my question is, how can I create a variable in Google Tag Manager that pulls that product ID value from the href? I'm a complete .js noob so go easy on me :)
I tried creating something like this to pull the href but I'm lost after that...
<script>
function myFunction() {
var x = document.getElementsByClassName("btn-add-cart").getAttribute("href");
}
</script>
I gather you need the product ID when the add to cart button is clicked, so you do not need custom HTML to get the href - if you have enabled the built-in click variables GTM will give you this for free as {{Click URL}} (if the links includes any markup, like span-elements around the text, you should use a "just links" click trigger else this might not work).
Like before you can then split the variable and get the last element:
elementAfterLastSlash = {{Click URL}}.split("/").pop();
(split creates an array by delimiter, pop removes and returns the last element).

Generate Dynamic HTML page based on clicks in Flask

I have multiple links in table. Each row represents a link. I want to redirect the link into another page for its description. To implement it, I want to use a common template where based on the clicked link, dynamically the HTML page will be filled with the information. The url needs to be dynamic too, appended by the clicked value. All these needs to be implemented in flask framework.
Eg: http://bearch.herokuapp.com/query
Whenever I click more, it should redirect to another HTML page which should be dynamic, instead of hardcoded as in case of http://bearch.herokuapp.com/100YearsofSolitude
All clicks should send a request and response from the server should be dynamic HTML page based on the clicked link. The url should also be generated based on the clicked link.
you can embed the item identifier in links
item 1
and in route you can extract the identifier
#app.route('/items/<item_identifier>')
def show_item_info(item_identifier):
print item_identfier
# query the db for item and assign it item
# pass the item to template
return render_template('item.html',item=item)
here item.html is the generic template for each item and you can now render it by template expressions ex {{ item.description }}

how to append the element by id from different html pages in javascript

I am having one html page for recommendation.
In this page I have different buttons like choose contact, choose merchant. In choose merchant button, I have one textbox, after clicking on the button I will navigate to the page which contains the list of merchants.
After clicking on merchant name, that merchant name should displayed in textbox of recommend.html (first html page), but its not possible as the textbox id belongs to different html page and that merchant name id belongs to different html page.
I m able to append that merchant name to the same html page of choose merchant but can't append it to the recommend.html..anybody knows solution for this,..?
In a simple code example, using HTML5's session storage,
On your merchant list page, before bouncing back to the recommendation page, set the session storage item when the merchant is selected:
sessionStorage.setItem("selectedMerchant", "merchant_name");
On the recommendation page, read the item and display recommendations based on the selected merchant name:
var selectedMerchant = "";
if ( sessionStorage.getItem("selectedMerchant") ) {
selectedMerchant = sessionStorage.getItem("selectedMerchant");
}
Of course, you will need to handle various conditions, such as clearing the selected merchant names and validating the values, etc.
Check out the link below for more references:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
You need to generate that html code and have to pass it in that page using jquery
For example if that element is like "#merchant" and generated html is like $("") then append it to selected element using insertAfter or appendTo
When you click on second.html (where ever merchant name exists), you need to submit a html form with action attribute to recommend.html and pass the merchant name as a hidden input type .
Then from second.html, you can access the POST parameters and display it in your text box.
Basically you need to have some server side coding (JSP/PHP/PERL etc)

Create dynamic url from user input

I am running a blog: http://jokesofindia.blogspot.com. I want to provide a dynamic link in the sidebar of my blog to download a Hindi newspaper in pdf format.
I tried to view source url of epaper.patrika.com and found that if I enter the url epaper.patrika.com/pdf/get/145635/1 it will download the first page and epaper.patrika.com/pdf/get/145635/2 it will download second page, and so on.
The last part of url is the page number. But the second to last part of the url, '145635', changes every day. Now I want to be able to enter this changing part of url manually every day and then have the JavaScript generate download links with the date replaced by the information I entered.
This code also needs to work on mobile devices such as Android.
You can use the html5 data object to store the data and use JS to get that data and append it to the link:
HTML
<div class="linkholder" data-number="12345">
PDF page 1
PDF page 2
</div>
JS
$(document).ready(function() {
var newNum = $('.linkholder').attr('data-number');
$('.linkholder a').each(function() {
var newLink = $(this).attr('href').replace('#', newNum);
$(this).attr('href',newLink);
});
});
view the CodePen to see it in action.

Facebook Like button for every item?

I have Facebook iframe app where I am pulling content with JSON and representing it in a list with search criteria.
On item click new content shows on the same page (using ajax), and that page shows more info about item. I want to add a LIKE button for every clicked item.
But it must be a different URL so I can publish it on my FB wall. So when I check link from Like button on wall, it will redirect me on that special item.
Here are few issues:
1) How to define Like button for every item?
<div class="fb-like" data-href="LINK FOR LIKE BUTTON" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>
Here is LIKE button, I need to specify different data-href for every item.
2) I need to send some parameters to url. Let's say when clicking on item, I should send item id to URL. Right now I can send item id to my URL but it is doing just in my iframe -- not in facebook URL. How can I do this?
I think second problem would give an answer for my first problem.
Edit: I am doing this using jQuery.
edit2:
so, i am using jquery for my site, pulling content with JSON and representing it with html and jquery, i have, it is all the same page, but on click i hide some contents and show another, so my main content is a list of items, click on item i hide main content, and i show item info content
so, it is all one page, so it has the same URL (main content, item content,... all the same URL)
so for adding LIKE buttons for every item, i need to make a difference between those items, so i done this
'window.location.href=window.location.href + "#id=" + propertyid;'
so right now, every item has its own URL, which i done manually, so right now every item has own URL which i could use for LIKE button
but, when i alert this new window.location.href is seems all right, i get this new location with #id=12345 included, but when i try to send that location to LIKE button data-href it is always just the main location, without this new part includind item id #id=12345
Yes, you can create FB Like buttons for "items" shown on dynamically created screen content (eg Ajax popups).
Issues:
Individual item urls
FB demands a "social graph endpoint" for each item that can be liked. So you also need to support a url which returns only the "item." This is the url for the individual item. It is also the url that a FB viewer will click on if they want to find out more about the item.
Example: a page shows a list of articles. There is an individual Like button next to each article. When a person "Likes" article B, it is shown in their FB stream. When they click on "Article B" in the stream, it should go to a page that only shows article B.
Also, the url for just article B will be queried by Facebook to obtain the FB meta headers for the individual item (image, classification, etc).
Parsing the new dom for FB items Depending on which method you use for adding FB like buttons et al, you may need to tell FB to explicitly (re-)parse the new parts of the dom that you just added dynamic content to. (Your pop-up.)
Since you know the element that you added the popup to, there is no need to tell FB to reparse your entire dom. Tell them to parse starting at the beginning of your newly added/changed element:
Code I use:
if (event_data) { // event_data was received, show it
panel.setBody(event_data); // set the pop-up's body
if (!this.ie && typeof(FB) != "undefined" && FB.XFBML)
{FB.XFBML.parse(this.panel_el);} // Parse FaceBook markup
....
Docs from FB on this:
http://developers.facebook.com/docs/reference/plugins/like/
http://developers.facebook.com/docs/opengraph/
http://ogp.me/ # FB site about "Open Graph Protocol"
Place this in a for loop, and you should be fine.
var elements = $("#divId").html();
$("#divId").html(elements + "like button code");
$("#divId.fb-like").attr("data-href", "what you want to link to");
See .html() and .attr() specs.

Categories

Resources