Generate bitly link on the fly with ajax

[ontarget]

Hi I have created a complex form which passes data into a URL - the generated URL is very long but can be shortened nicely with bitly.
I have tried the link element for fabrik and it too creates the bitly link very nicely however only on form submission.
Is there any method of generating the link on the fly with ajax? as ideally i dont want to store these urls in a DB.
I tried using the calc element but it outputs the full link as opposed to the bitly link
Appreciate any suggestions

 

[ontarget]

Also if anyone wishes to hide the label field entry it can be done with css

input.form-control.fabrikinput.inputbox.fabrikSubElement[name="aaa_claim_links___lank[label]"] {display: none;!important}

 

[cheesegrits]

It's possible to do it directly in JavaScript, but really not a good idea, as it means exposing your API key.

So the only safe way to do it in the page would be to roll your own AJAX call to do it, so the bitly call is done on the server side. Create a ./components/com_fabrik/user_ajax.php file thusly:

<?php
defined('_JEXEC') or die('Restricted access');

class UserAjax
{
   public function bitlify() {
      $url = JFactory::getApplication()->input->get('link', '');
      // don't try and shorten it if it's already shortened (will throw an error) or empty
      if (!strstr($url, 'bit.ly/') && $url !== '')
      {
         // instantiate the bitly class ...
         require_once JPATH_SITE . '/components/com_fabrik/libs/bitly/bitly.php';
         $bitly = new bitly('your-bitly-login', 'your-bitly-key');
         // encode the url (I think ... may not need to do this if it's still encoded from the call
         $url = FabrikString::encodeurl($url);
         // bitlify it
         $url = (string) $bitly->shorten($url);
      }
      echo $url;
   }
}

Then call that with some code in a ./components/com_fabrik/js/form_X.js file (X is numeric form ID) ...

function bitlify(el) {
     var link = el.getValue();
     link = encodeURIComponent(link);
     var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=bitlify&link=" + link;
     new Request({url:url,
        onComplete: function(bitlified) {
            if (bitlified != '') {
                el.update(bitlified);
            }
        }
     }).send();
}

... and trigger that with a 'change' Javascript event on your element which has the link in it, which does ...

bitlify(this);

That should work for a simple field element. If you are using a link element, you'd have to be a bit more creative with the values, as I think you'd need to deal with JSON that has link and label.

-- hugh

 

[ontarget]

Hi Hugh
Thanks for your help on this and apologies for the slow response - I tried to implement this but didn't manage it - would you mind please clarifying these points and hopefully I can get this working!

1. Should 'link' refer to my fabrik element named '___link' (the value of which is not being stored in a database)?

 $url= JFactory::getApplication()->input->get('link','');

2. I have seen in other posts that the js file should be named e.g 1.js - did you mean, that or is form_1.js correct?

Then call that with some code in a ./components/com_fabrik/js/form_X.js file (X is numeric form ID) ...

3. My link is currently being generated in a calc element using a textarea as shown below -
I'm wondering how to trigger that form_1.js file with an onchange event on the element - I saw this
http://stackoverflow.com/questions/...t-after-onchange-event-of-input-file-in-html5
but not sure if that is the correct method with Fabrik

return '<h3>HERE IS THE LINK BEING GENERATED!</h3>

<textarea id="input" rows="5" cols="100">http://xxxxxxx.eu/xxxx/index.php?option=com_fabrik&view=form&formid=1&aaa_participant_claim___category=' . '{___category_raw}' . '&aaa_participant_claim___course_title=' . '{___course_title}' . '&aaa_participant_claim___course_code=' . '{___enter_course_code}' . '&aaa_participant_claim___venue=' . '{___venue_education_centre}' . '{___venue_other}' . '&aaa_participant_claim___course_start_date=' . '{___enter_course_date}' . '&aaa_participant_claim___claim_process=' . '{___edcentre_email}' . '&aaa_participant_claim___edcentre_id=' . '{___edcentreid}</textarea>';

 

[cheesegrits]

If you are already using a calc element with Ajax to generate the link, why not just bitlify it in that code?

Sent from my HTC6545LVW using Tapatalk

 

[ontarget]

Hi Hugh thanks
I have tried the following but unfortunately on submit it doesn't show the bitly code instead gives the fabrik message

Message
Record added/updated

Calc element > More

return '<h3>HERE IS THE LINK BEING AUTOMAGICALLY GENERATED!</h3>

<input type="text" name="url" id="url" value="http://xxxxxxxx.eu/teacherclaims/index.php?option=com_fabrik&view=form&formid=1&aaa_participant_claim___category=' . '{___category_raw}' . '&aaa_participant_claim___course_title=' . '{___course_title}' . '&aaa_participant_claim___course_code=' . '{___enter_course_code}' . '&aaa_participant_claim___applysess=' . '{___apply_sess}' . '&aaa_participant_claim___venue=' . '{___venue_education_centre}' . '{___venue_other}' . '&aaa_participant_claim___course_start_date=' . '{___enter_course_date}' . '&aaa_participant_claim___claim_process=' . '{___edcentre_email}' . '&aaa_participant_claim___edcentre_id=' . '{___edcentreid}"/>

<input type="submit" id="short" value="Submit"/>
<div id="result"></div>';

Javascript

$(document).ready(function()
{

/*bit_url function*/
function bit_url(url)
{
var url=url;
var username="xxxxxx";
var key="xxxxxxxxxxx";
$.ajax({
url:"http://api.bit.ly/v3/shorten",
data:{longUrl:url,apiKey:key,login:username},
dataType:"jsonp",
success:function(v)
{
var bit_url=v.data.url;
$("#result").html('<a href="'+bit_url+'" target="_blank">'+bit_url+'</a>');
}
});
}


$("#short").click(function()
{
var url=$("#url").val();
var urlRegex = '/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig';
var urltest=urlRegex.test(url);
if(urltest)
{
bit_url(url);
}
else
{
alert("Bad URL");
}
});

});

Any ideas why it wont load the bitly link in the div? I am basing my code on this tutorial
http://www.9lessons.info/2010/08/create-bitly-short-urls-using-jquery.html

 

[cheesegrits]

As I said in my first response, don't do it in Javascript as this means exposing your bitly API key to the world. Which then gets used by (say) child pornographers to process their links.

What I meant was, do it in the PHP calc code where you build the link. Just grab the guts of the PHP I have you earlier (from "instantiate the bitly class"), and use it to include a bitlified link in the return from the calc.

-- hugh

 

[ontarget]

Awesome thanks for pointing me in the right direction - i will give that a lash and report back!

 

[ontarget]

Hi Hugh thaks so much for your help so far I got this working - here is the code I used in a calc element

$fullUrl = 'http://myurl.com/index.php?option=com_fabrik&view=form&formid=1&aaa_participant_claim___category=' . '{___category_raw}' . '&aaa_participant_claim___course_title=' . '{___course_title}' . '&aaa_participant_claim___course_code=' . '{___enter_course_code}' . '&aaa_participant_claim___applysess=' . '{___apply_sess}' . '&aaa_participant_claim___venue=' . '{___venue_education_centre}' . '{___venue_other}' . '&aaa_participant_claim___course_start_date=' . '{___enter_course_date}' . '&aaa_participant_claim___claim_process=' . '{___edcentre_email}' . '&aaa_participant_claim___edcentre_id=' . '{___edcentreid}';



require_once JPATH_SITE . '/components/com_fabrik/libs/bitly/bitly.php';
         $bitly = new bitly('username', 'my-api-number');
        
         // bitlify it
         $url = (string) $bitly->shorten($fullUrl);
        
         return $url;

To prevent a bitly link being generated for every form field change i set:
Only Calc on Save = Yes
Then in the Form i set a redirect plugin with a success message set to

<p>Here is your shortened URL: </p>
<h2><a href="{___bitlyfi}">{___bitlyfi}</a></h2>

 

[cheesegrits]

Yay!

-- hugh