Announcement

Collapse
No announcement yet.

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

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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
    Code:
    '<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.

    Comment


    • #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:
      Code:
      <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 :
      Code:
      <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
      Code:
      {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

      Comment


      • #4
        Originally posted by zsimre View Post
        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.
        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.

        Comment


        • #5
          Originally posted by zsimre View Post
          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.
          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.

          Comment

          Working...
          X