SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast rgf207's Avatar
    Join Date
    Feb 2006
    Location
    Maryland
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Running Jquery Functions from External JS file

    I'm fairly new to jQuery. I have a lot of things that are running on the $document.ready() area and was wondering if I can put them all into an external js file and call 1 function from the $(document).ready() call

    here is what I have

    Code:
    <script type='text/javascript'>
    	$(document).ready(function(){
    		
    		$(\".editphrase\").editable('index.php?m=language&a=changephrase', {
    		 cssclass  : 'input-text',
             tooltip   : 'Click to edit...',
    		 submit    : 'Save',
    		 type      : 'textarea',
    		 height    : '80px',
    		 indicator : '<img src=\"skins/default/images/loading.gif\"> Saving...',
    		 data: function(value, settings) {
    		 var retval = value.replace('<img src=\"skins/default/images/pencil.png\">', '');
    		 return retval;
    		 }
          	 });
    		 
    		 $(\".editcomment\").editable('index.php?m=comment&a=editcomment', {
    		 cssclass  : 'input-text',
             tooltip   : 'Click to edit...',
    		 submit    : 'Save',
    		 type      : 'textarea',
    		 height    : '80px',
    		 indicator : '<img src=\"skins/default/images/loading.gif\"> Saving...',
    		 data: function(value, settings) {
    		 var retval = value.replace('<img src=\"skins/default/images/pencil.png\">', '');
    		 return retval;
    		 }
          	 });
    		 
    		 $(\".editsmily\").editable('index.php?m=smilies&a=change', {
    		 cssclass  : 'input-text',
             tooltip   : 'Click to edit...',
    		 submit    : 'Save',
    		 type      : 'text',
    		 indicator : '<img src=\"skins/default/images/loading.gif\"> Saving...',
    		 data: function(value, settings) {
    		 var retval = value.replace('<img src=\"skins/default/images/pencil.png\">', '');
    		 return retval;
    		 }
          	 });
    		 		 
    		$(\".editplugin\").editable('index.php?m=pluginmanager&a=edit', {
    		 cssclass  : 'input-text',
             tooltip   : 'Click to edit...',
    		 submit    : 'Save',
    		 type      : 'text',
    		 width		: '30',
    		 indicator : '<img src=\"skins/default/images/loading.gif\"> Saving...',
    		 data: function(value, settings) {
    		 var retval = value.replace('<img src=\"skins/default/images/pencil.png\">', '');
    		 return retval;
    		 }
    		 });
    		 
    		$('table.tablesorter thead tr th').click( function() {
    			$('table.tablesorter tbody tr').removeClass('bg');
    			
    		});
    		
    		$('table tbody tr:odd').addClass('bg');
    		
    		$('table.nostyle tbody tr').removeClass('bg');
    		$(\".tabs > ul\").tabs();
    		$(\"table\").tablesorter();
    	});
    	</script>]
    I would really just like to call 1 function from the $(document).ready() call that lies in an external .js file that will process the code above so I don't have so much clutter in the page.

    This is what I would like. I have tried it but it doesn't work.

    Code:
    $(document).ready(function(){
        cms_init();
    });

  2. #2
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey did you ever get a response on this? I'm trying to do something similar.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You certainly don't have to use more than one external file. But the first thing to do is just use a normal script link in the head of your document (or better still, just before the closing </body> tag).

    Code:
    <script type="text/javascript" src="/scripts/myjsfile.js"></script>

  4. #4
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You certainly don't have to use more than one external file. But the first thing to do is just use a normal script link in the head of your document (or better still, just before the closing </body> tag).

    Code:
    <script type="text/javascript" src="/scripts/myjsfile.js"></script>
    Thanks. Funny thing is that i have multiple external files and I couldn't get the JQuery in scope when placing my code the file. So i put all the content in the external file in a try catch with an alert and was able to figure out what i was doing wrong and now my JQuery code IS in scope in the external files.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •