How to go about getting Jquery JS inserted via PLUGIN

32 Posts

creativecss Reply #1, 17 years, 4 months ago

Hi,

Sorry if this is the wrong place for this post but I am writing a plugin that needs to load the JQuery lib and my custom JS file into the document form.

I tried using

$modx->regClientStartupScript(’/assets/js/jquery.js’);

but it didnt load the file.

I then tried just to echo out the call to the JS through PHP but this then made the form go invisible, which is strange as in FireBug I coud inspect the page and see the JS there and the doc form that has hidden was still there.

Any pointers on how to get my JS files into the doc form.

p.s I am using JQuery in no conflicts mode

5,888 Posts

Bruno17 Reply #2, 17 years, 4 months ago

You can try something like that in onWebPagePrerender (mootools example):

<?php

global $modx;
$output= $modx->documentOutput;
$site_url = MODX_BASE_URL;

		
ob_start();

// Define the CSS and Javascript that we will add to the header of the page
$head =<<<EOD

<!-- Start Xedit headers -->

		<script src="{$site_url}assets/plugins/multi_chunk_Tvs/js/mootools-1.2.1.js" type="text/javascript"></script>
		<script src="{$site_url}assets/plugins/multi_chunk_Tvs/js/mootools-1.2-more.js" type="text/javascript"></script>
		<script src="{$site_url}assets/plugins/multi_chunk_Tvs/js/blox_sortables.js" type="text/javascript"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
//your startup scripts
});
</script>   
<!-- End Xedit headers -->

EOD;

// If the javascript hasn't already been added to the page, do it now
if (strpos($output, $head) === false)
{

    //$output = str_replace('</head>', $head, $output);
    $output = preg_replace('~(</head>)~i', $head.'\1', $output);
}
ob_flush(); 	  
$modx->documentOutput = $output;  	

?>

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

32 Posts

creativecss Reply #3, 17 years, 4 months ago

Thanks for the reply but I am trying to insert JS into the manager document edit form.

My idea is to create draft pages by using JS to uncheck the clear cache checkbox and change the value fromt he hidden input from 1 to 0 so that any changes to the page wont get put into a cached file.

How I see it is that all pages are cachable
Clear cache check box unchecked then hidden
Get all pages to be viewed and create a cache file for them
Then when changes are made to a page they are stored in the database but the visitors only see the cached version
If a user has rights to publish then they get a button that is placed on the page somewhere that when they click deletes this pages cahche file

This should allow me to set up basic draft pages on my site.

I would love to be able to use JQuery as I have experiance with this and have not used moo tools before

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 17 years, 4 months ago

The default cacheable status of documents can be set in the main site configuration file, along with published and a few other default document settings.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

32 Posts

creativecss Reply #5, 17 years, 4 months ago

@sottwell: Thanks, I have already set all documents to be unpublished by default and cachable. My idea is to keep the live data(that is seen on the actual website in the cache file) then l whatever is in the site_content table is the draft which can change and only get put into a cache file when a user with publishing rights clicks a button that will fire off my script to delete the pages cache file.

17 Posts

Ells85 Reply #6, 17 years, 4 months ago

Quote from: Bruno17 at May 23, 2009, 06:52 AM

You can try something like that in onWebPagePrerender (mootools example):

<?php

global $modx;
$output= $modx->documentOutput;
$site_url = MODX_BASE_URL;

		
ob_start();

// Define the CSS and Javascript that we will add to the header of the page
$head =<<<EOD

<!-- Start Xedit headers -->

		<script src="{$site_url}assets/plugins/multi_chunk_Tvs/js/mootools-1.2.1.js" type="text/javascript"></script>
		<script src="{$site_url}assets/plugins/multi_chunk_Tvs/js/mootools-1.2-more.js" type="text/javascript"></script>
		<script src="{$site_url}assets/plugins/multi_chunk_Tvs/js/blox_sortables.js" type="text/javascript"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
//your startup scripts
});
</script>   
<!-- End Xedit headers -->

EOD;

// If the javascript hasn't already been added to the page, do it now
if (strpos($output, $head) === false)
{

    //$output = str_replace('</head>', $head, $output);
    $output = preg_replace('~(</head>)~i', $head.'\1', $output);
}
ob_flush(); 	  
$modx->documentOutput = $output;  	

?>

I believe your solution is close to what I want to do, but maybe a little more complex than necessary. I’m trying to load the JQuery library as well as an additional JS library IF a checkbox TV for the page being displayed has been checked. Currently, I tried writing a snippet:

if( $TVarray = $modx->getTemplateVarOutput(array(ceebox-flag)) ){ $tvOutput = $TVarray[ceebox-flag];

if( $tvOutput == "Yes" || $tvOutput == "yes" ) {
		$tvOutput = "<script type='text/javascript' src='/assets/js/ceebox/ceebox.js'></script>";
		$tvOutput .= "<link type='text/css' src='assets/js/ceebox/ceebox.css' media='screen' />";
		
		echo $tvOutput; 
	}
}

$tvOutput is always empty when I check for the "Yes" value even if the box is checked in the TV for the page in the MODx manager. I’m brand new to MODx CMS (and have done some forum and documentation searching) and I suspect I’m missing something fairly simple.

Are you able to see what I’m doing wrong? Or is there a simpler way to use your code for what I’m trying to do?

Thanks for your help.

17 Posts

Ells85 Reply #7, 17 years, 4 months ago

Quote from: Ells85 at May 27, 2009, 10:10 AM

if( $TVarray = $modx->getTemplateVarOutput(array(ceebox-flag)) ){ $tvOutput = $TVarray[ceebox-flag];

if( $tvOutput == "Yes" || $tvOutput == "yes" ) {
		$tvOutput = "<script type='text/javascript' src='/assets/js/ceebox/ceebox.js'></script>";
		$tvOutput .= "<link type='text/css' src='assets/js/ceebox/ceebox.css' media='screen' />";
		
		echo $tvOutput; 
	}
}
$tvOutput is always empty when I check for the "Yes" value even if the box is checked in the TV for the page in the MODx manager. I’m brand new to MODx CMS (and have done some forum and documentation searching) and I suspect I’m missing something fairly simple.

Are you able to see what I’m doing wrong? Or is there a simpler way to use your code for what I’m trying to do?

Thanks for your help.

I ended up being able to find a solution.


if( $TVarray = $modx->getTemplateVarOutput(array('ceebox-flag')) ){ $tvOutput = $TVarray['ceebox-flag'];

if( $tvOutput == "Yes" || $tvOutput == "yes" ) {
	//load the jQuery library
	$src = "/assets/js/ceebox/jquery.js";
	$modx->regClientStartupScript($src);

	//load the Ceebox script
	$src = "/assets/js/ceebox/ceebox.js";
	$modx->regClientStartupScript($src);

	//load the Ceebox CSS
	$src = '<link rel="stylesheet" type="text/css" href="/assets/js/ceebox/ceebox.css" media="screen" />';
	$modx->regClientStartupHTMLBlock($src);
	}
}

Basically, this checks the TV "ceebox-flag" and if it is checked for the current page, then it uses the API to load the necessary Javascript and CSS.