Jquery split() with IE8 issue

Jquery split() with html tags and browser

 I am working on HTML 4.0 + HTML 5 with jquery. I have a scenario as follow,

I want to create a list using ul, li structure from following string

String:

data =”

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

<ul>

       <li>Test content 1</li>

       <li>Test content 2</li>

       <li>Test content 3</li>

</ul>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. ”

so I need to create a structure at runtime from above string as follow,

Strucuture:

<ul>

       <li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li>

       <li>Test content 1</li>

       <li>Test content 2</li>

       <li>Test content 3</li>

       <li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li> </ul>

So I need to group non-tag data in ul, li list inside the paragraph tag <p></p> and remaining

data which is already inside the <li></li> structure as it is.

So I have create the function as follow,

 // Convience function for creating new jQuery objects
        function $tag(tag, id, css, style) {
            var element = document.createElement(tag);
            if (id) { element.id = id; }
            if (css) { element.setAttribute("class", css); }
            if (style) { element.setAttribute("style", style); }
            return $(element);
        }

code:
var ul_strucure = $tag("ul", false, false, false);

var temp = $tag("div", false, false, false).append(data);

$($(temp).children().filter("ul")).empty();

var nontag_data = "";

nontag_data = $(temp).html().split("<ul>").join("").split("</ul>").join("*<ul>*").split("*");

var ul_data = $tag("div", false, "", false).append(data["transcript_data"]).children()
              .filter("ul");

 var j = 0;

for (i = 0; i < nontag_data.length; i++) {

    if (nontag_data[i].toLowerCase() != "<ul>" && nontag_data[i]) {  

               $(ul_strucure).append($tag("li", false, false, false)

               .append($tag("p", false, false, false).html(nontag_data[i])));
        }
    else if (nontag_data[i].toLowerCase() == "<ul>" && nontag_data[i]) {

     for (k = 0; k < $(ul_data[j]).children().length; k++) {

          $(ul_strucure).append($tag("li", false, false, false)

               .html($($(ul_data[j]).children()[k]).text()));

                 }

             j = j + 1;
          }
     }

The above code is working fine in IE9, IE10, mozilla, chrome, safari

So split()  is return an array with given splitter expression.

but in IE8 I face a problem that the split method not returning the array for same above code,

After 2 days I found the solution as follow,

in IE8 inside < and >  means HTML tags and automatically convert it in to the upper case,

So I have updated the my function for browser specific as follow,

 
if ($.browser.msie && $.browser.version < 9) {
      nontag_data = $(temp).html().split("<UL>").join("").split("</UL>").join("*<UL>*")
                     .split("*");
      }
   else {
      nontag_data = $(temp).html().split("<ul>").join("").split("</ul>").join("*<ul>*")
                     .split("*");
   }

SO the small correction in code, It will work 
all browsers
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s