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

Asked

Viewed 474 times

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 fileinput class for example the system does not understand, as if I was not declared js src’s 

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

I think that any other jQuery function that calls some js plugin would not find tb, fileinput is just an example. If I declare js src, Styles on page.php the system runs correctly, but I will be declaring 2 times the same thing. Would you have some way of doing that by declaring once only?

php javascript jquery html ajax

1 answer

1


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

Multiple native functions (eg.click) or not (eg.Select2), do not work before the element exists, in fact all functions work in such a way.

The alternative is to use:

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

I haven’t read all the documentation of JS File Input, I took a look at it this time. 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 that you understand about the dynamic elements themselves.

Dynamical elements

Note 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>Isso funciona</button>
</body>

The reason is the same as your problem! The .click only reaches the first button, which was already there when Jquery was triggered.

But if you do:

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>Isso funciona</button>
    </body>

Each insertion will again declare the .click this way will be reading/identified/monitoring the inserted object dynamically. If you choose to do this observe the .off(), ignore this will duplicate the action of the existing buttons.

In the specific case of this example, there is something better to be done:

$('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>

The .on() monitors the body previously defined. Body is not dynamic (except if creating a new body, but it is not common). Even so, dynamic elements can be inserted inside the body, like this button. This way by clicking inside the body Jquery checks if the clicked element is a button. This allows you to insert numerous elements of button dynamically, provided that within the body.

  • Interesting, I get the concept of it. Thanks a lot for the help, I’ll give a read on the fileinput doc, I would have a few more arguments to work the way I want, but that’s what you said. Was worth too much!

Browser other questions tagged php javascript jquery html ajax

You are not signed in. Login or sign up in order to post.