Javascript in a custom tv input template

354 Posts

MrDutchy Reply #1, 15 years, 4 months ago

Hi, i would like to code my own custom tv input type. I created input controller and template like hinted in the docs here. I created a TV with based on this and linked it to my template.

I don’t want to use ExtJS. So I tried including jquery. Now if I edit a page, which has that tv, I keep getting the javascript error ’$ is not defined’.

My controller

<?php
 
$this->xpdo->lexicon->load('tv_widget');
return $this->xpdo->smarty->fetch('element/tv/renders/input/geobird.tpl');

?>

My template

<script src="ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

	$(document).ready(function()
	{		
		alert('**' + $('tvnametest').val());
	});

</script>

<input id="tvnametest" class="textfield" value="test1" />

I also tried putting this at the start of my controller without success

$modx->regClientStartupHTMLBlock('
<script src="ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>');

EDIT : I even tried using ExtJS since everything else failed. Using this template:

<script type="text/javascript">
	// <![CDATA[
    {literal}

	Ext.getCmp('tvnametest').setValue("289");

	//{/literal} ]]>
</script>

<input id="tvnametest" class="textfield" value="test1" />

Still no luck. I get "Ext.getCmp("tvnametest") is undefined".

☆ A M B ☆
3,141 Posts

Mark Hamstra Reply #2, 15 years, 4 months ago

Perhaps it is searching relatively - try adding "http://" before the ajax apis link.

Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.

354 Posts

MrDutchy Reply #3, 15 years, 4 months ago

Quote from: Mark at May 18, 2011, 11:56 AM

Perhaps it is searching relatively - try adding "http://" before the ajax apis link.

Thanks for the input, it didn’t change the error though.

354 Posts

MrDutchy Reply #4, 15 years, 4 months ago

I made an even simpler case which relies on Ext. This should be available but all firebug tells me is "Ext.get("tvnametest").setValue is not a function"

No clue how this is supposed to be coded. I looked at one of Bruno’s custom input tvs but it too complex to learn from. This should work, what am I missing?:

<script type="text/javascript">	
	Ext.get("tvnametest").setValue("hello");	
</script>
<input id="tvnametest" class="textfield" value="test1" />

☆ A M B ☆
3,141 Posts

Mark Hamstra Reply #5, 15 years, 4 months ago

It may be fired upon page load, instead of when Ext has been loaded...

Like I said on IRC, I never did custom tvs yet, but just trying to think along.

Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.