jQuery Mapster with dynamic data from php

Question

We are building a website and for that we need to include an image map from a country and when you highlight a provence it needs to show some content below the map.

For this we are using jquery mapster (I'm not really a jquery programmer, so maybe you could help).

All works with the code below, but only when the content is on 1 line.

For example groningen: "<h1>Groningen</h1><p>test</test>", <-- This works

For example

groningen: "<h1>Groningen</h1>
<p>test</test>",

This does not work.

Below you will find my jquery code

<script type="text/javascript">
var $s = jQuery.noConflict(); 
$s(document).ready(function () {
       var image = $s('img');
       var data = {
            groningen: "<h1>Groningen</h1>
<p>test</test>",
            friesland: "<?php echo $extrafields[10];?>",
       };
       var defaultDipTooltip = 'I know you want the dip. But it\'s loaded with saturated fat, just skip it and enjoy as many delicious, crisp vegetables as you can eat.';

       image.mapster(
       {
            fillOpacity: 1,
            fillColor: "ff2d52",
            strokeColor: "ff2d52",
            strokeOpacity: 0.8,
            strokeWidth: 1,
            stroke: true,
            isSelectable: true,
            singleSelect: true,
            mapKey: 'name',
            listKey: 'name',
            onClick: function (e) {
                var newToolTip = defaultDipTooltip;
                $s('#selections').html(data[e.key]);
                if (e.key==='asparagus') {
                    newToolTip = "OK. I know I have come down on the dip before, but let's be real. Raw asparagus without any of that " +
                            "delicious ranch and onion dressing slathered all over it is not so good.";
                }
                image.mapster('set_options',{areas: [{
                    key: "dip",
                    toolTip: newToolTip
                    }]
                });
            },
            showToolTip: true,
            toolTipClose: ["tooltip-click", "area-click"],
            areas: [
                {
                    key: "groningen",
                    fillColor: "ff2d52",
                    toolTip: defaultDipTooltip
                },
                {
                    key: "friesland",
                    fillColor: "ff2d52"
                }
                ]
        });
      });
      </script>

Output

var data = {
    groningen: "<h1>Groningen</h1><p>test</test>",
    friesland: "<p>Scholen in de regio Groningen</p>
    \n<ul>
    \n<li>AOC Terra, Groene school<br />Adres<br />Winsum<br />Telefoonnummer<br />Naam directeur</li>
    \n<li>De Bolster<br />Adres<br />Groningen<br />Telefoonnummer<br />Naam directeur</li>
    \n<li>De Catamaran, School voor Praktijkonderwijs<br />Adres<br />Stadskanaal<br />telefoonnummer<br />Naam directeur</li>
    \n<li>Dollard College locatie De Flint</li>
    \n</ul>",
    }; 

Answer 1

Javascript and by extension jQuery strings cannot go over a line boundry, you need to either add 2 strings together with a + or replace newlines with \n

Do some manipulation of your php array so each newline is replaced with \n

$UpdatedString = str_replace("\n", '\\n', $FieldValue);