SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem creating labels to dynamically generated output

    Hello!

    Im having problem generating the labels for content created by the following function:

    Code:
    function setOutput(){
        if(httpObject.readyState == 4){
    		var answer = httpObject.resultsponseText.split(",");
    		var results = document.getElementById("resultsultadosScan1");
    		var article = document.createElement("div");
    		var weight = document.createElement("div");
    		var price = document.createElement("div");
    		article.className = "article";
    		weight.className = "weight";
    		price.className = "price";
            document.getElementById('outputText0').value = httpObject.innerHTML= answer[0];
    		document.getElementById('outputText1').value = httpObject.innerHTML= answer[1];
    		document.getElementById('outputText2').value = httpObject.innerHTML= answer[2];
    		article.innerHTML = httpObject.innerHTML= answer[0];
    		weight.innerHTML = httpObject.innerHTML= answer[1];
    		price.innerHTML = httpObject.innerHTML= answer[2];
    		results.appendChild(article);
    		results.appendChild(weight);
    		results.appendChild(price);
        }
     
    }
    A friend wrote this sample script to achieve generation of labels on my script, but I have been trying for hours with no luck, can someone take a look and tell me the correct usage of this script:

    Code:
    function createLabel() {
        var target = document.getElementById("target");
        var label = document.createElement("label"); 
        var text = document.createTextNode("Article"); 
        label.appendChild(text);
        target.appendChild(label); 
    }
    Can you help me with the correct "combination" using my script above, a "real life" example?

    Thanks a lot!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Currently that createLabel function only creates a label with the text "Article" and appends it to an element with an id of "target"

    Here's a modification of the function that should be helpful

    Code javascript:
    function createLabel(text) {
        var label = document.createElement("label"); 
        var text = document.createTextNode(text); 
        label.appendChild(text);
        return label;
    }

    Before much more of an answer can be given, can you give us an example of what you want the resulting HTML code to look like?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!

    You can see a sample page here, all I want is to place the labels before the text box, and style them via css, since each div has its own class.

    If you want to see the page's complete code so far here it is: muckup


    Thanks again!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Are you meaning labels as in the actual tag <label> element that is used in forms, so that you can click on the label name and have the input selector focused in a field?
    Or is it a more generic meaning of label that you want, where you just want the text on the screen next to the data?

    In the mean-time, here is how the above code can be simplified so that less duplication occurs.

    It makes no sense to set the httpObject.innerHTML, so that part is removed.
    Now let's reorder the lines so that each part is grouped together:

    Code:
    var answer = httpObject.resultsponseText.split(",");
    var results = document.getElementById("resultsultadosScan1");
    
    var article = document.createElement("div");
    article.className = "article";
    document.getElementById('outputText0').value = answer[0];
    article.innerHTML = answer[0];
    results.appendChild(article);
    
    var weight = document.createElement("div");
    weight.className = "weight";
    document.getElementById('outputText1').value = answer[1];
    weight.innerHTML = answer[1];
    results.appendChild(weight);
    
    var price = document.createElement("div");
    price.className = "price";
    document.getElementById('outputText2').value = answer[2];
    price.innerHTML = answer[2];
    results.appendChild(price);
    Now we can put those three groups in a loop, where the class name is accessed from an array called items.

    Code javascript:
    var answer = httpObject.resultsponseText.split(","),
        results = document.getElementById("resultsultadosScan1"),
        items = ['answer', 'weight', 'price'],
        i,
        item;
    for (i = 0; i < items.length; i += 1) {
        item = document.createElement("div");
        item.className = items[i];
        document.getElementById('outputText' + i).value = answer[i];
        item.innerHTML = answer[i];
        results.appendChild(item);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or is it a more generic meaning of label that you want, where you just want the text on the screen next to the data?
    That's all I need for now, the text next to the data.

    Now I'll try your suggestion.


    Thanks a lot!

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SenTnelA View Post
    Now I'll try your suggestion.
    Well currently this is what the HTML code for the updated info would look like:

    Code html4strict:
    <div id="resultadosScan1">
        <div class="articulo">SUNGLASES</div>
        <div class="peso">2.00</div>
        <div class="precio">23.00</div>
    </div>

    Since the inner divs all have a border around them and are all displayed inline, you may want to contact some CSS people about an HTML structure to use for the on-screen labels that will work in with your page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, seems that you are a guru type of guy, I should have said at the beginning that Im just starting programming and what I have is the result of days asking around and reading and sleepless nights like tonight, here, at home, is 4:09 AM and look, trying to get this thing up and running.

    The thing is that I dont even know how to start with your solution. Seems to me that it is the best solution, but Im clueless on how to implement it now so at least the page works, so far I just "copied and pasted" in my page and dont get anything, can you please elaborate a little on what exactly do I have to do?

    Pleasssse!

    Thanks a lot for what you're doing!

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SenTnelA View Post
    Thanks a lot for what you're doing!
    Just go back to what you were doing before, until you get info about what HTML tag structure to use, and the associated CSS code for it.

    There's no point even trying to make progress with the JavaScript code until you have some idea of what you want to achieve with the HTML code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just so I know tell me if at this point is a very complicated thing just to get a name next to the text box saying what that info is? I want to know so I just go on another direction.

    Should I forget about this approach of doing this?


    Thanks again!

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SenTnelA View Post
    Just so I know tell me if at this point is a very complicated thing just to get a name next to the text box
    With your existing HTML structure, it will become messy and complicated very quickly. Messy and complicated and very bad things, because people just leave them untouched in fear of breaking something.

    A better HTML structure could be to use a data list, for example:

    Code html4strict:
    <dl id="resultadosScan1">
        <dt>Article</dt>
        <dd>SUNGLASES</dd>
        <dt>Weight</dt>
        <dd>2.00</dd>
        <dt>Price</dt>
        <dd>23.00</dd>
    </dl>

    which starts off looking like this:

    Code:
    Article
        SUNGLASES
    Weight
        2.00
    Price
        23.00
    But with some simple CSS, you can style it similar to what you currently have.
    For a fancy example of what data lists can be used for, see the InfoGrid article (demo)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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