Dynamically Loaded Content Handling

Question

I need to manipulate an attribute of an html tag that was dynamically loaded via ajax. I have tried several ways using jQuery but none of them worked.

The code being loaded via ajax is as follows:

<table cellspacing="0" cellpadding="0" id="idTablePhoneFC" style="max-width: 480px;">
<tbody>
<tr>
    <td class="EstChkValorCampo">
        <input type="text" onchange="F$.fnCleanErrField('P2Telefone');" style="width:100px" maxlength="20" size="10" value="" id="P2Telefone" name="P2Telefone" class="InputText"><span></span>
    </td>
</tr>
</tbody>
</table>

Note that the field input[type=text] is with the attribute "style" forcing a maximum width of 100px. I tried using CSS ! Important to try to force the element to be wider than this, but it is not accepting. So my idea was to try using jquery, but I did not get results with the following code:

<script>
$(function() {
    $("#P2Telefone").css('width','100%');

    $(window).bind('load',function(){
        $("#P2Telefone").css('width','100%');
    });

    $(window).load(function() {
        $("#P2Telefone").css('width','100%');
    });

    $(window).on("load",function(){
        $("#P2Telefone").css('width','100%');
    });
});
</script>

Does anyone have any idea how to fix this?

Answer 1

At the end of the page loading, the input#P2Telefone is not yet available, it will only be available after the request AJAX.

So you have two options, move the $("#P2Telefone").css('width','100%'); into your request $.ajax. Or put it in your CSS file #P2Telefone { width: 100% !important; }

Below is an example working....

//criando URL que irá servir o HTML dinamico por AJAX.
var createURL = function () {
  var tmplHtml = document.getElementById("tmplHtml");
  var blobHtml = new Blob([tmplHtml.innerHTML], { type: 'text/html' });
  return URL.createObjectURL(blobHtml);  
}

var url = createURL();
var btAjax = document.getElementById("btAjax");
btAjax.addEventListener("click", function () {    
  
  //realizando requisição ajax
  var httpRequest = new XMLHttpRequest();
  httpRequest.open("GET", url, false);
  httpRequest.addEventListener("readystatechange", function () {
    if (httpRequest.readyState == 4) {
      if (httpRequest.status == 200) {
        var template = document.createElement("template");
        template.innerHTML = httpRequest.response;
        var conteudo = document.importNode(template.content, true);
        
        var p2Telefone = conteudo.querySelector("#P2Telefone");        
        p2Telefone.style.width = "100%";                
        document.body.appendChild(conteudo);  
      } else {
        console.erro("Erro durante a requisição AJAX");
      }
    }
  });
  httpRequest.send();
});

// esperar o carregamento da pagina
document.addEventListener("readystatechange", function () {  
  if (document.readyState == "interactive") {        
    // O input#P2Telefone não está disponivel neste ponto
    var p2Telefone = document.getElementById("#P2Telefone");
    p2Telefone.style.width = "100%";
  }
})

<input id="btAjax" type="button" value="Adicionar Input" />
<template id="tmplHtml">
  <div>
    <input id="P2Telefone" type="text" style="width:100px" />
  </div>
</template>

Answer 2

In this case use . attr and not . css.

Would look like this:

$("#P2Telefone").attr('style','width:100%');

But since your element is being loaded via ajax, you will need to enter this code within the end of the ajax method.