JQuery in Visual Web Part SharePoint Foundation

Question

I am unable to make this simple JQuery function to fire in sharePoint Foundation.

These are some of the steps I followed from http://sharepointdragons.com/2012/04/18/adding-jquery-to-a-visual-web-part-and-then-implement-parentchild-radio-buttons/

Step 1 : Add the jquery-1.4.1.js file to SiteAssets

---

Step 2 : Create a Visual Web Part in a Web Farm Solution.

---

Step 3 : Add the below code

---

Step 4 : Deploy the web Part on the Server (Successfull as non-jquery functionality is working).

---

step 5: But the jquery functionality is not working.

Here is all the code of the web part

WebPart1.ascx

    <%@ 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="SanctuaryVisualWebPartUserControl.ascx.cs" Inherits="SanctuaryVisualWebPart.SanctuaryVisualWebPart.SanctuaryVisualWebPartUserControl" %>
<%@ Register assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.WebControls" tagprefix="asp" %>
<SharePoint:ScriptLink ID="ScriptLink1" runat="server"  name="~sitecollection/SiteAssets/jquery-1.4.1.js "  />


  <style type="text/css">
       .style1
    {
        width: 100%;
        height: 247px;
    }
    .style2
    {
        width: 398px;
    }
    .style3
    {
        width: 421px;
    }
</style>
       <script type="text/javascript">
           $(document).ready(function () {

              alert("Fired using JQuery Document ready");
               $("#btnJQ").click(function () {

                   $("#tboxJQ").val("Fired using JQuery");
                  alert("Fired using JQuery");
               });
           });
              </script>

<table bgcolor="#CCFFCC" border="3" cellpadding="3" cellspacing="3" 
    class="style1">




    <tr>
    <td>
        <asp:Button ID="btnJQ" runat="server" Text="JQuery" Width="110px" />
        </td>
    <td>
        <asp:TextBox ID="tboxJQ" runat="server"></asp:TextBox>
        </td>
    </tr>
</table>

Step 6 :The first alert from document.ready is fired but the next alert from inside the buttonClick is not.

Any help would be greatly appreciated

Answer 1

Your selector for tboxJQ is wrong - If you're referencing an element by id you need to prefix it with a hash. So....

$("tboxJQ").val("Fired using JQuery");

should be

$("#tboxJQ").val("Fired using JQuery");

Answer 2

After doing some research, I was able to find out that the above method accessing the element id's will not work in sharepoint because when the web part is embedded into the sharepoint master page, the id's change. The only way this could have worked is if the clientIdMode="Static" was set in which case jquery would be able to access the elements.

But that cannot be used in sharepoint Foundation or Sharepoint 2010 as they are built on .net 3.5 framework and the above capability is available only in .NET 4.0.

A work around to this could be using html elements

<%@ 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="JqueryWebPartUserControl.ascx.cs" Inherits="JqueryWebPart.JqueryWebPart.JqueryWebPartUserControl" %>
<SharePoint:ScriptLink ID="ScriptLink1" runat="server"  name="~sitecollection/SiteAssets/jquery-1.4.1.js"/>

 <script type="text/javascript">
     ExecuteOrDelayUntilScriptLoaded(
   function () {
       $(document).ready(function () {

           $('#tboxJQ').val("Fired using JQuery Ready");

           $('#btnJQ').click(function () {

               $('#tboxJQ').val("Fired using JQuery");

           });
       });
   }, "sp.js");
              </script>


<table>
<tr><td></td></tr>
<tr>
<td>
    <input id="btnJQ" type="button" value="button" /></td>

</tr>
<tr>
<td>
    <input id="tboxJQ" type="text" /></td>

</tr>
</table>

Hope this was helpful

Answer 3

try to change as below:

instead of

$("#tboxJQ")

use

  $('#' + '<%=this.TextBox1.ClientID  %>')

Answer 4

Thanks to Yahya M. Ammouri, I have been able to invoke a jQuery method 'alert' with the following piece of code. In a visual web part you need to pass the clientID of an element and no the element id as you can for a normal web page.

The below piece of code be of help for reference:

<script type="text/javascript">
    $(function () {
        $('#' + '<%=this.btnWow.ClientID  %>').click(function () {
            alert("Hello world!");
        });
    });    
</script>


<div>
<asp:Button ID="btnWow" Text="click" runat="server" />
</div>