How to refresh div without duplicating it/losing its content?

  javascript, jquery, laravel

i’m trying to make a world map (jvectormap) with information about payments per country in my laravel project. On the map i have installed a date range picker plugin to filter the date range of the data used by the map.

The thing i’m trying is to refresh the div with the jvectormap using jquery .load():

$("#vmap").load(location.href + " #vmap");

The problem with this is that the it duplicates my vmap div and uses it as a child deleting all my other child elements, so when it refreshes, theres no map.

html:

<div id="vmap" style="height: 250px; width: 100%;"><div id="vmap" style="height: 250px; width: 100%;"></div></div>

while it was like this before the refresh:

    <div id="vmap" style="height: 250px; width: 100%;"><div class="jvectormap-container" style="background-color: transparent;"><svg width="365.406" height="250"><defs></defs><g transform="scale(0.4060066666666667) translate(0, 87.52356258001963)"><path d="M651.84,230.21l-0.6,-2.0l-1.36,-1.71l-2.31,-0.11l-0.41,0.48l0.2,0.94l-0.53,0.99l-0.72,-0.36l-0.68,0.35l-1.2,-0.36l-0.37,-2.0l-0.81,-1.86l0.39,-1.46l-0.22,-0.47l-

...

 fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="jvectormap-region jvectormap-element"></path></g><g></g><g></g><g></g></svg><div class="jvectormap-zoomin">+</div><div class="jvectormap-zoomout">−</div><div class="jvectormap-legend-cnt jvectormap-legend-cnt-h"><div class="jvectormap-legend"><div class="jvectormap-legend-inner"><div style="clear: both;"></div></div></div></div><div class="jvectormap-legend-cnt jvectormap-legend-cnt-v"></div></div></div>

Anyone knows how to solve this?

Thanks

Source: Laravel

Leave a Reply