CODEWITHSUNDEEP
phphtmljquery
Kris
Kris

Reputation: 77

modal pop-up via ajax call and php function, passing function issues

I have a button with on onclick event that passes the I am trying to have a pop up load through an ajax call via a php function with jquery. I am getting a response of Uncaught type error $ is not a function, coming from the Ajax function. Clearly I am not passing this correctly but am unsure of the solution?

ONCLICK CALL

<a href="javascript:void(0)" class="button seated-btn" onclick="toptions('+val.wait_id+')" data-id="'+val.wait_id+'">

AJAX CALL

    function toptions(){
            jQuery.ajax({
                type: 'post',
        url: my_ajax.ajax_url,
        data: {
        action: 'options'
                },      
        success: function (data) {
        $("#myModal").show()
                 ;}
            }); 
        }

PHP FUNCTION

function options(){ 
    ?>
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>
<script>
jQuery('document').ready(function(){
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
} 
});
</script>
        <?php
}

Upvotes: 1

Views: 371

Answers (1)

Mahmoud Gamal
Mahmoud Gamal

Reputation: 330

The $ is not a function because you're using Wordpress and they restrict using of jquery variable $ so instead of it use jQuery("#myModal").show()

Upvotes: 1

Related Questions