Custom WebPart and JQuery

Question

Hi

I have devleloped a visual webpart (which has Tab interface) used Jquery extensively. The scripts and html  are part of user control. When I use this webpart in SP2010 site page, the scripts are not getting executed.

Can I use scripts in usercontrol? Any clues.

Thanks

Answer 1

Hey,

This link will solve your problem

http://digsharepoint.blogspot.in/2012/02/how-to-add-jquery-to-sharepoint-2010.html

Let me know if you have any queries :)

---

"The Only Way To Get Smarter Is By Playing A Smarter Opponent"

Answer 2

Thanks I will try implementing this. Will post again if I have any problems.

Answer 3

Thanks Ravi, I was just scaned through this artical. My understanding is

I will have to create a user control which will have just scripts and css.

Add this control to master page.

Now use jquery function in my web part. I dont have to add the scripts in my webpart again.

Correct me if I am wrong.

Madhura

Answer 4

hey MKKI 

can you share any code block or js error msg that will help us to figure out the issue 

and have you made the controls runat server. if so then you have to use their client ids in the javascript.

otherwise jquery works fine with sharepoint as sunch there are no compatibility issues reported.

Answer 5

Thanks Ishaan

I will try to share the code snipet. I will have to isolate some code so that will be easy to understand.

Madhura

Answer 6

Hi Ishaan here is the sample code. very simple code. I dont know why this is not working.

Answer 7

Hi MKKi,

In my experience, you may use the user control's id in the jquery, and as in SharePoint, the user control's server id and client id is different, so you may use the server control's id and it is not work, you should use the client id.

And for the handle of the client id, you can refer the below article:
http://inside-sharepoint.blogspot.com/2010/04/handling-clientid-issues-in-sharepoint.html

Thanks,
Simon

---

Simon Huang

TechNet Community Support

Answer 8

Hey MKKi,

Jquery is quite interesting with Sharepoint 2010. Thats a correct step to use jquery on user controls.

JQuery can be very well used from User Controls. The necessity to use if from Master Pages or Page Layouts depends on the amount of content that needs the methods in your scripts(JQuery functions).

I have been using Jquery with usercontrols and they as webpart in turn since 2 years. So i can confidently say that your approach correct. Except that, am not sure if you need the Head, HTML, Body tags in your control.

Here is the sample code that am putting below, to make sure your jquery works.

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BannerAnnouncementsUserControl.ascx.cs"
    Inherits="BannerAnnouncements.BannerAnnouncementsUserControl" %>

<script type="text/javascript" src="/_layouts/styles/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

alert('this means your java script is working');

 function OpenDialog(url) {

var options = SP.UI.$create_DialogOptions();
            options.url = url;
options.title='This means your Jquery is working';
            //options.width = width;
            //options.height = height;
            options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
            SP.UI.ModalDialog.showModalDialog(options);
}
function CloseCallback(result, target) {
        //SP.UI.Notify.addNotification('Operation Successful!');
        //window.location.reload()

    }
</script>

<a onclick="OpenDialog('/')"> Click here</a>

Hope this helps..

---

Sreeharsha Alagani | MCTS Sharepoint 2010 | Linkedin | Blog

Answer 9

There are several ways to approach this, I solve this by putting the jQuery js file in the site assets library as I describe here: http://sharepointdragons.com/2012/04/18/adding-jquery-to-a-visual-web-part-and-then-implement-parentchild-radio-buttons/

---

Kind regards,
Margriet Bruggeman

Lois & Clark IT Services
web site: http://www.loisandclark.eu
blog: http://www.sharepointdragons.com

Answer 10

You don't need to put script in the master page unless your actually using it ON the master page.  That creates unnecessary load times, it's one more thing that needs to be downloaded and included.

You can create a helper class to regiter jquery as it's needed,

public static ScriptIncludeHelper

{

  public const string jqueryKey = "JQuery1.3.1";

public static RegisterJQueryForPage(Page page, Control control)

{

    page.ClientScript.RegisterClientScriptInclude(control.GetType(), jqueryKey, "/_Layouts/XYZ/JQuery/Jquery-1.3.1.min.js");

}

}

Then in your user controls OnInit event, you simple make a call to

ScriptIncludeHelper.RegisterJQueryForPage(Page, this);

Using this model, JQuery will only be put on the page when it's needed, and you can follow this same tactic for other scripts.  

E.g.  I usually create js script files for all my javascript instead of putting it in a <script> tag in ascx, this gives me the power of visual studio's javascript intellisense, and makes it generally straight forward to update scripts, compress them, cache them, etc etc.

For jQuery I actually have a file naming convention, like 

jquery-1.3.1.min.js

jquery-1.4.1.min.js

jquery-1.4.1.debug.js

etc, Then I modified my RegisterClientScriptInlcude for jquery to always load the highest version, and if I put something like "ScriptDebug=1" in the url query, it loads the debug version.

---

My Blog: http://www.thesug.org/Blogs/ryan_mann1/default.aspx Website: Under Construction

Answer 11

hey i think you are facing the issues due to structural issues as

1) in SharePoint  it is recommended to use <ScriptLinks> and <CssRegistration> tags instead of <script> <link>

2) you should not include <Html>,<Head> ,<body> and <form> tags in visual webpart as these are already included in the master page 

so, try the above code after removing theses tags.

if still face some issue feel free to send me the above code at [e-mail]