HOW to put javascript in a grid field (facebook share/like/etc)

Scriptcase 8 Discussion
#1

Dear All,

I’d like to add soc.net like/share functionality ti a grid. Theoritically it is simple, add the javascript onRecord event to a text field - but the result is an emtpy column in the grid.
So how to add this

'<script type="text/javascript" src="//platform.linkedin.com/in.js"></script>
<script type="in/share" data-url="www.target.com" data-counter="top"> title="Title"</script>

to a grid column to display it as the button (as it does in a standard html page)

Thank you for the help

Zsolt

#2

Generally I believe you should assign a visual HTML element to the text field e.g. this works (with caveat that there might be better ways to do it):

{butn} = “<button id=“butn_”.strval([rec]).”" type=“button”>Click Me!</button>";
/* here I have in onHeader [rec] = 0; and at start of onRecord [rec] += 1; I’m sure SC has a global variable for current record but I don’t know it. */

This will create button on each row with id of butn_# where # is the row number.

The rest is HTML/ javascript/ jQuery details to do something based on the specific HTML element that’s clicked, identified by the id. A different visual HTML element might be more suitable for the socials.

#3

Hi scriptcaser,
thanks for the hint, I found the other (fb-standard) way, I describe it, unfortunetally it has a some problem, so I leave it open.
So how to implement FB-like in a row of a grid with the link to an url which is a column of the grid (a field, ie. {itemURL}):

1.,generate your own code on developer.facebook.com, it results two part, for me they was (of course appID is a fake one here)
the sdk API:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/hu_HU/sdk.js#xfbml=1&version=v2.4&appId=65465456592311";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

the link itself :

<div class="fb-like" 
        data-href="http://www.your-domain.com/your-page.html" 
        data-layout="standard" 
        data-action="like" 
        data-show-faces="true">
    </div>

2.,
copy the sdk API code (first) into the header of the application (to the html code)

3,. create a text field (ie {fblike} and add the link to the field in the OnRecord, somehow like this

{fblike} = "<div class=\"fb-like\" data-href=\"".{itemURL}."\" data-layout=\"button_count\" data-action=\"like\" data-show-faces=\"true\" data-share=\"true\"></div>";

So it works…on the first, initial page.
When I try to navigate to the next page, this column is empty, and if I go back to the first screen, also empty. Only a browser level refresh reloads again the share and like facebook button.
Please give me some idea, why, and how to solve this problem ?

BR
Zsolt

#4

OK, the reason of the problem is unknown (I think the header is not reloaded during the navigation steps, and the code fills only the first screen’s <div> tags, but maybe not ;o)),
anyhow, a workaround is a simple full page reload ( with sc_redir() ) at OnNavigate event.

#5

[QUOTE=zsimre;39755]OK, the reason of the problem is unknown (I think the header is not reloaded during the navigation steps, and the code fills only the first screen’s <div> tags, but maybe not ;o)),
anyhow, a workaround is a simple full page reload ( with sc_redir() ) at OnNavigate event.[/QUOTE]

You can try either of these to see if it will work without sc_redir/ reload:

option 1: place the header code in onScriptInit

option2:

  • setup the [rec] counter and re-init it to zero in onNavigate (assuming onScriptInit on onAppInit has [rec] = 0;)
  • remove the header code from onHeader and place it in onRecord but wrapped inside if ([rec] == 1) { <insert your code here> }. [rec] += 1; should of course precede this.