jquery getscript by id

[jarvis]

Hi All

 

I wonder if someone can help!

 

I've a piece of javascript that gets generated into a page dynamically.

 

When the page content initially loads, the script runs. However, due to the way the site is built (ajax), when you go to the next page, the script is added but isn't triggered.

 

I've fixed all issues whereby I can reference a js file, however, is there anyway to use jQuery.getScript on a script that doesn't have a js file?

 

I thought I could add a class or ID into the script tag:

<script type="text/javascript" id="getme">

Then use:

jQuery('#getme').remove

To remove it, as I understand you should. Then I need to reload it.

 

I tried:

jQuery('#getme').reload();

But I think I need to use jQuery.getScript but can't see how to do this on an inline script (rather than a dedicated js file)

 

Any help is much appreciated

[maxxd]

If the script is inline, it's in the global scope so you should be able to use it straight from your jquery file. Call the function name from the done() event of your ajax object - is this not working?

[jarvis]

Hi Maxxd, many thanks for your reply

 

I'll be honest, javascript is something i struggle with (yeah I know!)

 

Can you post an example of what you mean?

 

This is the script:

echo '<script type="text/javascript" id="getme">

								//<![CDATA[
								jQuery(document).ready(function(){						
									new jPlayerPlaylist({
										jPlayer: "#jquery_jplayer_' . $unique_id . '",
										cssSelectorAncestor: "#jp_container_' . $unique_id . '"
									},[';
										foreach( $urls as $id=>$file ):
											echo '{';
											echo 'title: "'.addslashes( $file['title'] ).'",';
											echo $file['extension'] . ': "' . addslashes( $file['url'] ) . '"';
											echo '}';
											if ( $id <> count($urls)-1 ) {
												echo ',';
											}
										endforeach;
					echo '		], {
										noConflict: "jQuery",
										swfPath: "' . plugins_url( 'assets/js/jQuery.jPlayer.2.4.0' , __FILE__ ) . '",
										cssSelectorAncestor: "#jp_container_'.$unique_id.'",
										supplied: "' . implode( ',', $ext ) . '",
										solution: "' . ( $admin_options['woo_jplayer_solution'] == 'flash' ? 'flash, html' : 'html, flash' ) . '",
										loop: ' . ( $admin_options['woo_jplayer_loop'] == 'yes' ? 'true' : 'false' ) . '
									});
								});
								//]]>
							</script>';

Which is called in a PHP file. So can I just reference that somehow? 

 

Apologies if this is a basic question!

[maxxd]

Any JavaScript in the HTML is in the global scope, and as such can be accessed from pretty much anywhere. Now then, that being said, putting the script inline is typically frowned upon as it breaks the separation of concerns principle of coding. You want your display code (HTML) in one spot, your client functionality (JavaScript) in another, and your server functionality (PHP) in another place. That way you're not wading through HTML to make changes to PHP or JavaScript.

 

So, with that out of the way, you can do this -

 

inline:

<script>
	function alertMe(){
		alert('hi there, me!');
	}
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='yourJavaScriptFile.js'></script>

yourJavaScriptFile.js:

$.ajax({
	method: 'post',
	url: 'yourPhpScript.php',
	data: {
		'key' : 'value'
	},
}).done(function(data,status,jqxhr){
	if(stat === 'success' || jqxhr.status === 200){
		alertMe();
	}
});

yourPhpScript.php:

<?php
echo('yup');
?>

Now, obviously you'll have an event of some sort trigger the Ajax call, and as soon as the Ajax call prints 'yup', the status will be equal to 'success' and jqxhr.status will be equal to 200. So, you should be greeted with an alert window saying 'hi there, me!'.

[jarvis]

Thanks again maxxd

 

However, as the php creates content within the javascript file, I don't  think I can move the inline script into its own javascript file  - as far as I know!?

[maxxd]

You can, but it's a bit of restructuring. I'd suggest using the PHP to output the necessary values - in this case, loop, swfPath, solution, and title(s) - to an inline JavaScript variable or variables. Then you can grab that object from the included JavaScript file and use the variables there.