1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Adding a new row (looks great in Firefox, not so much in IE)

Discussion in 'CSS' started by web_dude, Apr 9, 2008.

  1. #1
    Hi,

    This might be a javascript questions since javascript is actually creating the row, but since the problem isn't creating the row but rather the display, I thought I'd start here first...

    Clicking the add new row button works perfectly in Firefox. When I add a new row in IE6 and IE7 only the first row adds correctly... the quantity field adds correctly each time but the others don't.

    Any ideas? I have attached my code and screen shots. I understand that I should not have my style information included with the html but I take that out after I get the page working the way it is supposed to.

    HERE IS THE STYLE CODE
    <style type="text/css">
    #quickShopHeadings{
    width: 950px;
    font-weight: bold;
    float: left;
    border-bottom: 1px solid;
    }
    #quickShopForm {
    width: 950px;
    padding-bottom: 10px;
    float: left;
    background: #E5E1D9;
    }

    #quickShopHelp {
    width: 300px;
    clear: both;
    float: left;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    background: #EEEEEE;
    }

    #qsInfo{
    clear: both;
    float: left;
    width: 100%;
    }

    #quickShopHelp p,
    #qsInfo p{
    padding-top: 5px;
    padding-bottom: 5px;
    }

    #quickShopHelp .helpHeader{
    font-weight: bold;
    }

    #quickShopHeadings ul,
    #quickShopForm ul{
    list-style: none;
    }

    #quickShopHeadings li{
    background: #CAC4B4;
    }

    #quickShopForm li{
    padding-top: 10px;
    }

    .qsQuantity{
    display: block;
    clear: both;
    float: left;
    width: 60px;
    padding-left: 5px;
    }
    .qsNameHeading{
    display: block;
    float: left;
    width: 735px;
    }
    SEMrush
    .qsItemNumber{
    display: block;
    float: left;
    width: 150px;
    }

    .qsName{
    position: relative;
    display: block;
    float: left;
    }

    .qsChoice,
    .qsStartOver{
    display: block;
    float: left;
    padding-left: 10px;
    }

    .qsButton{
    display: block;
    float: left;
    padding-left: 10px;
    }
    </style>

    HERE IS THE HTML/JAVA CODE
    <div id="quickShopHeadings">
    <ul>
    <li class="qsQuantity">Quantity</li>
    <li class="qsItemNumber">Item Number</li>
    <li class="qsNameHeading">Name</li>
    </ul>
    </div>

    <div id="quickShopForm">
    <form id="quickShopItems" name="quickShopItems" method="post" action="">
    <input type="hidden" name="activity" id="activity" value="" />
    <input type="hidden" name="listName" id="listName" value="" />
    <input type="hidden" name="howmany" id="howmany" value="" />

    <%
    nt rowCount = 0;
    or (int x = 1; x < 7; x++)
    {
    rowCount = rowCount + 1;
    %>
    <ul id="quickShopList">
    <li class="qsQuantity"><%=x%> <input type="text" name="quantity_<%=x%>" id="quantity_<%=x%>" size="2" value="" /></li>

    <li class="qsItemNumber"><input type="text" name="prefix_<%=x%>" id="prefix_<%=x%>" size="3" value="" /> - <input type="text" name="partNumber_<%=x%>" id="partNumber_<%=x%>" size="9" value="" onblur="javascript:ajax_checkItemNumber('<%=x%>')" /></li>

    <li id="itemName_<%=x%>" class="qsName">&nbsp;</li>
    <li id="choice2_<%=x%>" class="qsChoice">&nbsp;</li>
    <li id="choice3_<%=x%>" class="qsChoice">&nbsp;</li>
    <li id="choice4_<%=x%>" class="qsChoice">&nbsp;</li>
    <li id="clearButton_<%=x%>" class="qsStartOver" style="display: none"><input type="button" value="Clear" name="ClearChoices" onclick="StartOver('<%=rowCount%>')"/></li>
    </ul>
    <%
    }
    %>
    <ul id="newRows"></ul>

    <ul id="formButtons" style="clear: both; float: left;">
    <li class="qsButton"><input type="button" value="Add to Shopping Cart" onclick="javascript:quickShop('quickShopItems', 'quickShopCart', 'AddToCart?')" /></li>
    <li class="qsButton"><input type="button" value="Add Another Row" onclick="javascript:addQuickShopRow()" /></li>

    </ul>
    <input type="hidden" id="rowCount" name="rowCount" value="<%=rowCount%>" />
    </form>
    </div>

    HERE IS THE JAVASCRIPT
    function addQuickShopRow()
    {
    //Purpose: Adds a new quickshop <li> to the quickshop form
    var newList = document.getElementById('newRows');
    var rowNumber = document.getElementById('rowCount').value;
    var newRowNumber = parseInt(rowNumber) + 1;

    // Create the Quantity Row
    var quantityLI = document.createElement('li');
    quantityLI.className = "qsQuantity";
    quantityLI.innerHTML = newRowNumber + "<input type='text' name=\"quantity_"+newRowNumber+"\" id=\"quantity_"+newRowNumber+"\" size='2' value='' />";

    newList.appendChild(quantityLI);

    // Create the Item Number Row
    var itemNumberLI = document.createElement('li');
    itemNumberLI.className = "qsItemNumber";
    itemNumberLI.innerHTML = "<input type='text' name=\"prefix_"+newRowNumber+"\" id=\"prefix_"+newRowNumber+"\" size='3' value='' /> - <input type='text' name=\"partNumber_"+newRowNumber+"\" id=\"partNumber_"+newRowNumber+"\" size='9' value='' onblur='javascript:ajax_checkItemNumber("+newRowNumber+")' />";

    newList.appendChild(itemNumberLI);

    // Create the Item Name Row
    var itemNameLI = document.createElement('li');
    itemNameLI.className = "qsName";
    itemNameLI.id = "itemName_" + newRowNumber;
    itemNameLI.innerHTML = "&nbsp;";

    newList.appendChild(itemNameLI);

    // Create the Choice Rows
    var choice2LI = document.createElement('li');
    choice2LI.className = "qsChoice";
    choice2LI.id = "choice2_" + newRowNumber;
    choice2LI.innerHTML = "&nbsp;";

    newList.appendChild(choice2LI);

    var choice3LI = document.createElement('li');
    choice3LI.className = "qsChoice";
    choice3LI.id = "choice3_" + newRowNumber;
    choice3LI.innerHTML = "&nbsp;";

    newList.appendChild(choice3LI);

    var choice4LI = document.createElement('li');
    choice4LI.className = "qsChoice";
    choice4LI.id = "choice4_" + newRowNumber;
    choice4LI.innerHTML = "&nbsp;";

    newList.appendChild(choice4LI);


    // Create the clear button
    var clearButton = document.createElement('li');
    clearButton.className = "qsStartOver";
    clearButton.id = "clearButton_" + newRowNumber;
    clearButton.style.display = "none";
    clearButton.innerHTML = "<input type='button' value='Clear' name='ClearChoices' onclick='StartOver("+newRowNumber+")' />";

    newList.appendChild(clearButton);

    document.getElementById('rowCount').value = newRowNumber;
    }
     

    Attached Files:

    web_dude, Apr 9, 2008 IP
    SEMrush
  2. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Here is a picture of what it looks like when it is working... I get valid item options using ajax... just an FYI
     

    Attached Files:

    web_dude, Apr 9, 2008 IP
  3. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    any thoughts on how to solve this? ttt.
     
    web_dude, Apr 10, 2008 IP
  4. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Still looking for help...
     
    web_dude, Apr 14, 2008 IP
  5. joesgraphics

    joesgraphics Peon

    Messages:
    206
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Have you got a live example?
     
    joesgraphics, Apr 14, 2008 IP
  6. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    no live example unfortunately... i'm developing everything locally. maybe i'll have to wait until the new server is up and then revisit this issue later if no one can help me...
     
    web_dude, Apr 14, 2008 IP