Erro em tempo de execução no IE.

[RaikOu 0]

Olá a todos do forum!

 

bom estou com um probleminha de script em um site de um amigo!

 

o codigo é esse:

 

<script type="text/javascript">

var price = <?php echo $_product->getFinalPrice();?>;

function getPriceJSON(cc){

//building the table
var xhConn = new XHConn();
xhConn.connect("/loja/orcamento.php", "POST", "cc="+cc+"&val="+price,
function(xh) {

var response = xh.responseText.parseJSON();

var innerHTML = '<tr class="Grid_Header"><td width="33%">Parcelas</td><td width="33%">Valor da Parcela</td><td width="33%">Valor Total</td></tr>';

for(var i = 0; i < response.items.length;i++){

innerHTML += '<tr class="Grid_Header"><td style="color: Red;">'+response.items[i].parcelas+' x</td><td style="color: Red;">R$ '+response.items[i].valorParcela+'</td><td style="color: Green;">R$ '+response.items[i].valorTotal+'</td></tr>';

}

$('CreditCardTable').innerHTML = innerHTML;

}
);


}

</script>

o que ele faz? bom é um site de vendas utilizando o sistema magento! foi feito uma tabela para aparecer os valores parcelados

acontece que no IE a tabela aparece, as bandeiras dos cartoes tbm, mas os valores da parcela não aparecem, ja no FireFox, Opera e afins

funciona perfeitamente, creio que tenha algo a ver com o innerHTML e o $('CreditCardTable')

o problema é que minha praia é C++, eu só me disponibilizei para tentar ajudar meu amigo rsrsrs, mas me ferrei pois não estou conseguindo

arrumar!

 

se alguem puder me ajudar, dar uma dica, eu agradeceria!

 

um forte abraço.

[RaikOu 0]

Em tempo, pesquisei um pouco e descobri que o innerHTML da pau quando tem <table> <tr>...

o que foi me sugerido era trocar o innerHTML pelo DOM, o problema é que como falei

só entendo de C++, ai fica complicado rsrsrsrs

fucei mais um pouco e achei o codigo da tabela, aonde tem o <table> , tentei trocar

o <table> por <div> e deu certo, o unico problema é que a tabela perdeu toda a formatação

e a pagina virou uma bagunça!

 

o codigo:

 

<div class="product-collateral">
       <div class="collateral-box">
      <div class="head">
          <h4><?php echo $this->__('Simulação de parcelamento no Cartão de Crédito via PagSeguro'); ?></h4>
      </div>
       </div>
       <div class="collateral-box">
      <table style="width: 650px; text-align: center" cellspacing="0" cellpadding="0" border="0" align="center">            
         <tr>
            <td>
               <table class="FormasPagamentos" cellpadding="0" cellspacing="0">
                  <tr>
                     <td width="17%" id="tdVisa" style="padding-left: 4px;" onclick="document.getElementById('radVisa').checked = true;getPriceJSON('visa');">Visa<br><img style="padding-top: 5px;" align="middle" src="/loja/pagseguro/btn_visa.gif"><br><input id="radVisa" type="radio" name="grGrupo" value="radVisa" checked="checked"  onchange="getPriceJSON('visa');"/></td>
   
                     <td width="17%" id="tdMastercard"  style="padding-left: 4px;" onclick="document.getElementById('radMastercard').checked = true;getPriceJSON('mastercard');">MasterCard<br><img style="padding-top: 5px;" align="middle" src="/loja/pagseguro/btn_mastercard.gif"><br><input id="radMastercard" type="radio" name="grGrupo" value="radMastercard"  onchange="getPriceJSON('mastercard');"/></td>
   
                     <td width="17%" id="tdDiners" style="padding-left:4px;" onclick="document.getElementById('radDiners').checked = true;getPriceJSON('dinners');">Diners<br><img style="padding-top: 5px;" align="middle" src="/loja/pagseguro/btn_diners.gif"><br><input id="radDiners" type="radio" name="grGrupo" value="radDiners"  onchange="getPriceJSON('dinners');"/></td>
   
                     <td width="17%" id="tdAmex" style="padding-left: 4px;" onclick="document.getElementById('radAmex').checked = true;getPriceJSON('americanexpress');">Amex<br><img style="padding-top: 5px;" align="middle" src="/loja/pagseguro/btn_amex.gif"><br><input id="radAmex" type="radio" name="grGrupo" value="radAmex" onchange="getPriceJSON('americanexpress');"/></td>
   
                     <td width="17%" id="tdHipercard" style="padding-left: 4px;" onclick="document.getElementById('radHipercard').checked = true;getPriceJSON('hipercard');">Hipercard<br><img style="padding-top: 5px;" align="middle" src="/loja/pagseguro/btn_hipercard.gif"><br><input id="radHipercard" type="radio" name="grGrupo" value="radHipercard" onchange="getPriceJSON('hipercard')"/></td>
   
                     <td width="17%" id="tdAura" style="padding-left: 4px;" onclick="document.getElementById('radAura').checked = true;getPriceJSON('aura');">Aura<br><img style="padding-top: 5px;" align="middle" src="/loja/pagseguro/btn_aura.gif"><br><input id="radAura" type="radio" name="grGrupo" value="radAura" onchange="getPriceJSON('aura');"/></td>
                  </tr>
                </table>                  
            </td>
         </tr>
         <tr>
         <td align="center">
            <br />
            <table cellspacing="0" border="0" id="CreditCardTable" width="400">
            </table>
            <br />
         </td>
          </tr>
      </table>
       </div>
      
   </div>

se alguem puder ajudar um leigo a solucionar esse problema chato eu agradeço rsrsrsrs

[Francis Schiavo 1]

O exemplo abaixo mostra como você pode resolver o problema, eu fiz rapidão no notepad e só testei no IE8, mas acredito que funcione em outros browsers também.

Com algumas adaptações isso irá funcionar bem para o seu caso.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
  <title>Exemplo</title>
  <script type="text/javascript">
    var DadosTeste = {
      0:{parcelas:1,valorParcela:200,valorTotal:200},
      1:{parcelas:3,valorParcela:100,valorTotal:300},
      2:{parcelas:5,valorParcela:250,valorTotal:1250},
      3:{parcelas:1,valorParcela:500,valorTotal:500}
    }

    function $(ID) {
      return(document.getElementById(ID));
    }

    function AtulizarTabela(Dados) {
      Tabela = $('TestTable'); // Seleciona a tabela
      CorpoTabelaAntigo = $('TestTable_Body'); // Seleciona o corpo da tabela
      CorpoTabelaNovo = document.createElement('tbody'); // cria um novo corpo para a tabela

      for (i in Dados) {
        Linha = document.createElement('tr'); // Cria um novo elemento tr (<tr></tr>)
        Linha.className = 'Grid_Header'; // define a classe css da linha para Grid_Header

        Coluna1 = document.createElement('td'); // Cria um novo elemento td (<td></td>)
        Coluna1.style.color = 'red'; // define o atributo style="color: red;"
        Coluna1.innerHTML = Dados[i].parcelas + ' x'; // define o valor da celula
        Linha.appendChild(Coluna1); // Adiciona a primeira celula à linha

        Coluna2 = document.createElement('td'); // Cria um novo elemento td (<td></td>)
        Coluna2.style.color = 'red'; // define o atributo style="color: red;"
        Coluna2.innerHTML = 'R$ ' + Dados[i].valorParcela; // define o valor da celula
        Linha.appendChild(Coluna2); // Adiciona a primeira celula à linha

        Coluna3 = document.createElement('td'); // Cria um novo elemento td (<td></td>)
        Coluna3.style.color = 'green'; // define o atributo style="color: green;"
        Coluna3.innerHTML = 'R$ ' + Dados[i].valorTotal; // define o valor da celula
        Linha.appendChild(Coluna3); // Adiciona a primeira celula à linha

        CorpoTabelaNovo.appendChild(Linha); // Adiciona a linha ao novo corpo da tabela
      }

      Tabela.replaceChild(CorpoTabelaNovo, CorpoTabelaAntigo); // Substitui o corpo antigo pelo novo
    }
  </script>
</head>

<body>
  <table id="TestTable" border="1">
    <thead>
      <tr>
        <td width="33%">Parcelas</td>
        <td width="33%">Valor parcela</td>
        <td width="33%">Valor totals</td>
      </tr>
    </thead>
    <tbody id="TestTable_Body">
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
  <button type="button" onclick="AtulizarTabela(DadosTeste)">Atualizar dados</button>
</body>

</html>