2

I'm create a Web Part like this. Open VS 2013 -> New Project -> App for SP -> SP hosted app. Then I add Client Web Part and named it AppPart and I've made some changes in Elements.xml .

<Content Type="html" Src="~appWebUrl/Pages/AppPart.aspx?{StandardTokens}&amp;BGColor=_BGColor_" />
<Properties>
  <Property Name="BGColor"
            DefaultValue="R"
            WebCategory="Custom Settings"
            Type="enum"
            WebDisplayName="Background Color"
            RequiresDesignerPermission="true">
    <EnumItems>
      <EnumItem Value="R" WebDisplayName="Red"/>
      <EnumItem Value="B" WebDisplayName="Blue"/>
      <EnumItem Value="G" WebDisplayName="Green"/>
    </EnumItems>
  </Property>
</Properties>

Inside AppPart.aspx I made some changes:

<script src="../Scripts/AppPart.js"></script>
<div id="content" style="width:200px;height:200px">
    <h2>Hello from AppPart</h2>
</div>

And I'm also have AppPart.js file like this:

var sProp = decodeURIComponent(getQueryStringParameter("BGColor"));
changeBGColor(sProp);
document.write('Value of BGColor : ' + sProp + '</br>');
function changeBGColor(color) {
switch (color) {
    case 'R':
        $("#content").css("background", "Red");
        break;
    case 'B':
        $("#content").css("background", "Blue");
        break;
    case 'G':
        $("#content").css("background", "Green");
        break;
    default:
        $("#content").css("background", "red");
        break;
}

}

And then I deployed it. Go to my site -> Page -> Edit -> Insert -> App Part -> Select my apppart. BUT, problem is, the background of div content doesn't change, even when I'm hard code like this in my AppPart.js it still don't effect or even when I use console of chrome and type like this, I got error (Cannot read property 'css' of null).

$("#content").css("background","red");

So, what am I missing, I don't know why jQuery don't effect to my AppPart.

  • 1
    make sure your stuff shoud be into $(document).ready(function(){ // add your stuff }); – Jignesh Rajput Sep 3 '14 at 9:57
1

An App part (from a SharePoint app) is rendered as an iframe when placed on a page.

Hence the scripts that are loaded on the page where you place it will not be added to the iframe. An iframe is a completely separate document with its own DOM.

So you would have to load in jQuery also in your app part, by using a <script type="text/javascript" src="PATH TO jQuery"></script> style of tag in the app part itself.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.