I am using jcookie to store certain information (user cart) and the idea is to re display the contents of the cart when the user visits the website at some other point in future.
So if user adds the item to his cart and i) closes the browser and opens a new browser window after some time OR ii) opens a new tab : In both cases should see the item added to the cart
I am using jcookie.js library.
The code I am using to create cookie and add cart contents to it is:
$.cookie('rented_car', $(rentContainer).html());
$.cookie('rented_car_timings', $(divRentalSumm).html());
Also when the page loads, I have in my index.html
<script type="text/javascript">
window.onload=checkCookies;
</script>
where checkcookies() is defined as follows:
function checkCookies(){
var rented_car_timings_cookie = $.cookie("rented_car_timings");
var $rentTimingsContainer = $('<div class="module">' + rented_car_timings_cookie + '</div>');
var rented_car_cookie = $.cookie("rented_car");
var $rentContainer = $('<div class="module">' + rented_car_cookie + '</div>');
if(rented_car_timings_cookie && rented_car_cookie){
$('#rentit').html('');
$('#rentit').append($rentTimingsContainer);
$('#rentit').append($rentContainer);
}
}
Now the problem I am seeing is that the cookies work if I refresh the same page or open a new tab in the same Browser window: I am able to see content added to cart.
however, If I open a new window , then I do not see the same . Can anyone please point the problem in my logic?
$.cookie('rented_car', $(rentContainer).html(),{ expires: 20});
works as this sets expiration time explicitly, default expiration is when browser session closes.
Related
hi i'm having a problem with sharepoint web part
so i want to call message box everytime user input is wrong
so for example if user input password more than 15 than there will be message box that says"Password lenght max 15"
when i wrote
Messagebox.show("Password lenght max 15") it works fine,but if i try to fill password more than 15 than it return error that says sharepoint cannot support message box
so i'm wondering if there's a way to use message box in sharepoint
any help will be appreciated
FYI i put the Messagebox.show in my save button click
thank you
sorry if my english are bad
Message box is not supported in ASP.NET Application so similar in Sharepoint.
SharePoint Support MessageDialog.
SP.UI.ModalDialog.showModalDialog(options)
If you want to open through server side, then you need to create JS function and call it through C# or as below
hyperLink.NavigateUrl = "javascript:SP.UI.ModalDialog.ShowPopupDialog('" + url + "')";
You can send proper string as well using options.
This may be old post, but accepted answer does not work too good in Sharepoint 2013, at least for me. Instead, I have to use this script:
<script ID="callMyFunction">
function myFunction() {
var element = document.createElement('div');
element.innerHTML = 'Hello World, I am the dialog content';
var options = {}
options.title = "Name of dialog";
options.width = 400;
options.height = 300;
options.html = element;//MSDN states it should be string, which is wrong. This is supposed to be DOM element
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);//This starts function "showModalDialog" after loading "sp.ui.dialog.js", if it was not loaded yet.
}
</script>
and call it from my WebPart like this:
Page.ClientScript.RegisterStartupScript(this.GetType(), "callMyFunction", "myFunction()", true);
If you want to use Ali Murtaza answer, remember to load script below, as it seems to be not loaded by default:
<script type="text/javascript" src="_layouts/15/sp.ui.dialog.js"></script>
I am planning to generate direct download link from the client side when user open a document in document details window.
In order to do that I want to access noderef of the opened document. Can someone mention how to access noderef of the opened document from alfresco share client side (javascript).
Good for you that I've done that in the past for a customer.
You'll need to change the following files (create a module or just override them)
document-links.get.properties (add a new label for download)
document-links.get.head.ftl (include your new overridded client side JavaScript)
document-links.get.html.ftl (add a new field like the current page url)
<h3 class="thin dark">${msg("page.download")}</h3>
<div class="link-info">
<input id="${el}-download" value="${document.node.contentURL}"/>
${msg("page.copy")}
</div>
document-links.js (client side JavaScript)
onReady: function DocumentLinks_onReady() {
// Display copy links
if (this.hasClipboard) {
Dom.removeClass(Selector.query("a.hidden", this.id), "hidden");
}
// Make sure text fields auto select the text on focus
Event.addListener(Selector.query("input", this.id), "focus", this._handleFocus);
// Prefix some of the urls with values from the client
Dom.get(this.id + "-page").value = document.location.href;
// added Download link
var contentURL = Dom.get(this.id + "-download").value;
Dom.get(this.id + "-download").value = window.location.protocol + "//" + window.location.host + "/alfresco/d/a" +
contentURL.replace('api/node/content/', ''); }
I'm trying to display a div inside tab playlists if the href contains a spotifyURI. This will be used to display a playlist under a tab.
Step by step this is my problem:
Click playlist tab and then click the "My playlist1".
The href is displayed in the playlist container under the tab playlists. (perfect so far)
Click the start tab and then click the playlists tab.
Instead of displaying the list of playlists the playlist container is show again. So the last used url is cached?
Then if the playlists tab is clicked again the url will be "reseted" and the list of playlists will be shown and playlist container hidden.
I'd like 4. to show the playlist list right away instead.
Is there a way to reset or what am I missing?
<script>
$(document).ready(function() {
sp = getSpotifyApi(1);
var m = sp.require("sp://import/scripts/api/models");
updateTabs();
m.application.observe(m.EVENT.ARGUMENTSCHANGED, updateTabs);
function updateTabs()
{
console.log(m.application.arguments);
var args = m.application.arguments;
$('.section').hide();
if (args[1] == "spotify") $("#playlist").html("args:"+args).show();
else $("#"+args[0]).show();
}
});
</script>
<div id="playlist" class="section">Container for playlist content</div>
<div id="start" class="section">Welcome</div>
<div id="playlists" class="section">
My playlist1
My playlist2
</div>
Thanks alot for all replys!
Here is how I will proceed using JQuery.
First of all you need to use the Localstorage :
var stor = sp.require("sp://import/scripts/storage");
Then if for exemple you get a list of playlist you can build the list like this
for (var i=0; i<d.playlists.length; i++) {
$('#playlists').append('My <a id="p' + i + '"href="'+ d.playlists[i] +'">playlist1</a>');
$('#playlists #p'+i).live('click', function(e) {
e.preventdefault();
stor.set('choosenplaylist', d.playlists[i]);
});
}
This was for the storage now for when changing tad :
if (!stor.get('choosenplaylist')=='') {
location.href=stor.get('choosenplaylist');
}
Okay this is a suggestion and it need to be tested regarding to your app.
Im trying this out now, and i can reproduce your bug (im guessing it's a bug, the tab should replace the url in my opinion)
But, until it's fixed, my best guess is to capture the playlist links in an event handler and cancelling the original event, after cancelling you replace the content with the appropriate playlist view.
Tab test code (on gist.github.com)
I've abstracted the actual view binding from the event handler, and added a click event hook that calls the abstract view binder instead of the "real" one, this also supports deep linking into the an app
I have a page hosted in 'virtualcasa1' domain opening a modal dialog:
var options = {
title: "Repro",
width: 400,
height: 600,
url: http://domain2:999/sites/blank/_layouts/XDomainTest/XDomainTestTarget.aspx //[1]
//url: http://virtualcasa1/sites/blank/_layouts/XDomainTest/XDomainTestTarget.aspx [2]
};
SP.UI.ModalDialog.showModalDialog(options);
And I have this code to close it:
alert(document.domain);
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancelled clicked');
If both are in the same domain (case [2] above), the dialog closes well, no issues.
But - if target page hosted in the dialog (case [1] above), dialog does NOT close :-(
document.domain above shows the correct domain where page exists.
I suspect I'm facing a cross-domain issue here (duh), but how to fix it? Or am I wrong and issue is not XDomain-related?
Thanks much!
HTML5's postMessage is your answer.
https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
Your parent window that initiates the dialog must have the following javascript:
function listener(event) {
//alert(event.data);
if (event.data == 'Cancel') {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancel clicked');
}
else {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, event.data);
}
}
if (window.addEventListener) {
addEventListener("message", listener, false)
} else {
attachEvent("onmessage", listener)
}
Javascript for OK and Cancel buttons in your popup:
<input type="button" value="OK" onclick="parent.postMessage('Message to be displayed by the parent', '*');" class="ms-ButtonHeightWidth" />
<input type="button" value="Cancel" onclick="parent.postMessage('Cancel', '*');" class="ms-ButtonHeightWidth" />
Ajay's answer from the 1st of August 2014 is good, but it needs a bit more explanation. The reason for the failure to close the dialog is simple. Cross site scripting security features of modern browsers disallow a few things, one of which is the use of window.frameElement from within the framed window. This is a read-only property on the window object and it becomes set to null (or with IE, it actually throws an exception when you try to access it). The ordinary Cancel event handlers in the modal dialog conclude with a call to window.frameElement.cancelPopup(). This will fail of course. The ordinary Save handler where the Save worked on the server side results in SharePoint sending back a single line as the replacement document, which is a scriptlet to call window.frameElement.commitPopup(). This also will not work, and it's a real pain to overcome because the page has been reloaded and there is no script available to handle anything. XSS won't give us access to the framed DOM from the calling page.
In order to make a cross domain hosted form work seamlessly, you need to add script to both the page that opens the dialog and the framed page. In the page that opens the dialog, you set the message listener as suggested by Ajay. In the framed form page, you need something like below:
(function() {
$(document).ready(function() {
var frameElement = null;
// Try/catch to overcome IE Access Denied exception on window.frameElement
try {
frameElement = window.frameElement;
} catch (Exception) {}
// Determine that the page is hosted in a dialog from a different domain
if (window.parent && !frameElement) {
// Set the correct height for #s4-workspace
var frameHeight = $(window).height();
var ribbonHeight = $('#s4-ribbonrow').height();
$('#s4-workspace').height(frameHeight - ribbonHeight);
// Finds the Save and Cancel buttons and hijacks the onclick
function applyClickHandlers(theDocument) {
$(theDocument).find('input[value="Cancel"]').removeAttr('onclick').on('click', doTheClose);
$(theDocument).find('a[id="Ribbon.ListForm.Edit.Commit.Cancel-Large"]').removeAttr('onclick').removeAttr('href').on('click', doTheClose);
$(theDocument).find('input[value="Save"]').removeAttr('onclick').on('click', doTheCommit);
$(theDocument).find('a[id="Ribbon.ListForm.Edit.Commit.Publish-Large"]').removeAttr('onclick').removeAttr('href').on('click', doTheCommit);
}
// Function to perform onclick for Cancel
function doTheClose(evt) {
evt.preventDefault();
parent.postMessage('Cancel', '*');
}
// Function to perform onclick for Save
function doTheCommit(evt) {
evt.preventDefault();
if (!PreSaveItem()) return false;
var targetName = $('input[value="Save"]').attr('name');
var oldOnSubmit = WebForm_OnSubmit;
WebForm_OnSubmit = function() {
var retVal = oldOnSubmit.call(this);
if (retVal) {
var theForm = $('#aspnetForm');
// not sure whether following line is needed,
// but doesn't hurt
$('#__EVENTTARGET').val(targetName);
var formData = new FormData(theForm[0]);
$.ajax(
{
url: theForm.attr('action'),
data: formData,
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST', // For jQuery < 1.9
success: function(data, status, transport) {
console.log(arguments);
// hijack the response if it's just script to
// commit the popup (which will break)
if (data.startsWith('<script') &&
data.indexOf('.commitPopup()') > -1)
{
parent.postMessage('OK', '*');
return;
}
// popup not being committed, so actually
// submit the form and replace the page.
theForm.submit();
}
}).fail(function() {
console.log('Ajax post failed.');
console.log(arguments);
});
}
return false;
}
WebForm_DoPostBackWithOptions(
new WebForm_PostBackOptions(targetName,
"",
true,
"",
"",
false,
true)
);
WebForm_OnSubmit = oldOnSubmit;
}
applyClickHandlers(document);
}
});
})();
This solution makes use of the jQuery library, which our organization uses extensively. It is our preferred framework (chosen by me). I'm sure someone very clever could rewrite this without that dependency, but this is a good starting point. I hope someone finds it useful, as it represents a good two days work. Some things to note:
SharePoint does a postback on all sorts of events on the page, including putting the page into edit mode. Because of this, it makes more sense to trap the specific button clicks, both on the form and in the ribbon, rather than wholesale redefinition of, for example, the global WebForm_OnSubmit function. We briefly override that on a Save click and then set it back.
On any Save click event, we defeat the normal posting of the form and replace that with an identical POST request using AJAX. This allows us to discard the returned scriptlet when the form was successfully posted. When the form submission was not successful, perhaps because of blank required values, we just post the form properly to allow the page to be updated. This is fine, since the form will not have been processed. An earlier version of this solution took the resulting HTML document and replaced all of the page contents, but Internet Explorer doesn't like this.
The FormData api allows us to post the form as multipart-mime. This api has at least basic support in all modern browsers, and there are workarounds for older ones.
Another thing that seems to fail in the cross domain hosted dialog is the scrolling of the content window. For whatever reason, the height is not set correctly on the div with id s4-workspace, so we also set that in the solution.
EDIT:
Almost forgot. You may also need to add this control to your framed ASPX page, which can be done with SharePoint Designer:
<WebPartPages:AllowFraming runat="server"/>
I have exactly the same issue - a dialog opening a view page for an item works fine when opened from a site collection on the same web app/domain, but the Close button fails to work when opening the same item from a site collection hosted in a separate web application. I'm assuming it is a cross-domain thing so I've altered the solution to accomodate this restriction, however, I'm not 100% happy about it as it does make the overall solution a little awkward to use from a user-perspective. I've put the issue to one side for now due to project timescales, but I'm still curious as to why. The only things I can think of is the whole cross-domain thing causing it and that maybe it is there by design to prevent XSS security holes.
I have done a few searches for this issue and I have come up empty handed. I hope somebody can clarify things for me and point me in the right direction.
Problem: I have a page that displays a list of results after submitting a search form. When a user clicks on one of the results, the browser goes to a new page showing more information about the result. When the user then clicks the 'back' button to go pack to the results, my browser reloads the page and shows the top of the page instead of the result that was last clicked.
Goal: What I would like is this: when the user click's the back button, the browser should go back to the previous page and, instead of showing the top of the page, show the page at the previous position.
Solution: I am completely lost as how this result can be achieved. Could it have something to do with javascript, or headers sent to the browsers, maybe something to do with caching.
If this is incredibly important, I'd suggest investigating the following:
add ids to each outgoing link
use JavaScript to capture the onClick for the links
when a link is clicked, redirect the user to that link's id fragment identifier, then link out as desired
When the user hits the back button, they'll return to that specific link, e.g. http://www.example.com/#link27 instead of http://www.example.com/
You may be able to get some ideas from here:
Stack Overflow:
Is it possible to persist (without reloading) AJAX page state across BACK button clicks?
YUI Browser History Manager
Ajax Patterns: Unique URLs
You can use javascript and jquery to set the scroll position of the window and cookies to store the position to scroll to. In the javascript of the page with the search results you could have something like this:
var COOKIE_NAME = "scrollPosition";
$(document).ready( function() {
// Check to see if the user already has the cookie set to scroll
var scrollPosition = getCookie(COOKIE_NAME);
if (scrollPosition.length > 0) {
// Scroll to the position of the last link clicked
window.scrollTo(0, parseInt(scrollPosition, 10));
}
// Attach an overriding click event for each link that has a class named "resultLink" so the
// saveScrollPosition function can be called before the user is redirected.
$("a.resultLink").each( function() {
$(this).click( function() {
saveScrollPosition($(this));
});
});
});
// Get the offset (height from top of page) of the link element
// and save it in a cookie.
function saveScrollPosition(link) {
var linkTop = link.offset().top;
setCookie(COOKIE_NAME, linkTop, 1);
}
// Boring cookie helper function
function getCookie(name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(name + "=");
if (c_start != -1) {
c_start = c_start + name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end ==- 1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
// Another boring cookie helper function
function setCookie(name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = name + "=" + escape(value) +
((expiredays==null) ? "" : ";expires=" + exdate.toGMTString());
}
This assumes your search result links have class="resultLink".
The first part of the answer is that you use anchors to land on a page somewhere other than the top. So if I have this in my html at the bottom of my page:
<a name="f"></a>
then I can have the user land there by appending the anchor to the end of he url:
http://www.bullionvalues.com/glossary.aspx#f
So, if you are talking about ASP.Net you can place the anchor in a hidden field on the page info page and then read it from the search page by using: Page.PreviousPage property.
protected void Page_Load(object sender, EventArgs e)
{
if (Page.PreviousPage != null)
{
Object o = PreviousPage.FindControl("hfAnchor");
if (o != null)
{
HiddenField hf = o as HiddenField;
Response.Redirect(Request.Url+"#"+hf.Value);
}
}
}
I fixed this issue by sending headers with php. This was my solution:
header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: store, cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", FALSE);
Thanks to everybody for the help.