wordpress widget missing jquery

Question

I have live score website and it is not wordpress based i build a widget for pure php websites but now i want to offer the widget to wordpress users problem is when i tried the widget i get three errors and to be honest i am not wordpress expert so i hope to be helped here . this is my link for users:

<div id="widget-container" class="my_widget" name='15' width="800px"></div>
<script src="http://skormix.com/mywidget/widget.js" type="text/javascript"></script>

and here is the error:

1. Uncaught ReferenceError: $ is not defined
2. Uncaught ReferenceError: jQuery is not defined
3. Uncaught TypeError: Cannot call method 'ajax' of undefined

and this is my part of my widget code:

(function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.8.3') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");
    var script_tag1 = document.createElement('script');
    script_tag1.setAttribute("type","text/javascript");
    script_tag1.setAttribute("src",
        "http://localhost/aaa/include-js/jquery_timer.js");

    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else { // Other browsers
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag1);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() {
    jQuery(document).ready(function($) {
    /******* Load CSS *******/
    var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "http://localhost/aaa/widget/blue.css"
        });
        css_link.appendTo('head');
        var txt;
        txt='<div id="wrapper">';
        txt=txt+'<ul class="tabs">';
        txt=txt+'<li id="fixtures_tab"><a href="#fixtures">Hepsi</a></li>';
        txt=txt+'<li id="live_tab"><a href="#live">Canlı</a></li>';
        txt=txt+'<li id="finished_tab"><a href="#finished">Bitmiş</a></li>';
        txt=txt+'<li id="program_tab"><a href="#program">Başlamamış</a></li>';
        txt=txt+'<li id="postpond_tab"><a href="#postpond">Ertelenen</a></li>';
        txt=txt+'<li id="selected_tab"><a id="f" href="#fav">Oyunlarım (0)</a></li>';
        txt=txt+'</ul>';
        txt=txt+'<div class="tab-container">';
        txt=txt+'<div id="fixtures" class="tab-content"><script type="text/javascript">get_All_Today_Matches();</script></div>';
        txt=txt+'<div id="live" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="finished" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="program" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="postpond" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="fav" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'</div>';
        txt=txt+'</div>';
        $('#widget-container').html(txt);
    });
}
})(); // We call our anonymous function immediately

and for the third error i used ajax request like this:

function get_All_Today_Matches()//this function used to get all the matches of today for all countries & comptions (live, finished, program) on the main page
{
    $.ajax({//ajax function to get the xml data (faster)
    type: "POST",//we use POST method beacuse we should send a 'home' to the proxy page to get the right xml url
    url: "http://localhost/aaa/proxy.php",//proxy page
    data : {country : 'home'},//parameters
    dataType: "xml",//returned data type
    success: parseToday//the function on success
 });
}

EDIT: 4.Uncaught TypeError: Property '$' of object [object Object] is not a function

Answer 1

Your first two problems: $ and jQuery is not defined. $ is just an alias for jQuery. Your first two problems are the same with different names.

I think you do not write a plugin or a function in your functions.php. I think you put your code simply in the template file and expect that this should work. That's basically the problem.

jQuery is simply not loaded when you request it. Often jQuery is loaded in the footer, this means after you try to access jQuery. We can solve this very easily with a enqueued JavaScript

add_action( 'init', 'enqueue_skormix_widget_js', 20 );

function enqueue_skormix_widget_js() {
  wp_enqueue_script(
    'skormix-widget',
    'http://skormix.com/mywidget/widget.js',
    array( 'jquery' ),
    false,
    true
  );
}

Put this lines of code in your functions.php and remove the <script> tag from the template. The function will be hooked in the init hook (a very early hook) and enqueue your script with the the dependency jquery and loaded it into the footer.

The dependency tells WordPress to load the script after the dependenciy (or dependencies) are loaded. In this case, it will be loaded after jQuery is loaded.

Now we solved two problems. jquery and it's alias $ is defined.

Let's have a closer look at your last problem: something is not an function of undefined. Sure, if $ is not defined, you can not call a method of it. After we have defined $ with propper enqueueing your script, $ is no longer undefined.

A simple RTFM problem.