Tag: link

Forcing a Link to Behave Normally – AngularJS

Hey everyone,

Another quick post. Working with AngularJS this morning I had a need for a link to redirect to a login page that was not contained within the “angular” part of the app. Unfortunately Angular was overriding the behavior and trying to route it.

The solution is fairly easy for this, simply add a target attribute:



Sign In


Sign In

There are a few other solutions depending on your use case, check out the following StackOverflow post for more info: http://stackoverflow.com/a/16838013/522859

Stop a Link from Going Anywhere – CSS/JavaScript

Hey everyone,

Another quick one – how to stop a link from doing anything. I’ve just come across a need to use a link that acts as a button. A slight UI issue with this is that clicking a hyperlink will with an href value of ‘#’ will push scroll to the top of the page.

There are a couple of ways to go about fixing this. Note the href value in the following:

<a href='javascript:void(0)' class='btn_show_reply' data-comment_id="">Reply

The second option is probably already familiar to anyone using ajax forms, simply have your function return false:

<a href='javascript:void(0)' onClick='myFunction()' id='my_awesome_link' data-comment_id="">Reply


function myFunction(){

   //Do some awesome stuff
   // ...

   //Return false to prevent link from affecting anything
   return false;
}

The third option is simply a jQuery-ish rehash of number 2:



/* Does some awesome stuff while preventing the calling link from directing the user */
$('#my_awesome_link').click(function(e) {

   //Do some awesome stuff and then prevent the link from directing user
   e.preventDefault();
});

How to Reset ID of an Element – jQuery

Hey All,

Just a quick post on how to set the ID of an element (in this case a div) with jQuery. I needed to use this to dynamically clone elements.




     WOOOOOOOOOOOOW




     $('#my_test_id').attr('id', 'my_new_id');

The script above sets the id of div to my_new_id. If you’re interested, there’s a whole heap of documentation on the jquery site:
– Attr: http://api.jquery.com/attr/
– Clone: http://api.jquery.com/clone/

Allow HTML String – Ruby on Rails

Just a quick post on how to prevent escaping for HTML within a string. Simply use html_safe?.

i.e. The following will show the bold tags as text:

<%= "GOOOOOOOGLE">

<b>GOOOOOOOGLE</b>

Whereas once we add html_safe the text will be displayed in bold:

<%= ("GOOOOOOOGLE").html_safe?>

GOOOOOOOGLE

Flash Notice Appearing Twice – Ruby on Rails

Ran into another flash notice issue, my messages were not disappearing after the first view. My code was as follows:

#Create flash warning
flash[:warning] = ("This product has been replaced: " +new_product.title + "").html_safe

It turns out that all you have to do to fix this issue is the following:

flash.now[:warning] = ("This product has been replaced: " +new_product.title + "").html_safe

This blog gives a brief overview of when to use flash.now[notice] and when to use flash[:notice]. A basic rule of thumb is that if you’re using a redirect, use flash[:notice], if you’re simply rendering a view, use flash.now[:notice].

Adding a Link Within a Flash Notice/Message – Ruby on Rails

I came across an instance where I needed to add a link to flash notice tonight. Manually creating a hyperlink seems to work fine, however I was chasing a rubyish way of doing things:

flash[:notice] = "Order created - Click here to pay for it!"

 

Luckily a quick Google revealed the answer:

flash[:notice] = "Order created - Click here to pay for it!".html_safe

 

If you’re using rails 3 make sure you throw in the .html_safe or your link will be appear as plain text. Just a quick screenshot of the end result below:

Anyway, that’s all. Good Luck!