Handle Dynamically Loaded Content

Question

Handle Dynamically Loaded Content

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I need to manipulate an attribute of an html tag that was loaded dynamically through ajax. I've tried it in many ways using jQuery but none of it 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 input[type=text] field has the "style" attribute forcing a maximum width of 100px. I tried to use CSS! Important to try to force the element to get a wider width than that, 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 solve this?

javascript html jquery

asked by anonymous 01.02.2016 / 14:05

2 answers

0

In this case use .attr instead of .css.

It would look like this:

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

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

02.02.2016 / 21:03

create unity3D custom mask Doubt in SQL Query

score 2 · Accepted Answer

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

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

Here's an example running ....

//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>