Forums (Obsolete)

Kentico Legend

Brenden Kehren - 3/27/2013 12:23:45 PM

jQuery, jQuery UI, Registration, etc

I've read and re-read all the articles on jQuery, noConflict() and everything else and still have a problem. I need to use the jQuery UI library. As of right now, I need to load it on every page as I'm unsure when content editors will be placing these areas on pages. What I've done is to include the jQuery and jQuery UI in my <head> section like so:

<script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

I then have 2 other .js files I include at the bottom of my page for showing a dialog window and the other for toggling a "read more" section for a FAQ or news article.

Below is dialog window

jQuery(document).ready(function($){
    $('#help-page').each(function () {
        var $link = $(this);
        var $dialog = $('<div></div>')
			.load($link.attr('href'))
			.dialog({
			    autoOpen: false,
			    title: '<h4>' + $link.text() + '</h4>',
			    width: 400,
                modal: true
			});

        $link.click(function () {
            $dialog.dialog('open');

            return false;
        });
    });
});

Here is the news toggle

jQuery(document).ready(function ($) {
    $(".ex_toggle .off a").click(function () {
        $(this).parents(".ex_toggle").removeClass("off").addClass("on"), $(this).parents("li").find(".details").show(function () {
            $(this).addClass("expand")
        })
    }), $(".ex_toggle .on a").click(function () {
        $(this).parents(".ex_toggle").removeClass("on").addClass("off"), $(this).parents("li").find(".details").hide(function () {
            $(this).removeClass("expand")
        })
    })
});

Some of the problem I know resides with using the webparts that use the /CMSScripts/jquery/jquery-core.js file but I'm hitting a brick wall now. I want to use all of the above but I think the main problem is the /CMSScripts/jquery/jquery-core.js file.

On my registration page I have the password strength control and also my dialog window. I get conflicts on this page and other pages that automatically include jquery-core.js all the time.

What can I do to resolve this? Never been a js or jQuery programmer so this is all foreign to me.

Certified Developer 13

kentico-jx2tech - 3/27/2013 3:23:50 PM

RE:jQuery, jQuery UI, Registration, etc

Following this article...
http://devnet.kentico.com/Knowledge-Base/API-and-Internals/How-to-register-and-use-the-native-Kentico-jQuery.aspx

Add this to you master page...

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
  CMS.GlobalHelper.ScriptHelper.RegisterJQueryUI(this.Page);
}
</script>

Both scripts will be added below the <body>, but before the page content, so you should be safe for the content editors.

your scripts at the bottom of the page should be fine except change the $ to jQuery or $j

Kentico Legend

Brenden Kehren - 3/28/2013 3:54:49 PM

RE:jQuery, jQuery UI, Registration, etc

As I mentioned, I did read that and still have the same results. Here is the contents of my master page:

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="/CMSPages/GetResource.ashx?stylesheetfile=/CMSScripts/jquery/jquery-ui.css"></link>
<link rel="stylesheet" href="/CMSPages/GetResource.ashx?stylesheetfile=/App_Themes/Site/Css/main.css"></link>
<script src="/CMSPages/GetResource.ashx?scriptfile=%7e%2fCMSScripts%2fCustom%2fmodernizr.custom.2.6.2.js" type="text/javascript"></script>
</head>
<script runat="server">
  protected void Page_Load(object sender, EventArgs e)
  {  
    CMS.GlobalHelper.ScriptHelper.RegisterJQueryUI(this.Page);
  }
</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<cc1:CMSWebPartZone ID="zoneMainContainer" runat="server" />
<div id="header" class="container">
 ...header
</div>
<div id="page" class="container">
...content
</div>
<div id="footer" class="container">
 ...footer
</div>
<script src="/CMSPages/GetResource.ashx?scriptfile=/CMSScripts/Custom/jquery.slides.js"></script>
<script src="/CMSPages/GetResource.ashx?scriptfile=/CMSScripts/Custom/jquery.placeholder.js"></script>
<script src="/CMSPages/GetResource.ashx?scriptfile=/CMSScripts/Custom/jquery.customforms.js"></script>
<script src="/CMSPages/GetResource.ashx?scriptfile=/CMSScripts/Custom/jquery.cornerz.js"></script>
<script src="/CMSPages/GetResource.ashx?scriptfile=/CMSScripts/Custom/app.js"></script>
<script src="/CMSPages/GetResource.ashx?scriptfile=/CMSScripts/Custom/toggle-news.js"></script>
<script src="/CMSPages/GetResource.ashx?scriptfile=/CMSScripts/Custom/jquery.help-modal.js"></script>
<script type="text/javascript">var addthis_config= {"data_track_addressbar":false};</script>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-511a6f4f77ef272c"></script>

And every one of my js files reference jQuery vs. $ or j$. I continue to receive errors that jQuery is null and on the registration page (with password strength checker) I receive "Line: 241 Error: Unable to get value of the property 'length': object is null or undefined" and "Line: 16 Error: Exception occurred."on the jquery/jquery-core.js file.


Kentico Legend	Brenden Kehren - 3/28/2013 4:18:12 PM RE:jQuery, jQuery UI, Registration, etc Ok I need to retract my statement. It works on the majroity of the pages but the one that still gives errors is the registration page with the password strength checker control on it.

Certified Developer 13

kentico-jx2tech - 3/28/2013 6:06:28 PM

RE:jQuery, jQuery UI, Registration, etc

good that some progress has been made :)

you no longer need the following script because the Kentico versions of jquery and jqueryui should be added to all the pages now.

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

do you have any additional scripts added to the registration page?


Kentico Legend	Brenden Kehren - 3/29/2013 7:48:53 AM RE:jQuery, jQuery UI, Registration, etc I do not have additional scripts registration page other than what I've already listed. Additionally, is the default jquery.ui.css file included as well or will I need to keep that?


Certified Developer 13	kentico-jx2tech - 3/29/2013 8:43:38 AM RE:jQuery, jQuery UI, Registration, etc that call will add the styles from ~/CMSScripts/jquery/jquery-ui.css. there is another call you can make that will allow you to choose whether or not the styles will be registered. this would be good if you rolled your own theme. CMS.GlobalHelper.ScriptHelper.RegisterJQueryUI(Page page, bool withStyles)


Kentico Legend	Brenden Kehren - 3/29/2013 7:51:21 AM RE:jQuery, jQuery UI, Registration, etc By the way, after I removed my reference to the UI library, it all seemed to work just fine.


Certified Developer 13	kentico-jx2tech - 3/29/2013 8:48:13 AM RE:jQuery, jQuery UI, Registration, etc good. The duplicate library might have clobbered the /CMSScripts/membership.js file added before it. membership.js appears to control the password strength.


Kentico Customer Success	kentico_martind2 - 4/8/2013 5:28:59 AM RE:jQuery, jQuery UI, Registration, etc Hi FroggEye, so can we consider your issue for solved at the moment? Best regards, Martin Danko