jQuery selector in included php file not working

Question

I made a simple website to manage and display items. For my problem is sufficient to know that there are 3 files:

1. admin-dashboard.php which display items and admin functionalities (reduce quantity, increase ecc.)

 <?php include("includes/header.php"); include("dbqueries/db-connection.php"); include("includes/alerts.php"); ?> ...

2. dashboard-utilities.js which contains all the JavaScript functions to realize point 1

 ... // Reduce quantity button script function reduceQuantity(item) { $.ajax({ method: 'get', url: '../dbqueries/reduceQuantity.php', data: { 'current_item': item, }, success: function() { //alert("Quantità di " + "\\"" + item + "\\"" + " diminuita!"); $('#reduceqty-modal').modal('show'); // Reload page after closing the modal alert $('#reduceqty-modal').on('hidden.bs.modal', function () { window.location.reload(); }) } }); } ...

3. alerts.php which will contain all the bootstrap modal alerts to display on operations success (ie "Quantity updated!")

 <!-- Reduce quantity modal --> <div id="reduceqty-modal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Quantità ridotta</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> ...

So the problem is that the "success" part of the reduceQuantity function is not working. In particular the modal is not displayed.

I supposed that jQuery cannot find its selector cause it is in the included file ( alerts.php ). I think so because if I put the alert code directly into the main file admin-dashboard.php everything works.

Thank you in advance!

Answer 1

... The problem was related to the server. The file alerts.php didn't have the correct permissions and the correct owner. I noticed it when you said that it wasn't probably really included.

Sorry for wasting your time, thank you all!

Answer 2

It's sounds like the reduceQuantity() function cannot find the modal element, because the function is running before the HTML element has been parsed. This could either be because you need to wrap your JQuery in a $(document).ready(function(){}) or you need to include the Javascript at the end of your admin-dashboard.php file (before the closing </body> tag) and then put the alerts.php at the top so that it can be parsed before the Javascript runs. You might need to do both of these things.