jCrop not working in Sharepoint webpart or app page - sharepoint

Hello im having problems migrating my project i made in asp.net with jquery 1.4.3 and jcrop, into the sharepoint environment. It works perfectly even in IE.
This is my scriptcode:
<link href="Scripts/jquery.Jcrop.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-1.4.3.js"></script>
<script type="text/javascript" src="Scripts/jquery.Jcrop.js"></script>
<script type="text/javascript" defer='defer'>
jQuery(window).load(function () {
var jcrop_obj;
jQuery('#imgCrop').Jcrop({
onSelect: storeCoords,
aspectRatio: 1 / 1
}, function () { jcrop_obj = this; });
});
function storeCoords(c) {
jQuery('#X').val(c.x);
jQuery('#Y').val(c.y);
jQuery('#W').val(c.w);
jQuery('#H').val(c.h);
};
</script>
This is the elements i use exactly the same as i use in my solution outside sharepoint that works.
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlUpload" runat="server">
<asp:FileUpload ID="Upload" runat="server" />
<br />
<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />
<asp:Label ID="lblError" runat="server" Visible="false" />
</asp:Panel>
<asp:Panel ID="pnlCrop" runat="server" Visible="false" Width="956px">
<asp:Image ID="imgCrop" runat="server" />
<br />
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />
<asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
</asp:Panel>
<asp:Panel ID="pnlCropped" runat="server" Visible="false">
<asp:Label ID="Label1" runat="server" Text="Here is your cropped picture:"></asp:Label>
<br />
<asp:Image ID="imgCropped" runat="server" />
</asp:Panel>
</div>
</form>
</body>
Of course i also have the right elements for it and so on, since it works when running it without sharepoint.
When i debug my code, both the jquery and the jcrop is loaded properly, and when i run through the code and breakpoint where i call the .Jcrop method, it actually goes into the jcrop file and runs through it with no errors, however when it is done running there is no jcrop stuff on my picture. i tried in both firefox and internet explorer.
I don't see any reason to include any serverside code since thats not the problem whatsoever.
My question is really, is there something i have to take into concern when running it through an application page in sharepoint.
Thanks in advance!

Well I'm assuming this is on an ASPX webpart page or in a webpart solution.
SP 2007 has 7K lines of CSS code, SP 2010 has 13K lines of CSS code.
Your CSS may be conflicting with SharePoint's. Try using strong names and see if it behaves correctly.
Also, wrap your HTML code in a table. This helps from not inheriting most core CSS styles.
<table><tr><td>
ASPX html here
</td></tr></table>

Related

HTMLEditorExtender width cannot fit %100

Using ajaxcontroltoolkit.as my horror film.
HTMLEditorExtender stays its prerendered width as it is even if I resize the Web Browser
it doesnt detect width resizements:Stays as how it is.
and need a full refresh of browser (F5) makes HTMLEditorExtender to re calcluate its width.
so.
is there a standart way to fix this problem ? otherwise I will use jquery to slap it.or remove this horror control.
<asp:TextBox ID="tbEditor" runat="server"
TextMode="MultiLine" Rows="10" style="width:100%">
</asp:TextBox>
<asp:HtmlEditorExtender ID="tbEditor_HtmlEditorExtender" runat="server"
Enabled="True" TargetControlID="tbEditor">
</asp:HtmlEditorExtender>
a css rule
.containerClass .ajax__html_editor_extender_container
{
width: 100% !important;/*important is really important at here*/
}
and a surrounding div, fixed problem.
<div class="containerClass">
<asp:TextBox ID="tbEditor" runat="server"
TextMode="MultiLine" Rows="10" style="width:100%">
</asp:TextBox>
<asp:HtmlEditorExtender ID="tbEditor_HtmlEditorExtender" runat="server"
Enabled="True" TargetControlID="tbEditor">
</asp:HtmlEditorExtender>
</div>
fixed my problem.hope this helps someone too.

JuiceUI Dialog Post Back Script Error: Circular reference in value argument not supported

I am getting a strange script error on post back if I have a JuiceUI Dialog control on the page, regardless if it is used or not. I can't find anything out there on this, so I am sure that I am doing something wrong. Can any one provide any help? Below is my .aspx page, there is no code behind.
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
<form id="form1" runat="server">
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="_DefaultDiv" class="basic-dialog" title="Basic dialog" runat="server">
<p>
This is the default dialog which is useful for displaying information. The dialog
window can be moved, resized and closed with the 'x' icon.</p>
</div>
<juice:Dialog ID="Dialog1" TargetControlID="_DefaultDiv" AutoOpen="false" runat="server" />
<p>
<input id="Button1" type="button" value="button" onclick="OpenDialog();" />
</p>
<script type="text/javascript">
function OpenDialog() {
$(".basic-dialog").dialog("open")
}
</script>
</form>
This might cause because an attempt has been made to invoke JSON.stringify with a value that is not valid. The value argument, an array or object, contains a circular reference.
I'd recommend checking out a new fork named Brew that resolves a lot of issues like this. If there's still an issue, I'd be happy to work with you to fix it.

User control incorrectly displaying in modalpopup extender

I'm placing a user control inside a modal popup. The problem is that it is getting displayed even before the popup is being invoked. If I replace the user control with anything else, it is hidden correctly. The moment I put back in the user control, I get the same issue.
Here is my code:
<asp:Panel ID="plSearch" runat="server" CssClass="modalPopup" Width="365">
<uc1:Search ID="searchSponsor" runat="server" Mode="ReturnID" />
<asp:Button ID="SearchCancel" runat="server" Text="Cancel" CausesValidation="False" />
<asp:UpdatePanel ID="upSearch" runat="server">
<ContentTemplate>
<asp:Label ID="lblSponsor" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:ModalPopupExtender ID="mpeSearch" runat="server" TargetControlID="lbSearch"
PopupControlID="plSearch" BackgroundCssClass="modalBackground" DropShadow="False"
Enabled="True" CancelControlID="SearchCancel" />
When I moved the linkbutton that was named as the modalpopup's TargetControlID to immediately above the mpe, it displayed correctly.

PlaceHolderMain in Sharepoint showing breadcrumb and title

I am trying to print the breadcrumb and title of a page in share point using a custom.master. I tried using the following code:
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server" />
This is not outputting anything to the screen. The breadcrumb and title are displaying in
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" />
However I want to get the content out from there and display it in a different part of the page. How would I go about doing this?
You can specify what's inside your PlaceHolderMain and move all of its default contents to somewhere outside. Then, add the Breadcrumb placeholders where they belong.
That is, in your master page you make an epmty "PlaceHolderMain":
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">
<!--nothing inside here -->
</asp:ContentPlaceHolder>
And you will have to fild place somewhere else on your page for the following placeholders:
<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"/>
<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server"/>
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server"/>
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server"/>
<asp:ContentPlaceHolder ID="PlaceHolderPageImage" runat="server"/>
<asp:ContentPlaceHolder ID="PlaceHolderBodyLeftBorder" runat="server"/>
<asp:ContentPlaceHolder ID="PlaceHolderNavSpacer" runat="server"/>
<asp:ContentPlaceHolder ID="PlaceHolderTitleLeftBorder" runat="server"/>
<asp:ContentPlaceHolder ID="PlaceHolderTitleAreaSeparator" runat="server"/>
<asp:ContentPlaceHolder ID="PlaceHolderMiniConsole" runat="server"/>
<asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat ="server" />
<asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/>
<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat ="server"/>
<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat ="server"/>
<asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat ="server"/>
<asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server" />
See the "minimal master" articles from Microsoft http://msdn.microsoft.com/en-us/library/aa660698.aspx as well as from Heater Solomon: http://www.heathersolomon.com/blog/archive/2007/01/26/6153.aspx
Also, take a look at how Microsoft people have made their master pages bundled with MOSS. You can find them on your MOSS server, "\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\FEATURES\PublishingLayouts\MasterPages"

How to output Site title on a sharepoint masterpage

I have a custom masterpage in sharepoint and want to output the site title in a different part of the page. Currently I can see the site title which is outputted using the following code:
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" Visible="true" />
Apparently using
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" Visible="true" />
Should also output the title but is returning nothing. Any ideas what is going wrong?
The Code you have mentioned are the Content Place Holders where you can replace the Content, You can place the register the below tag in the top the page and
<%# Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
And place the below code to get the Title of the Page
<SharePoint:ProjectProperty Property="Title" runat="server" />
If you want to do that in the master page level you can do with the below code
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" Visible="true">
<SharePoint:ProjectProperty Property="Title" runat="server" />
</asp:ContentPlaceHolder>
Unless you override the above content place holder you will get the Title of the Web Automatically
This can be done by using the ProjectProperty control (see http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.projectproperty.aspx)
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">
<SharePoint:ProjectProperty property="Title" runat="server" />
</asp:ContentPlaceHolder>

Resources