Refresh a Page with JavaScript

Hey everyone,

Just a quick post on how to force a page refresh with JavaScript (no jQuery required):

location.reload();

Note that the reload function accepts a boolean parameter that can be used for force a server refresh. Alternatively, it just defaults to the cache.

Checkout this Stackoverflow post for more info: http://stackoverflow.com/a/5404869/522859

Detecting File Size with jQuery

Detecting FileSize – jQuery

Hey everyone,

Just a quick post on how to detect a file’s size with jQuery. I’m currently using a version of this for basic client side validation:

<form action="upload" enctype="multipart/form-data" method="post">
 
    Upload image:
    <input id="image-file" type="file" name="file" />
</form>
$(document).ready(function(){
    $('#image-file').bind('change', function() {
 
        var fileSize = this.files && this.files.length > 0 && this.files[0].size ? this.files[0].size / 1024 / 1024 : 0;
 
        if(fileSize > 0){
            $('body').append('<div class="file valid">' + fileSize + ' MB</div>');  
        }
        else{
            $('body').append('<div class="file invalid">' + fileSize + ' MB</div>'); 
        }            
    });
});
.file{
padding: 5px 7px;
border-radius: 3px;
background-color: green;
color: white;
margin: 5px;
}
 
.file.valid{
background-color: rgb(127, 197, 127);
}
 
.file.invalid{
background-color: rgb(197, 127, 127);
}

Here’s the link to the full fiddle: http://jsfiddle.net/nLLMF/

There’re also a whole heap of other options listed on this StackOverflow post if you’re chasing something a bit more robust: http://stackoverflow.com/a/13249924/522859

Request for ConfigurationPermission failed while attempting to access configuration section ‘paypal’ – PayPal & GoDaddy

Hey everyone,

I ran into the following error today while working with PayPal on a GoDaddy hosted server:

Request for ConfigurationPermission failed while attempting to access configuration section ‘paypal’. To allow all callers to access the data for this section, set section attribute ‘requirePermission’ equal ‘false’ in the configuration file where this section is declared.

To fix it, all you need to do is add the requirePermission attribute to the section declaration. Note that this is not where it says paypal but under the configsections heading.

<configSections>
    <!-- here -->
    <section name="paypal" type="PayPal.Manager.SDKConfigHandler, PayPalCoreSDK" requirePermission="false"></section>
</configSections>

My Selling Tools Option Missing – PayPal

Hey everyone,

For some reason the “My Selling Tools” option is now missing on my production account. Unfortunately the only way to get around this that I’ve come across is to access the required features directly. For example:

API Access:
https://www.paypal.com/cgi-bin/customerprofileweb?cmd=_profile-api-access

If you’ve got any other links that might be useful please let me know and I’ll add them.

Rendering a View to a String – Email Templates in MVC4

Hey everyone,

This is just a short post showing how to render views as strings. I’ve used this as a quick way to generate email templates. The logic to render a view as a string is as follows:

public static string RenderRazorViewToString(Controller controller, string viewName, string content)
        {
            controller.ViewBag.Content = content;
 
            using (var sw = new StringWriter())
            {
                var viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
                var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
                viewResult.View.Render(viewContext, sw);
                viewResult.ViewEngine.ReleaseView(controller.ControllerContext, viewResult.View);
 
                return sw.GetStringBuilder().ToString();
            }
        }

The Email Template: Views/Emails/DefaultTemplate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@{
    Layout = null;
}
 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
    <title>Easy Carts</title>
 
</head>
<body bgcolor='#f5f6f7' style='font-family: Arial, Helvetica, sans-serif;'>
 
 
    <!-- Wrapper -->
    <table width='100%' align='center' bgcolor='#f5f6f7' cellpadding='40' style='border-radius:3px;'>
        <tr>
            <td>
                <table width='500px;' align='center' bgcolor='#FFFFFF' cellpadding='15'>
                    <tr>
                        <td style='font-size:13px;' align='left'>                           
                            @ViewBag.Content                            
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr align='center'>
            <td align='center'>
                <a href="http://easycarts.com.au">
                    <img src='http://easycarts.com.au/Images/email-logo.png' />
                </a>
            </td>
        </tr>
    </table>
</body>
</html>

In your controller:

public String TestEmail(String content)
        {
            Email email = new Email() {
                To = "lls@live.com.au",
                From = Email.Fields.From.NoReply,
                Body = content,
                Subject = "Test",
                TemplateName = @"~\Views\Emails\DefaultTemplate.cshtml",
                UseTemplate = true
            };
 
            email.SendEmail(this);
 
            db.Emails.Add(email);
            db.SaveChanges();
 
            return email.Body.ToString();
        }

If you looking to implement this with your emails, note that it builds on top of the email class we created back in this post: http://www.whatibroke.com/?p=963

If you’re just going to be using it directly within the controller, using the original code from over StackOverflow will probably be your best bet: http://stackoverflow.com/a/2759898/522859

Redirect to Root – C# MVC4

Hey everyone,

Just a quick one, how to redirect to root from a controller:

return Redirect(Url.Content("~/"));

For more info, checkout this Stackoverflow post: http://stackoverflow.com/a/10292039/522859

Rails Flash Messages in MVC4

Hey everyone,

Coming from Rails I’d grown quite fond of flash messages. Unfortunately there isn’t a built in way of doing this in MVC4. Luckily, there’s a five minute solution posted on StackOverflow: http://stackoverflow.com/a/11809178/522859

Once implemented, it works just like in Rails:

this.Flash("We need you to login before you can edit anything.", FlashEnum.Warning);

Definitely worth checking out if you’ve got time, even more so if you’ve come over from Rails!

Twitter Bootstrap – Carousel Only CSS

Hey everyone,

I ran into a bit of an issue today with my stylesheet conflicting with Bootstrap. After a bit of tinkering I realised that all I really needed from bootstrap were the Carousel styles. I’ve taken everything else out and included everything that’s left below:

.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 15%;
  opacity: .5;
  filter: alpha(opacity=50);
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
  left: auto;
  right: 0;
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
  outline: none;
  color: #fff;
  text-decoration: none;
  opacity: .9;
  filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  font-family: serif;
}
.carousel-control .icon-prev:before {
  content: '\2039';
}
.carousel-control .icon-next:before {
  content: '\203a';
}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  border: 1px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
  margin: 0;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
}
.carousel-caption {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
  text-shadow: none;
}
@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    font-size: 30px;
  }
  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }
  .carousel-indicators {
    bottom: 20px;
  }
}

Minified:

.carousel{position:relative}.carousel-inner{position:relative;overflow:hidden;width:100%}.carousel-inner>.item{display:none;position:relative;-webkit-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;left:0;bottom:0;width:15%;opacity:.5;filter:alpha(opacity=50);font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-control.left{background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.5)0),color-stop(rgba(0,0,0,.0001)100%));background-image:linear-gradient(to right,rgba(0,0,0,.5)0,rgba(0,0,0,.0001)100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)}.carousel-control.right{left:auto;right:0;background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.0001)0),color-stop(rgba(0,0,0,.5)100%));background-image:linear-gradient(to right,rgba(0,0,0,.0001)0,rgba(0,0,0,.5)100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)}.carousel-control:focus,.carousel-control:hover{outline:0;color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;margin-left:-10px;font-family:serif}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;margin-left:-30%;padding-left:0;list-style:none;text-align:center}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;border:1px solid #fff;border-radius:10px;cursor:pointer;background-color:#000 \9;background-color:rgba(0,0,0,0)}.carousel-indicators .active{margin:0;width:12px;height:12px;background-color:#fff}.carousel-caption{position:absolute;left:15%;right:15%;bottom:20px;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;margin-left:-15px;font-size:30px}.carousel-caption{left:20%;right:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}

Let me know if you have any other issues.

How to Get a JavaScript Stack Trace – Chrome Console

Hey everyone,

Just a quick post on something useful I came across today. In JavaScript you can access the stack trace via console using the following command (ctrl + shift + j):

console.trace()

In Chrome, this will let you navigate to each relevant call by clicking the line number in the console window. I’ve found it pretty useful for backtracking through jQuery exceptions.

For more info, check out this Stackoverflow post: http://stackoverflow.com/q/6715571/522859

Chrome Replacing Strings with Ellipses – Chrome Console

Hey everyone,

Ran into a bit of an issue today where a url was being shortened in Chrome’s console. It turns out that there’s a quick command you can use to copy the full value:

1
copy(myVariable)

Type copy into the console window and pass the variable you want to copy as a parameter. This will then be saved to your clipboard for pasting.

Check out this Stackoverflow post for more info: http://stackoverflow.com/a/19184513/522859