0

test .php

<div id="widget_dta"></div> 
<script type="text/javascript" src="widget.js"></script>
<script type="text/javascript">
    init_widget('john','robert');
</script>

widget.js

 (function() {

 // Localize jQuery variable
 var jQuery;

 /******** Load jQuery if not present *********/
   if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",
    "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.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);
} 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($) {
     function init_widget(fname,lname) {
        $('#widget_dta').append('<p class="fname">first name :'+fname+'</p><p class="lname">last name :'+lname+'</p>');
   }
}); 
 }

 })(); 

error : I am getting this error "ReferenceError: init_widget is not defined". can anyone help where I am doing wrong.

1

i think the script.js file is not loading properly. if its loading then the function should work as expected.

are you referencing the complete path of script in your script.js call? like

<script type="text/javascript" src="some-domain.com/path/widget.js"></script>

try opening that file from page source and see if its loading the correct js file?

its always best practice to use wp_enqueue_script function for loading js files.

  • In widget.js file i was adding the jquery library. when it is loading js file ,library is adding in <head> section. – user123 Feb 13 '17 at 13:26
  • when i give the jquery library directly instead of adding from js file,the code is working fine. – user123 Feb 13 '17 at 13:29
  • you should use jquery library in seprate file then. plus maybe you are declaring that function above jquery codes in widget.js file ? – Anwer AR Feb 13 '17 at 14:55
  • Thanq,my task is i need to include jquery library from widget.js file.But my function is not executing in js file. – user123 Feb 14 '17 at 5:01
0

Your init_widget function is not visible from within test.php.

You must give your init_widget function global visibility:

/******** Our main function ********/
function main() { 

  window.myutils = window.myutils || {}; //Create a little namespace for your own functions so that they are not all global.

  //We dont need the jQuery on ready block here. You should assume that whoever calls init_widget will wait for the page to be ready first before calling.
  window.myutils.init_widget = function(fname,lname) {
        var $ = jQuery; //convenience so we can still use $ here instead of writing out jQuery all the time.
        $('#widget_dta').append('<p class="fname">first name :'+fname+'</p><p class="lname">last name :'+lname+'</p>');
  };
}

And then in your test.php file you'll need to do this:

<div id="widget_dta"></div> 
<script type="text/javascript" src="widget.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        window.myutils.init_widget('john','robert');
    });
</script>

Your widgets.js file should just define all the functions that are possible to call straight away. Only the code that actually needs to use the functions should then wait for a jQuery on-page-ready event to fire first before trying to use any of the widget functions.

  • Thank you for helping.Still not displaying any data in browser and also I am getting this error "ReferenceError: jQuery is not defined" – user123 Feb 14 '17 at 4:57
  • @user123 Ah okay, I thought you were doing this from within a wordpress theme which already had jQuery. So the easiest way to get around that is to add <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> into test.php before the widget.js script line. That will load jQuery first and then execute your function. – Mikepote Feb 15 '17 at 14:06
  • I need to call that jquery library with in widget.js file.My issue got solved. – user123 Feb 16 '17 at 5:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.