Running Jquery Functions from External JS file

JavaScript
1

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


<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.


$(document).ready(function(){
    cms_init();
});
2

Hey did you ever get a response on this? I’m trying to do something similar.

3

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).

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

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. :cool: