Click here to Skip to main content
15,884,388 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi team

I have been debugging this problem almost 1 hour. I need some help, i have an onclick event handler when click to redirect user to billing_address and have used correct js libraries to handle this. Somehow when i use correct name function the error still persist.

What I have tried:

// html code
HTML
<pre><!--Cart modal-->

        <div class="modal fade" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="cartModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="cartModalLabel">Cart Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true"></span>
        </button>
        </div>
        <div class="modal-body">
        <table class="table table-bordered">
            <thead>
            <tr>
            <th>Product</th>
            <th>Image</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Action</th>
            </tr>
            </thead>
            <tbody id="cart-items">
            </tbody>
        </table>
         <p id="total-price">Total Price: R0</p> 
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="proceedToBilling()">Proceed</button>
        </div>
        </div>
        </div>

//js files
JavaScript
<pre>
   <!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include jQuery Validation plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<pre lang="Javascript"><!--- Cart--Modal-->
<script>
  // Update cart load.
  $(document).ready(function () {
    var userId = <?php echo isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 0; ?>;
    updateCartBadge(userId);

    // Function to process billing address by user.
  function proceedToBilling() {
    var referenceNumber = "<?php echo $_SESSION['reference_number']; ?>";
    var shippingCost = "<?php echo $_SESSION['shipping_cost'];?>";
    window.location.href ="billing_address.php?ref=" + referenceNumber + "&shipping=" + shippingCost;
  }
  });
Posted
Updated 2-Aug-23 4:41am
Comments
Richard MacCutchan 2-Aug-23 10:20am    
I'm not a Javascript expert, but as far as I can see the proceedToBilling function only exists within
$(document).ready(function () {

so it is not visible to the HTML.
Gcobani Mkontwana 2-Aug-23 10:28am    
@Richard MacCuthan yes it has been defined inside, there are no conflict js files when debugging this. Tried to clear cache many times, but still when i click button it throws that error.
Dave Kreskowiak 2-Aug-23 10:32am    
Again, it's because the proceedToBilling function is defined inside the ready() function and, hence, can only be used by code inside the ready() function.

The solution is quite easy. Move the proceedToBilling() function outside the ready() function and it'll be visible to all of your code.
Gcobani Mkontwana 2-Aug-23 10:35am    
@Dave, i have tried that as well,it keeps throwing the same error, tried to clear cache, no difference.
Richard MacCutchan 2-Aug-23 12:52pm    
It is nothing to do with clearing the cache. It is simply the fact the the function is invisible to the HTML as it only exists inside the $(document).ready(function (), as alsready stated.

RMC is correct; any function referenced by an on... attribute within the HTML needs to be a global function, not a function nested within another function.

You need to move the function outside of the jQuery event handler:
JavaScript
$(function(){
    var userId = <?php echo isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 0; ?>;
    updateCartBadge(userId);
});

function proceedToBilling() {
    var referenceNumber = "<?php echo $_SESSION['reference_number']; ?>";
    var shippingCost = "<?php echo $_SESSION['shipping_cost'];?>";
    window.location.href ="billing_address.php?ref=" + referenceNumber + "&shipping=" + shippingCost;
}

NB: Read the jQuery documentation:
jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:
  • $( handler )
  • $( document ).ready( handler )
  • $( "document" ).ready( handler )
  • $( "img" ).ready( handler )
  • $().ready( handler )

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated.
You are using a deprecated syntax ($(document).ready(function() { ... });); you should replace that with the recommended syntax ($(function() { ... });).
 
Share this answer
 
No, you haven't "tried that". You think you did, but looking over all the questions you've posted, I don't think you have.

It's as easy as moving a line in your code:
HTML
<script>
  // Update cart load.
  $(document).ready(function () {
    var userId = <?php echo isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 0; ?>;
    updateCartBadge(userId);
  });                      <---Moved from the bottom of your post to here

  // Function to process billing address by user.
  function proceedToBilling() {
    var referenceNumber = "<?php echo $_SESSION['reference_number']; ?>";
    var shippingCost = "<?php echo $_SESSION['shipping_cost'];?>";
    window.location.href ="billing_address.php?ref=" + referenceNumber + "&shipping=" + shippingCost;
  }
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900