Callout Popup is not working in App Part

Question

I have to display a popup as in SharePoint 2013 which is called Callout popup. for that I have to use callout.js file in my code.

I have tried it with Content Editor Web part and it is working fine but when I tried to use it in my App Part it is not working Correctly it is giving me following Error.

SCRIPT5009: 'IsElementRtl' is undefined
callout.js, line 1 character 8584

NOTE : I have tried following links.

Learningsharepoint Post

Alex Boev Blog

Anatoly's Blog

I have added following JS references in My App Part

<script type="text/javascript"src="../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript"src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript"src="/_layouts/15/init.js"></script>
<script type="text/javascript"src="/_layouts/15/mQuery.js"></script>
<script type="text/javascript"src="/_layouts/15/sp.ui.dialog.js"></script>
<script type="text/javascript"src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript"src="/_layouts/15/sp.js"></script>
<script type="text/javascript"src="/_layouts/15/callout.js"></script>

Answer 1

I have found the solution. the problem was I have not referenced all the files that are needed to referenced. I referenced like below and it worked for me :)

<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>

<script type="text/javascript" src="../Scripts/jquery.1.8.2.min.js"></script>

<script type="text/javascript" src="/_layouts/15/init.js"></script>

<script type="text/javascript" src="/_layouts/15/1033/initstrings.js"></script>

<script type="text/javascript" src="/_layouts/15/1033/strings.js"></script>

<script type="text/javascript" src="/_layouts/15/core.js"></script>

<script type="text/javascript" src="/_layouts/15/mQuery.js"></script>

<script type="text/javascript" src="/_layouts/15/callout.js"></script>

Answer 2

first see if its happning on all browsers? try it on more than one pc to see if its only a local issue!

before you do the above try moving the imports so that the first reference is callout.js

<script type="text/javascript"src="/_layouts/15/callout.js"></script>

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

<script type="text/javascript"src="/_layouts/15/MicrosoftAjax.js"></script>

<script type="text/javascript"src="/_layouts/15/init.js"></script>

<script type="text/javascript"src="/_layouts/15/mQuery.js"></script>

<script type="text/javascript"src="/_layouts/15/sp.ui.dialog.js"></script>

<script type="text/javascript"src="/_layouts/15/sp.runtime.js"></script>

<script type="text/javascript"src="/_layouts/15/sp.js"></script>

what i get from the error is your trying to use callout.js method before its referenced? so by putting it first we can see if it solves your issue

Answer 3

Nice Post.

I have also modified the Feedback Callout popup here. May It help to others also.