Bootstrap not working well with toastr

Profile picture for Gerrit van Weele
Gerrit van Weele

I use it in my php function, and now I get a error in php I think thats te problem, ( SyntaxError: missing ; before statement line 133 ) my php function is :

<!-- begin snippet: js hide: false --> <!-- language: lang-css --> 
<?php
function VISION_TO_REPORT_MESSAGES($report_tag = "test", $subject_parameters = '', $message_parameters = '', $output=true, $lang = '')
{
// action report messages templates ...
	$report_tag = strtolower(trim($report_tag));
if (strlen($report_tag))
{        

		$report_message = array();
		$db = new clsDBcms();
        $SQL = " SELECT * FROM report_messages WHERE  report_tag= " . $db->ToSQL($report_tag, ccsText) . " LIMIT 1 ";		
       $db->query($SQL);
    $Result = $db->next_record();
    if ($Result)
	{
		$report_message['lang'] = $db->f("lang");
		if(function_exists("VISION_TO_TRANSLATE"))
		{
		$report_message['subject'] = VISION_TO_MULTI_CONTENT($db->f("subject"),$lang);
		$report_message['message'] = VISION_TO_MULTI_CONTENT($db->f("message"),$lang);
		}
		else
		{
		$report_message['subject'] = $db->f("subject");
		$report_message['message'] = $db->f("message");
		}

		$report_message['css'] = $db->f("css");
		$report_message['redirect_to'] = $db->f("redirect_to");
		$report_message['type'] = $db->f("type");

			if(!empty($subject_parameters))
			{
			while (list($this_tag,$value) = each($subject_parameters))
			$report_message['subject']  = preg_replace("/".$this_tag."/i", $value, $report_message['subject']);
			}

			if(!empty($message_parameters))
			{
			while (list($this_tag,$value) = each($message_parameters))
			$report_message['message']  = preg_replace("/".$this_tag."/i", $value, $report_message['message']);
			}
		}
        $db->close();
		if($output == true && isset($report_message['message']))
		//$output = '<script type="text/javascript">';
		$output = 'toastr.options ={ 
		  "closeButton": false,
			"debug": false,
			"newestOnTop": false,
			"progressBar": true,
			"positionClass": "toast-top-center",
			"preventDuplicates": false,
			"onclick": null,
			"showDuration": "300",
			"hideDuration": "1000",
			"timeOut": "5000",
			"extendedTimeOut": "1000",
			"showEasing": "swing",
			"hideEasing": "linear",
			"showMethod": "fadeIn",
			"hideMethod": "fadeOut",
			}';
		$output .=  'toastr.' . $report_message['css'] . "('" . str_replace("'", "\\'", htmlentities($report_message['message'])) . "'" . (isset($report_message['subject']) ? ", '" . str_replace("'", "\\'", htmlentities($report_message['subject'])) . "'" : null) . ');';
        return $output;
    }		
	}
?>
<!-- end snippet -->

line 133 in my html is :

toastr.success('The User record has been successfully updated.', 'Record Updated.');

In THE head of my page I use :

<!-- language: lang-html --> 
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.2/toastr.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- end snippet -->

I don't see any complications when adding bootstrap to toastr but your code does have some problems:

  1. First and foremost, if you're going to share code, please try to include the necessary libraries to actually run it. You can use my example below, or the instructions on the [tag:toastr] tag.
  2. toastr options = { should have a period to access the options property on the toastr object, like this: toastr.options = {
  3. Same thing for toastr-success('The... which should use a period, not a hyphen to call the success method like this: toastr.success('The...
  4. If you automatically escape <strong> into &lt;strong&gt; then there is no possible chance it will be rendered as html. It's already been escaped! So you need to include the brackets as you would regular html and then tell toastr to not escape it like this: toastr.options.escapeHtml = false;

Here's a working demo in Stack Snippets - please use this as a future template when asking questions so people can see where the actual problems are in your code.

<!-- begin snippet: js hide: false --> <!-- language: lang-js --> 
toastr.options = {
  "closeButton": false,
  "debug": false,
  "newestOnTop": false,
  "progressBar": true,
  "positionClass": "toast-top-center",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut",
  "escapeHtml": false
}

toastr.success('The <strong>User</strong> record has been successfully updated.', 'Record Updated.');
<!-- language: lang-html --> 
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.2/toastr.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- end snippet -->