Javascript Error: Dialog Box Class for Button

Here is the pesky little debugger error I was receiving in IE:

JavaScript critical error at line 71, column 21 in http://blalblah/file.js

SCRIPT1028: Expected identifier, string or number

The good thing is I found the answer on the internet pretty quickly, and thought I would post for future reference.

Here was the problem line:

class: 'btn btn-primary',

text: 'Submit'

Guess, class is a keyword, so you have to enclose it like so:

'class': 'btn btn-primary',

text: 'Submit'

Hope that helps!

Jquery-Chosen-Knockout in a Dialog or Window Not Working?

If you are loading a Chosen element in a pop-up dialog box or window, you may find that the "multiple" types or "multiselect" type of element does NOT display the selectedOptions that you specified on the data-bind. You need to trigger an update by passing a reference of window to the open function.

This was the template that was loaded into the dialog window (located in a .cshtml file):

pop-uptext

<script type="text/html" id="junk-template">    
    <div>
        <!--set tabindex of dropdown to prevent from auto opening when editing-->
        <select id="myItems" tabindex="-1" data-placeholder=" " data-bind="chosen: MyOptions, optionsText: 'Text', optionsValue: 'Value', selectedOptions: MySelectedOptions" multiple="multiple"></select>        
    </div>
</script>

<script type="text/html" id="junk-template">    
    <div>
        <!--set tabindex of dropdown to prevent from auto opening when editing-->
        <select id="myItems" tabindex="-1" data-placeholder=" " data-bind="chosen: MyOptions, optionsText: 'Text', optionsValue: 'Value', selectedOptions: MySelectedOptions" multiple="multiple"></select>        
    </div>
</script>

This is the code in the Javascript file to load, data-bind and open the window. NOTICE 2 things, you must use the z-index and pass the window by reference to the open function. In order to resolve issues with chosen in a popup window the z-index must be set.

pop-uptext

function _openMyWindow(myOptions) {
        var selectedOptions = _getOptions();
        $window = $("<div/>");
        $window.append($('#junk-template').html());
         if (!myVM) {
            myVM = {
            
                MyOptions: ko.observableArray(myOptions),
                MySelectedOptions: ko.observableArray(selectedOptions != undefined ? selectedOptions : [])
            }
        }
        
        ko.applyBindings(myVM, $window[0]);
        
        $window.Window({
            width: '450px', height: 'auto', modal: true, zIndex: 998, maximizable: false, open: _openWindow($window), title: "Junk Title"
        });
    }

function _openMyWindow(myOptions) {
        var selectedOptions = _getOptions();

        $window = $("<div/>");
        $window.append($('#junk-template').html());

         if (!myVM) {
            myVM = {
            
                MyOptions: ko.observableArray(myOptions),
                MySelectedOptions: ko.observableArray(selectedOptions != undefined ? selectedOptions : [])
            }
        }
        
        ko.applyBindings(myVM, $window[0]);
        
        $window.Window({
            width: '450px', height: 'auto', modal: true, zIndex: 998, maximizable: false, open: _openWindow($window), title: "Junk Title"
        });
    }

Now, pay attention here, see I am using the window reference to trigger the chosen element update!

pop-uptext

function _openWindow(container) {
               
        var element = $(container).find('#myItems');
        
        if (element != null) {
            element.trigger("chosen:updated");
        }
}    

function _openWindow(container) {
               
        var element = $(container).find('#myItems');
        

        if (element != null) {
            element.trigger("chosen:updated");
        }

}    

Hope you could follow that and I hope it helps!

PHP SMTP GoDaddy Email Alternative: SendGrid

If you have ever worked with GoDaddy's SMTP relay email service, you will find it sometimes just quits working. I know GoDaddy is not about being a reliable company known for quality so it very silly of me to complain. However, I kind of need to send out emails from a website as needed, NOT just when GoDaddy thinks it is needed.

I finally was fed up with this terrible service. And Gmail, which I was trying to use as an alternative, just up and deleted my email account for whatever reason, so I searched out an alternative. I found SendGrid. For a basic 'FREE' account, I can send up to 200 emails per day. Which is definitely good enough for me - I am not sending spam, I am sending out an occasional newsletter to a subscribed membership!

For PHP, you need at least 5.3, I believe. You can download their code package to use or replace your SMTP credentials.

Here is a sample using their code package:

pop-uptext

include('sendgrid-php/sendgrid-php.php');
function sendEmailSendGrid($subject, $message, $to, $fileName){
         
     $sendgrid = new SendGrid('myusername', 'mypassword');
     $to = trim($to);
     $htmlMessage = "<html><body>".$message."</body></html>";
     $from='junk@junk.com';
     
     $email = new SendGrid\Email();
     $email->addTo($to)->    
       setFrom($from)->
       setSubject($subject)->
       setText($message)->
       setHtml($htmlMessage);
       
     if($fileName != "")
           $email->addAttachment($fileName);
       
               
     return $sendgrid->send($email);
     
}

include('sendgrid-php/sendgrid-php.php');

function sendEmailSendGrid($subject, $message, $to, $fileName){
   
  $sendgrid = new SendGrid('myusername', 'mypassword');
  $to = trim($to);
  $htmlMessage = "<html><body>".$message."</body></html>";
  $from='junk@junk.com';
  
  $email = new SendGrid\Email();
  $email->addTo($to)->    
       setFrom($from)->
       setSubject($subject)->
       setText($message)->
       setHtml($htmlMessage);
       
     if($fileName != "")
        $email->addAttachment($fileName);
       
            
     return $sendgrid->send($email);
  
}

Otherwise replace your SMTP stuff like this:

pop-uptext

function sendEmailSendGrid($subject, $message, $to, $rid, $nid){
    
     $to = trim($to);
     
     $htmlMessage = "<html><body>".$message."</body></html>";
     
     $host = "smtp.sendgrid.net";
     $port = "587";
     $username = "username"; 
     $password = "password";
    
     $crlf = "\n";
     
     $smtp = Mail::factory('smtp',
          array ('host' => $host,
            'port' => $port,
            'auth' => true,
            'username' => $username,
            'password' => $password));
                     
     $from='junk@junk.com';
                  
    $headers = array ('From' => $from,
          'To' => $to,
          'Subject' => $subject,
          'Content-type' => 'text/html; charset=iso-8859-1');
          
    $mail = $smtp->send($to, $headers, $htmlMessage);
    if (PEAR::isError($mail)) {
         echo("<p>" . $mail->getMessage() . "</p>");
    } else {
         echo("<p>Message successfully sent to: ".$to."</p>");
    }
}

function sendEmailSendGrid($subject, $message, $to, $rid, $nid){
 
  $to = trim($to);
  
  $htmlMessage = "<html><body>".$message."</body></html>";
  
  $host = "smtp.sendgrid.net";
     $port = "587";
     $username = "username"; 
     $password = "password";
    
     $crlf = "\n";
  
     $smtp = Mail::factory('smtp',
          array ('host' => $host,
            'port' => $port,
            'auth' => true,
            'username' => $username,
            'password' => $password));
               
  $from='junk@junk.com';
      
    $headers = array ('From' => $from,
          'To' => $to,
          'Subject' => $subject,
          'Content-type' => 'text/html; charset=iso-8859-1');
          
    $mail = $smtp->send($to, $headers, $htmlMessage);

    if (PEAR::isError($mail)) {
         echo("<p>" . $mail->getMessage() . "</p>");
    } else {
         echo("<p>Message successfully sent to: ".$to."</p>");
    }
}

Kendo Multiselect, Calendars, Select disappearing! FireFox Conflict?

I have been haunted for months, or apparently at least since FireFox 28 came out, with a Kendo control bug. The bug manifested itself in the Kendo DatePicker, Select and MultiSelect. The problem was the control would only briefly open and then close. Of course, this is an issue when a user is trying to select something from a list...

The bug only appeared in FireFox and not every instance of a Kendo control was plagued with the bug. Sometimes it worked just fine. I suspect there was some sort of a conflict with Kendo/Knockout/Jquery. Who knows?? But for months I have been dealing with converting each control back to regular ASP/MVC Controls or Jquery Calendars or Chosen multiselects. It is a very time consuming process since the application had hundreds of controls and each had different code to support it.

However, today, I found I was unable to fix a multi-select because it was contained in a Kendo window so it was being forced to be a Kendo control --- not a Chosen control. So I went hunting again on Google for a solution. And by some sort of a miracle I finally found a solution to my problem.

http://www.telerik.com/forums/q1%2714-release---popup-bug-in-firefox

Lo and behold, if you just add the css class to your stylesheet, all is fixed.

.k-ff { overflow: inherit !important; }

I tried to replace the kendo.popup.min file but that did not work at all.

Unversial Time Coordinated what the heck is the javascript offset giving me?

I generally don't have to give a lot of thought to tracking time. Give anything a timestamp and when you need it hopefully it will be enough info to solve the issue...however sometimes you have a requirement that requires you to think a little more about it...

So if you are like me, you are starting at zippo. You have heard of UTC and kind of know what it is but not really how it is used. So UTC is the baseline, the middle. I guess in Greenwhich or wherever. I honestly don't know. So if you move left or right of that time you either add or subtract in progressive increments. So you may be in a timezone marked as GMT -5 or GMT +2. Great.

So when store a UTC datetime value to the database you are grabbing the "base time" at that moment. And later when you want to see that time in Central Standard Time or Eastern Standard Time you have to add that increment to that time. (Daylight savings time is another layer of crazy that has to be figured in too).

So say you are in javascript and you have this date/time that has the date, UTC time and GMT value. Lucky you! And now you want to display that time in the user's local time. You come across this javascript function:

var offset = new Date(yourGreatDate).getTimezoneOffset();

Good. You think this function is going to tell me the offset and then I will take that value and add it to the time.

Not quite right. I *think* it depends if you are going from UTC to a certain GMT or if you going from a GMT to a UTC....

If you are converting from UTC to GMT you will need to multiply that given value by -1. The function is giving you the 'opposite' of what you want...

So if you are normally Central Standard Time which is normally GMT -6, it gives you 360. If it is Daylight Saving Time it uses GMT -5 which gives you a 300. Notice it is giving a positive number in these cases. If you are GMT +2 it gives you -120! So complicated...

So in the CST case, UTC is actually ahead of the time you want, you will need to subtract that 360 it gives you. Well first divide it by 60 then subtract it. If you have a UTC time of say 19:22 it should display it to the user as 13:22 or 01:22.

If you add minutes without multiplying by -1 you will get non-sensical information because you will be adding more time to the UTC rather than kindly bringing it back to CST...

Now, I think if you are going from a users local time and want to convert that to UTC then you use the value given.

I know this probably isn't the most useful blogpost and I am really just writing this for me to later reference when I need to refresh my memory on UTC again...

Alternate Row Color HTML Table via CSS

I learned recently that you can 'stripe' a table using CSS rather than using the mod operator to calculate the even/odd to figure out the color. The CSS is much easier to add to your stylesheet:

tr:nth-child(odd) td{background-color:#FFF;}

tr:nth-child(even) td{background-color:#DDD;}

Now, if you assigned a class to the table cell (like I had) and want to continue to inherit that, you would want to write it this way:

tr:nth-child(odd) td.tableTitle{background-color:#FFF;}

tr:nth-child(even) td.tableTitle{background-color:#DDD;}

Nice!

Razor SendTemplatedEmail @Html.Raw

I was using a piece of code to send templated emails which the body is contained in a .cshtml file.

Basically the code takes an html template in the chtml file and smooshes it with the model values to create custom email to send - like a custom greeting. I had to also insert a custom closing that may or may not contain html. I attempted to use @Html.Raw(@Model.Closing) but it would throw some unknown exception and then subsequently not send the email. It was quite difficult to debug because it was hard to debug the razor form with how the call was being made.

Anyhow, after several hours, I found I should just use @Raw(@Model.Closing) rather than @Html.Raw(@Model.Closing). This was advice that was given however it was tricky because in Visual Studio the little red squiggly line says that is going to be a problem....but that was in fact not true it worked:

Here is a sample of what was in the .cshmtl file:

pop-uptext

@model Junk.Mail.TemplatesModels.EmailModel
<html>
    <body>
        <p>
            Hello @Model.Name
        </p>
        <p>
            Blah blha blah blah
        </p>
        <p>
            Thank you for your attention.
        </p>
         @Raw(@Model.Closing)
    </body>
</html>

@model Junk.Mail.TemplatesModels.EmailModel
<html>
    <body>
        <p>
            Hello @Model.Name
        </p>
        <p>
            Blah blha blah blah
        </p>
        <p>
            Thank you for your attention.
        </p>
         @Raw(@Model.Closing)
    </body>
</html>

Hope that helps.