AJAX PHP system - When using $ ("# div"), load ("page.php", {foo: bar}); jQuery not found $ ("# div")

Question

AJAX PHP system - When using $ ("# div"), load ("page.php", {foo: bar}); jQuery not found $ ("# div")

Navigation

#1 by (1 votes)

2

I have an AJAX system in PHP and I have an index.php where I have all src js included:

<head>

<link rel="stylesheet" href="/assets/fileinput/css/fileinput.min.css" media="all" type="text/css" />
<script src="/assets/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="/assets/fileinput/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="/assets/fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/assets/fileinput/js/fileinput_locale_pt-BR.js"></script>

</head>

And I load other php pages in the same index.php with jquery div load, for example:

$ ('# div'). load ("page.php", {foo: bar});

The page.php page is loaded into the div correctly, but when I call a class from fileinput for example the system does not understand, as if the js src is not declared

<input id="foto" name="foto" type="file" multiple class="file-loading">

I think any other jQuery function that calls some js plugin would not find tb, fileinput is just an example. If I declare the js src, styles in page.php the system runs correctly, but I'll be declaring 2 times the same thing. Would you have any way to do this by declaring once only?

php javascript html jquery ajax

asked by anonymous 30.03.2016 / 05:57

1 answer

score 1 · Accepted Answer

This is because INPUT was inserted later, this is known as a dynamic element in Javascript.

Many native functions (eg .click) or not (eg .select2) do not work before the element exists, in fact all functions work in this way.

The alternative is to use:

$('#div').load("page.php",{foo : bar}, function(){ $('#foto').fileinput(); } );

I have not read all the documentation from JS File Input, I took a look at this moment. But the idea is to initialize the input after loading the content.

However the problem is not isolated to "fileinput", so the important thing is to understand about the dynamic elements themselves.

Dynamic elements

Notice this problem, similar:

$('button').click(function(){
  alert('Funcionou!');  
  $('body').append('<br><button>Isso agora não funciona</button>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><button>Issofunciona</button></body>

Thereasonisthesameasyourproblem!The.clickonlyreachesthefirstbutton,whichwasalreadytherewhenJQuerywastriggered.

Butifyoudothis:

function button(){
  
    $('button').click(function(){
      alert('Funcionou!');  
      $('body').append('<br><button>Isso agora não funciona (#SQN)</button>');
      $('button').off(); 
      button();
    });

}

button();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><button>Issofunciona</button></body>

Eachinsertisagaindeclaring.clicksoyouarereading/identifying/monitoringtheinsertedobjectdynamically.Ifyouchoosetodothis,lookat.off(),ignoringthiswillduplicatetheactionoftheexistingbuttons.

Inthespecificcaseofthisexample,thereissomethingbettertodo:

$('body').on('click', 'button', function(){
          alert('Funcionou!');  
          $('body').append('<br><button>Isso agora não funciona (#SQN)</button>');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button>Isso funciona</button>
</body>