Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RaikOu

Erro em tempo de execução no IE.

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.