CODEWITHSUNDEEP
javascriptjquery
Kyle
Kyle

Reputation: 119

avoid repeating of result using JavaScript or jQuery

Hi guys I have been wondering how can I avoid displaying of the same result on JavaScript or jQuery using for loop

Here is my code:

function displayData(e)
{
var html = '';
var html2 = '';
var x = '';

var mapDiv = document.getElementById('mapContainer'), i = 0,
     dataIndex, tooltipDiv, key
mapMarkers = $(mapDiv).find('.e-mapMarker'), index = 0;
var divCont = $(mapDiv).find('#rightdiv'), index = 0;
for (i = 0; i < mapMarkers.length; i++)
{

    if (e.target.parentNode.parentNode == mapMarkers[i])
    {
        index = i;

    }
}

html += '<div id="infocontainer">';
html += '<div class="p-image"><img src="src/images/retrofit.png"/></div>';
html += '<div class="popupdetail">';
html += '<div class="p-name"> Site Name: ' + flsSites[index].site_name + '</div>';
html += '<div class="p-name"> Site Status: ' + flsSites[index].status + '</div>';
html += '<div class="p-name"> Country: ' + flsSites[index].country_name + '</div>';
html += '</div>';
html += '</div>';




html2 += '<div class="rightcontainer">';
html2 += '<img id="productimage" src="src/images/retrofit.png" onclick="DisplayProfileCard();"/>';
html2 += '<div id="imagedetail">';
html2 + '<input type="hidden" value='+ flsSites[index].serial_number +'/>';
html2 += '<span class="details">Product Type:' + flsSites[index].serial_number +'</span>';
html2 += '<span class="details">Version / Size <img class="row_one_icon lightbulb_icon" id="lightbulb" src="src/images/lightbulb1.png" onClick="LightBulb()" /><img id="convert" class="row_one_icon arrow_icon" src="src/images/arrow_Off.png" onClick="Conversion()"/><img id="lightning" class="row_one_icon" src="src/images/lightningOff.png" onClick="Lightning()"/><img id="bullseye" class="row_one_icon bullseye" src="src/images/bullseye_off.png" onClick="BullsEye()"/></span>';
html2 += '<span class="details">Estimated annual Spend <img class="row_one_icon ribbon" src="src/images/ribbon1.png"/><img class="row_one_icon map" src="src/images/map1.png"/><img class="row_one_icon paper_stack" id="paper" src="src/images/paper_stack_Off.png" onclick="PaperStack()"/><img class="row_one_icon chain" id="chain" src="src/images/chain_Off.png" onClick="ChainLink()"/></span>';
html2 += '<span class="details">Site name / manufacturer</span>';
html2 += '<span class="details">Selling Sales Eng</span>';
html2 += '</div>'
html2 += '</div>';

if (!document.getElementById('map_tooltip')) 
{
    tooltipdiv = $("<div></div>").attr('id', "map_tooltip");
    $(document.body).append(tooltipdiv);
    $(tooltipdiv).css({
        "display": "none", "padding": "5px",
        "position": "absolute",
        "z-index": "13000",
        "cursor": "default",
        "font-family": "Segoe UI",
        "color": "#707070",
        "font-size": "12px", "pointer-events": "none",
        "background-color": "#FFFFFF",
        "border": "1px solid #707070"
    });
}
else
{

    tooltipdiv = $("#map_tooltip");
    $(tooltipdiv).css({
        "left": (e.pageX + 5),
        "top": (e.pageY + 5)
    });
    $(tooltipdiv).html(html).show("slow");
    //$('#defaulttext').hide();
    //$('#searchcontainer').append(html2);
    //$('.rightcontainer').eq($(this).index()).addClass('background');
    $(html2).appendTo("#searchcontainer");
}

Now in this code I was able to display my result on a div by hovering on a marker on the map but if I return on my previous hovered marker instead of highlighting its corresponding result, it will just make another rendering of the same result below in which I dont need

Upvotes: 0

Views: 56

Answers (1)

bitifet
bitifet

Reputation: 3679

You can use a Set object to store each result you renderer and check if it is already there before to render each one.

Unfortunately that Set objects aren't supported in older browsers.

But you can emulate it by simply using the keys of a regular object. For example:

var Idx = {};
function renderOne(flsSite) {
    if (Idx[flsSite.name]) return; // Here I suppose same name => same result.
    Idx[flsSite.name] = true; // Mark as rendered.
    // Do render...
};

Hope it helps...

Upvotes: 1

Related Questions