Question

I am looking to insert html (listItems) at a div layer with id “LogInsert” using JQuery which accesses a cookie (LogSum) containing an array of key/value pairs. Some of the items out of the array cookie need to be combined with the inserted html into the DOM.

I have the following function script that errors, which is called on various events:

      function SetLogSum() {
      var listItems = "";
      var Cooksplit = $.cookie('logSum').split(',');

      $.each(Cooksplit, function(key, val) {
      listItems += "<div class='loggedinDetail'>" +
        "<div class='loggedinImage'>" +
        "<img src=" + val.uPic + " alt=" + val.uFName + val.uLName + " /></div>" +
        "<div class='loggedinName'><span>" + val.uFName + "</span></div>" +
        "<div class='loggedinStatus'><span>" + val.uGroup + " • " + val.uContRev + "</span></div>" +
        "</div>" +
        "<div class='loggedinHistory'>" +
        "<div class='loggedinReviewCount' title='Reviews'><span>" + val.CntRev + " Reviews</span></div>" +
        "<div class='loggedinTripCount' title=''><span>" + val.CntBook + "</span></div>" +
        "</div>";
    }
    );
    $("#LogInsert").html(listItems);
    }

The logSum cookie holds information such as:

uPic=avatar-male&uContRev=Contributor&uName=thedon&uGroup=Admin&uOP=0&uOA=0&uOH=0&uOI=0&uV=1&uP=0&uRv=0&uF=0&uCb=1&uPEC=0&uS=0&uC=UK&uL=en-US&uFName=Martin&uLName=Sansone&CntRev=6&CntBook=2

I know that the listItems part works and the .html insert as I use the same structure regularly in AJAX calls. So my problem is how Im handling the cookie but I don’t know why. Any ideas ?

Answer 1

You can convert:

valueStr = "uPic=avatar-male&uContRev=Contributor&uName=thedon&uGroup=Admin&uOP=0&uOA=0&uOH=0&uOI=0&uV=1&uP=0&uRv=0&uF=0&uCb=1&uPEC=0&uS=0&uC=UK&uL=en-US&uFName=Martin&uLName=Sansone&CntRev=6&CntBook=2"

string to an Object, where keys are uPic,uContRev,uName, etc… and values are avatar-male,Contributor,thedon, etc… like this:

var val = JSON.parse( '{"'+
                          valueStr.replace(/=/g,'":"')
                          .replace(/&/g,'","') + 
                       '"}');

then do like this:

listItems += "<div class='loggedinDetail'>" +
    "<div class='loggedinImage'>" +
    "<img src=" + val.uPic + " alt=" + val.uFName + val.uLName + " /></div>" +
    "<div class='loggedinName'><span>" + val.uFName + "</span></div>" +
    "<div class='loggedinStatus'><span>" + val.uGroup + " • " + val.uContRev + "</span></div>" +
    "</div>" +
    "<div class='loggedinHistory'>" +
    "<div class='loggedinReviewCount' title='Reviews'><span>" + val.CntRev + " Reviews</span></div>" +
    "<div class='loggedinTripCount' title=''><span>" + val.CntBook + "</span></div>" +
    "</div>";

DEMO