Forums (Obsolete)

Member

tspring-allegra - 6/13/2011 10:19:43 AM

jQuery

Hi

I want to use some jQuery functions on a page. I've added the link to the jQuery file used in Kentico via the Javascript webpart (and Linked file property) as described here: http://devnet.kentico.com/Forums.aspx?forumid=45&threadid=17610

This all works fine and the jQuery functions work, until I add a UserContribution webpart to the page. When the user clicks the edit button on the live site using the UserContribution webpart, the edit-box that opens seams to cause a conflict in jQuery and causes it to stop working.

I looked at the html source code when a UserContribution edit-box is open and there seams to be an additional javascript link to the jQuery file added when this happens. This means there are two links to the jquery-core.js file within the code, which I think is causing the conflict as I keep getting a "too much recursion" error message when the edit-box is open.

How can I get around the UserContribution webpart adding an additional link to the jQuery file on the page?

I'm not using an custom code or webparts. Only a Repeater and UserContribution webpart.

Thanks,
Tim


Kentico Developer	kentico_helenag - 6/13/2011 10:38:01 PM RE:jQuery Hi Tim, did you use the CMS.GlobalHelper.ScriptHelper.RegisterJQuery(Page) method? It will avoid jQuery conflicts on a page. Best regards, Helena Grulichova


Member	tspring-allegra - 6/14/2011 3:24:31 AM RE:jQuery Hi Helen As i'm not using any custom .Net code, where can I actually add this method? Thanks, Tim

Kentico Developer

kentico_helenag - 6/14/2011 5:01:34 AM

RE:jQuery

Hi Tim,

it is a Kentico API method which checks if there is a jQuery registration on the page. Unless so, it registers that. If it is already registered, it returns nothing. If you register jQuery twice, it can cause conflicts that is why there is a universal method for this.

You can add the code for example to an .ascx control (Adding custom code to the Portal page template) or code of web part or transformation or .aspx template.

Best regards,
Helena Grulichova


Member	tspring-allegra - 6/14/2011 9:06:22 AM RE:jQuery Hi, Thanks for the help. I tried adding: <% CMS.GlobalHelper.ScriptHelper.RegisterJQuery(Page); %> To a transformation on the page, but it doesn seam to do anything. Am I doing this right? Thanks, Tim


Kentico Developer	kentico_helenag - 6/15/2011 8:01:50 AM RE:jQuery Hi Tim, I am sorry for confusing, it only works if you add the code to a control. You can add the code to the Page_Load method of any control: ScriptHelper.RegisterJQuery(this.Page); Best regards, Helena Grulichova

Member

tspring-allegra - 6/15/2011 11:06:54 AM

RE:jQuery

Thanks for the advice, I created a custom control and it worked fine that way.

I did find out however that having two links to the jQuery file wasn't the cause of the error i'm getting.

I have a DIV on the page that dynamically loads in content from additional pages with jQuery using the .load method. e.g.

$('#divcontent').load('http://www.mydomain.com/mypage.aspx');

I also have a UserContribution webpart on the page for editing other elements.

Everything works fine until I click the edit option of the UserContribution webpart. Once the edit-box of the UserContribution opens up, clicking either the Save button or Close Document button causes a "too much recursion" error. Meaning once open I can't save any edited data or close the UserContribution edit-box.

Are there any conflicts with the UserContribution webpart and the jQuery .load method? If I remove the .load method from my javascript code, the UserContribution works fine.

Thanks,
Tim


Kentico Developer	kentico_helenag - 6/16/2011 6:56:03 AM RE:jQuery Hi Tim, User contributions do not use jQuery and should not cause the error directly. Do you use custom form controls on the edited document type (which use a JavaScript)? Could you please test the same scenario if you edit a simplified document type with a textbox only? Does it happen again? Best regards, Helena Grulichova

Member

tspring-allegra - 6/17/2011 4:41:24 AM

RE:jQuery

Hi Helen,

I've designed a simple test page to try and see where the error is coming from.

All I have is a basic Page (menu item) with a blank Simple template (one zone only) with no inheritance.

I've called it test.aspx.

On the page (test.aspx) I've placed a StaticHTML webpart that contains:


<div id="mycontent">loading</div>

and a link to my javascript file:


<script type="text/javascript" src="myfiles/js.js"></script>

That javascript file (js.js) has only the following code:


jQuery(document).ready(function($) {
	$('#mycontent').load("text.aspx");
});

In the page to load via the javascript above (text.aspx) there is just an EditableText webpart containing some basic HTML text.

Back in test.aspx I've also added an EditContribution webpart. Setting the "Allow editing by users" to All.

So test.aspx had 2 webparts (StaticHTML & EditableText), and text.aspx has one webpart (EditableText).

To keep things simple I added the CMS.GlobalHelper.ScriptHelper.RegisterJQuery(Page); code to eliminate any duplicate jQuery file links into the StaticHTML webpart code file: \CMSWebParts\Text\staticHTML.ascx.cs. At the end of the SetupControl() function.

Apart from that, I have no other webparts or custom code.

When I browse to test.aspx the jQuery works correctly and loads in the HTML content from text.aspx into the DIV "mycontent".

The problem comes when I try and click on the "Edit" link of the EditContribution webpart. I instantly get an error and the editbox fails to appear.

The error in Firefox4 Error Console translates as:

Error: too much recursion
Source File: http://localhost/testwebsite/WebResource.axd?d=--o-Y99KJIeMrb-EOiGpBNgAwf0hCGmDZo1vgTPc0xgb_jwE8ymBS0VVF7Fw2JLFmpTRr_zsQ8DlUnelfz6Zew73TcY1&t=634210400612724343
Line: 350

The error in IE8 translates as:

Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.21022; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C)
Timestamp: Fri, 17 Jun 2011 08:58:30 UTC
Message: 'theForm.__SCROLLPOSITIONX' is null or not an object
Line: 252945047
Char: 5
Code: 0
URI: http://localhost/testwebsite/test.aspx

I don't know if you can recreate this error?

The CMS version I'm running is: 4.1 Build : 4.1.3518

Thanks,
Tim

Kentico Developer

kentico_helenag - 6/19/2011 7:26:43 AM

RE:jQuery

Hi Tim,

do use two different pages or do you load the content of a page to the same page? According to your example you load the content of text.aspx to test.aspx.

By the way, the IE error seems to be more general but it could be the same one as in FireFox (http://devnet.kentico.com/Knowledge-Base/Content-Management/theForm-__SCROLLPOSITIONX-is-null-or-not-an-object.aspx).

Best regards,
Helena Grulichova

Member

tspring-allegra - 6/20/2011 10:54:11 AM

RE:jQuery

Hi Helen,

Yes I'm using two different pages. e.g. localhost/mysite/test.aspx has the jQuery script that loads in the HTML content from localhost/mysite/text.aspx via the jQuery .load method.

The problem seams to be when you use the .load method and any of the UserContribution webpart on the same page. If I remove the .load method the UserContribution webpart works fine.

Thanks,
Tim

Member

tspring-allegra - 6/20/2011 11:53:47 AM

RE:jQuery

Hi Helen,

I think I've fixed the problem!

I found the error was being generated by trying to load the whole page content of text.aspx into test.aspx (even though the whole page content of text.aspx was never displayed in the source code of test.aspx when loaded e.g. head, body, script tags etc of text.aspx).

To get around this, within text.aspx, I enclosed just the section of HTML I wanted to load inside it's own DIV tag with an ID.

e.g.

<div id="myHTML">Here is my text.aspx HTML</div>

I then altered my jQuery call to:

$('#content').load("text.aspx #myHTML");

This ignores the rest of the page code of text.aspx and only loads the HTML content within the DIV tag. This then makes the UserContribution webpart function normally.

So it was a simple solution all along. Everything seams to work ok now.

Thanks again for all the help!
Tim


Kentico Developer	kentico_helenag - 6/22/2011 2:28:09 AM RE:jQuery Hello, it could load the page recursively when you fired a postback. I am glad you were able to make it work. Have a nice day, Helena Grulichova


Kentico Developer	kentico_helenag - 6/22/2011 2:28:37 AM RE:jQuery Hello, it could load the page recursively when you fired a postback. I am glad you were able to make it work. Have a nice day, Helena Grulichova