jConfirm is not defined

Question

I have a simple script that prompts the user to confirm delete, then it just alerts them that the process was completed properly.

I tried using jConfirm and the Javascript console spits out: "ReferenceError: jConfirm is not defined"

<!-- jConfirm --> 
// the script is referenced properly    
<script src="/js/jconfirm/jquery.jconfirm-1.0.min.js"></script>


<script>
function careersDelete(career_id) {
  jConfirm('Are you sure you want to delete this career?', 'Delete Career', function (x) {
    if (x) {
        jQuery.ajax({
            url: "ajax_career_delete.php",
            type: "GET",
            data: "career_id=" + career_id,
            success: function (response) {
                alert('Career deleted');
            }
        });
    }
});

}

On the button that should enable the confirm dialog, I have:

<a href="#" onclick="careersDelete('<?php echo $career_id; ?>')">delete</a>

Answer 1

If you check out these examples you'll see that you need to separately source jquery, and that jconfirm is only defined within its namespace. Thus you need to add two things in your code:

<script src="/js/jquery.js"></script> <!-- or wherever jquery.js's path is -->
...
  $.jconfirm('Are you sure  ...
  // note jquery's $. namespace; and the non-capitalized "c" in jconfirm

---

Additionally, the $.jconfirm function call is not expecting strings. It signature is:

function(options, callback)

And the callback is not executed with any parameters (thus your x will be undefined). It looks like what you wanted was somewhere along the lines of:

function careersDelete(career_id) {
  jQuery.jconfirm({
       message: 'Are you sure you want to delete this career?',
       title: 'Delete Career'
  }, function () {
        jQuery.ajax({
            url: "ajax_career_delete.php",
            type: "GET",
            data: "career_id=" + career_id,
            success: function (response) {
                alert('Career deleted');
            }
        })
  });
}