JQuery and Yii

Yii 1.1 General Discussion
1

In a view I put a number of JavaScript functions that do not use JQuery. They are plain JavaScript. I do not register them. The DOM elements whose events fire these functions are not created using Yii functions. Everything regarding these functions is straight HTML/JavaScript code.

When the page is loaded and the functions are fired, they are apparently "imported into" JQuery against my will. Using Firebug, when there is an error, the referenced code line is a line number in a JQuery file. For example, in a function attempting to implement the html5 drag-and-drop, I get the following error:

ev.preventDefault is not a function

if ( isObj ) {

That "if ( isObj ) {" line of code is from JQuery, and there is no reason whatsoever that I can see for that line to be executed. For some reason, JQuery is being imported into my script, or my script is being conscripted into JQuery.

I keep having this problem with my drag and drop functions.

2

Can you show us your code please.

3

hello, within the same javascript do you have any jquery script code in it or in the rendered page?

4

In the rendered page, yes.

The scripts with which I am having the problem are in _changephotos.php view.

My index.php view makes an ajax call that loads _changephotos.php. Both index.php and _changephotos.php use CHtml::ajaxSubmitButton to create the buttons.

Attempting to give just the relevant code, but all of the relevant code:

The index.php button code that calls the _changephotos.php view:


<?php echo CHtml::ajaxButton('Change Photos',array('default/changePhotos'),

						array('update'=>'#editScreen',

							'data'=>array('bldgId'=>$moneyShot->bldgId,'aptId'=>$moneyShot->aptId,'toAdd'=>'apartment'),

							'type'=>'get'),

						array('name'=>'changeAptPhotoButton',

							'live'=>false)); ?>

The controller command that renders the _changephotos.php view:


$this->renderPartial('_changephotos',array('moneyShot'=>$moneyShot,'toAdd'=>$toAdd),false,false);

The script blocks from my _changephotos.php view:


<script type='text/javascript'>

document.getElementById('editScreen').style.display='block';


</script>

<script type='text/javascript'>

	

function boxClose(x) {

    x.parentNode.style.display='none';

    numSpecials--;

    if(numSpecials >= numImages) return;

    var imgPar=document.getElementById('otherBoxes');

    numOthers++;

    var imgC=document.createElement("div");

    imgC.id="imgContainer"+numOthers;

    imgC.className="imgContainer";

    imgPar.appendChild(imgC);

    var drop=document.createElement("div");

    drop.id="dropBox"+numOthers;

    drop.className="dropBox";

    var param1='event';

    drop.ondrop=function(){drop(param1,numOthers)};

    drop.ondragover=function(){allowDrop(param1)};

    imgC.appendChild(drop);

    var inpt=document.createElement("input");

    inpt.type="hidden";

    inpt.name="other"+numOthers;

    inpt.id="imgName"+numOthers;

    imgC.appendChild(inpt);

    var tinpt=document.createElement("input");

    tinpt.type="text";

    tinpt.name="otherLabel"+numOthers;

    tinpt.id="labelField"+numOthers;

    tinpt.value='Other';

    tinpt.onfocus=function(){this.select()};

    imgC.appendChild(tinpt);

    

}

</script>


<script type='text/javascript'>


function setListingOrder()

{

	document.getElementById('newOrderNote').innerHTML="Click on photos in order they should be displayed in listings"


	var numImgs=document.changeOrder.exx.value;

	var listingOrder= [];

	

	var imgList= function(thebox){

		listingOrder.push(thebox.getElementsByTagName("input")[0].name);

		thebox.style.border="3px solid blue";

		if(listingOrder.length == numImgs)

			writeFields(listingOrder);

	}

	

	return imgList;

	

}


function allowDrop(ev)

{

	ev.preventDefault();

}


function drag(ev)

{

	ev.dataTransfer.setData("Text",ev.target.id);

}


function drop(ev,x)

{

	ev.preventDefault();

	var data=ev.dataTransfer.getData("Text");

	var droppedItem=document.getElementById(data);

	ev.target.appendChild(droppedItem);

	var imgName=droppedItem.value; //this might not work.  Is value the FILE or the FILENAME?

	ev.target.parent.onclick=function(){addToList(this)};

	document.getElementById('imgName'+x).value=imgName;

	var dr=document.getElementById('curOrder');

	if(dr.getElementsByTagName('img').length==0)

		addToList=setListingOrder();

}


function dropNotPublic(ev)

{

	ev.preventDefault();

	var data=ev.dataTransfer.getData("Text");

	ev.target.appendChild(document.getElementById(data));

	var npn=document.getElementById('notPublicNames');

	var children = npn.childNodes;

	var nfnum=children.length++;

	inpt=document.createElement("input");

	inpt.type="hidden";

	inpt.name="notPublic[]";

	inpt.id="notPublic"+nfnum;

	inpt.value=document.getElementById(data).value;

	npn.appendChild(inpt);

	var dr=document.getElementById('curOrder');

	if(dr.getElementsByTagName('img').length==0)

		addToList=setListingOrder();


}


function writeFields(imageList) {


	var npn=document.getElementById("newOrder");

	for (var x=0; x<imageList.length; x++) {

		var inpt=document.createElement("input");

		inpt.type="hidden";

		inpt.name="imageList["+x+"]";

		inpt.value=imageList[x];

		npn.appendChild(inpt);

	}		

}


var addToList;

</script>

Elsewhere in the _changephotos.php view I have two CHtml::ajaxSubmitButton calls

I have just started troubleshooting this code.

Thank you for your time.

5

the ajaxSubmitButtons are jQuery code, so using them ofc includes jQuery.

ev.preventDefault() error is probably because ev is not a event, so then it cant have preventDefault method.

dunno if it makes any diffrence but try:

$this->renderPartial(’_changephotos’,array(‘moneyShot’=>$moneyShot,‘toAdd’=>$toAdd),false,true);

6

The part I do not understand is why JQuery is getting involved with scripts that have nothing to do with it. Is there a way to keep JQuery scripts and plain JavaScript scripts separate?

The “true” value at the end should only matter if I have registered scripts or css in the view file, which I have not done. If I set that to true, won’t it simply reload the JQuery files that were already loaded in the main view?

7

But you do register scripts in the view.

8

So IS there any way to tell JQuery to keep its hands off my scripts? I’ve redone everything to fix some errors I had, and now I’m getting another error message that is in JQuery. I think pulling my scripts into that framework when they are not written for it could be making it not work.

9

But thats not how it works… You get an error refering to a jquery.js file due to some error in your jQuery code.

Yii or jQuery does not swallow up normal javascript code in any way.

10

But that’s the point: I HAVE NOT WRITTEN ANY JQUERY CODE. The only JQuery code on my page was generated by Yii from my Ajax submit buttons, and the code with the errors is completely unrelated to those. I am getting errors in jquery.js from code that HAS NOTHING TO DO WITH JQUERY.

WHY?!

11

What is the error you are getting and which version of jQuery is included?

edit: you allready posted the error, next time i’ll read better before posting ;)

12

The version of JQuery is 1.7.1

The error code is:

Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.appendChild]

It comes when I attempt to drop an image element on a div. My JavaScript code is:


function dragoverHandle(e)

{

	var str=e.target.id;

	if(str.search("dropBox")!=-1) { // needs notPublicdropBox to have a lowercase d

		e.preventDefault();

	}

}


function dropHandle(e)

{

	var str=e.target.id;

	if(str.search("dropBox")!=-1) {

		e.preventDefault();

		var data=e.dataTransfer.getData("Text");

		var droppedItem=document.getElementById(data);

		e.target.appendChild(droppedItem);

		var imgName=droppedItem.name;

		var imStr=e.target.parentNode.getElementsByTagName("input").id;

		for(var x=0;x<imStr.length;x++) {

			if(imStr[x].search("imgName")!=-1) {

				imStr[x].value=imgName;

			}

		}		

		var dr=document.getElementById('curOrder');

		if(dr.getElementsByTagName('img').length==0) {

			addToList=setListingOrder();

			e.target.parentNode.addEventListener("click",addToList,true);

			}

	}

}

I am told by Firefox that the error is in jquery.js (line 657):

for ( ; i < length; ) {

The context for that line:


// args is for internal usage only

each: function( object, callback, args ) {

var name, i = 0,

length = object.length,

isObj = length === undefined || jQuery.isFunction( object );

if ( args ) {

if ( isObj ) {

for ( name in object ) {

if ( callback.apply( object[ name ], args ) === false ) {

break;

}

}

} else {

for ( ; i < length; ) {

if ( callback.apply( object[ i++ ], args ) === false ) {

break;

}

}

}

// A special, fast, case for the most common use of each

} else {

if ( isObj ) {

for ( name in object ) {

if ( callback.call( object[ name ], name, object[ name ] ) === false ) {

break;

}

}

} else {

for ( ; i < length; ) {

if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {

break;

}

}

}

}

return object;

},

And I have one idea I am now going to hunt down.

13

Thank you, Hyprion. Really, the specific error is not important. I am now on about the fourth different error in this code, but the question is: Why is every one of my errors being reported as being in jquery.js lines when the code I wrote doesn’t even use JQuery? I just don’t understand how jquery.js is getting pulled into this.

14

Really, the specific error is not important. I am now on about the fourth different error in this code, but the question is: Why is every one of my errors being reported as being in jquery.js lines when the code I wrote doesn’t even use JQuery? I just don’t understand how jquery.js is getting pulled into this.