Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Adding elements to <li>

    Hello Everyone

    I have very annoying problem, that I cant solve. I have a <div> that is generated from dll, to which I do not have access. I need to take content of that <DIV> and rearrange it, for display purposes.

    I wrote javascript that takes the information from the DIV, parses it and populates <ul> to simulate dropdown.
    Problem is I am getting some extra characters that ruin the link.

    This is the JS that I use:
    Code:
           <script type="text/javascript">
               function returnArray() {
                   var divContent = document.getElementById('tribSort');
    
                   var parentGuest = document.getElementById("hey");
                   var lielement = document.createElement('li');
    
                   var options = ["Price Low to High", "Price High to Low", "Name A to Z", "Name Z to A", "Bestselling", "Rating", "Recently Added"];
    
                   var select = document.getElementById("selectNumber");
                   var clickvalue = " onClick=\"";
                   var navodnici = "\"";
                   var a = new Array();
                   var b = new Array();
    
                   for (var i in divContent.childNodes) {
                       var lielement = document.createElement('li');
                     
                       a[i] = divContent.childNodes[i].toString(); // This is Value
                       b[i] = divContent.childNodes[i].getAttribute("onClick"); // This is onclick
    
                       var combined = "http://" + a[i] + navodnici + clickvalue + b[i];
                       var tet = "<a href=" + a[i] + " onclick=" + b[i] + ">" + options[i] + "</a>";
     
                       alert(tet): // this looks fine
                       lielement.innerHTML = tet;
                       alert(lielement.innerHTML); // this is not fine
                       parentGuest.appendChild(lielement);
                       //<li><a href="#" onclick="showhide('d2');">Lithium-ION</a>
    
                   }
    
                   //     }
                   return a;
    
               }
    
               function init() {
                   var a = returnArray();
                   alert(a)
               }
    
    //           var ele = document.getElementById("tribSort");
    //           ele.style.display = "none";
               //    alert(ele);
    </script>
    In the code there is first alert statement, and it shows that it is being parsed exactly as it should, as shown in image 1:



    After second alert in the code, after I added the variable using innerHTML there are some things that were not there before, underlined in red in the image 2:




    I have seen somewhere there are problems using innerHTML, but I dont know th eother way of doing it.

    Can someone please help me with this issue?


    Thank you very much.
    Last edited by Wexoni; 10-08-2012 at 03:14 PM. Reason: Trying to fix image display

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    As you can see, the browser's parser has added the missing double quotes to wrap your attribute values. Even though some people don't like to use them, strictly speaking they are mandatory. If you don't provide them, the browser will have to add them which might fail terribly (qed).

    So you should add those double quotes yourself at the right positions and it should work.
    Code:
    onclick="SetCookie(........); return false;"

  • Users who have thanked devnull69 for this post:

    Wexoni (10-08-2012)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    What I see is that in the original link you aren’t putting the attribute values into quotes which confuses the parser if there are spaces, as there are in the onclick event handler.

  • Users who have thanked VIPStephan for this post:

    Wexoni (10-08-2012)

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so much.

    I did not even suspect missing quotes... I thought it is something entirely else!!!


    It works now

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,474
    Thanks
    13
    Thanked 361 Times in 357 Posts
    Quote Originally Posted by devnull69 View Post
    Even though some people don't like to use them, strictly speaking they are mandatory.
    as for HTML - no.

    HTML is perfectly fine without, BUT it applies apropriate rules then (like, attribute value ends at the next space character). HTML is made to be extremely forgiving towards errors (unlike XHTML) and thus your assumption on what HTML should do (may) turn out wrong.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •