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>");
    }
}