How to display a simple dialog in SharePoint 2010 without breaking the page? - sharepoint-2010

I've worked on this for several hours today and am getting no where. Hoping someone can step in and please help.
All I want to do is display a simple message in a pop up dialog to tell users of some changes coming to a SharePoint 2010 site. I never thought this would be so difficult!
I've gone through a dozen links from a Google search but nothing has helped.
The only thing that sort of works is this code that I put into a Content Editor Web Part:
<script type="text/javascript">
function codeAddress() {
alert('ok');
var options = {
Title: "Survey",
height: 500
};
_spBodyOnLoadFunctionNames.push("codeAddress");
}
window.onload = codeAddress;
</script>
But, the problem with this code is that after I click Ok, the page behave strangely. The java script of the page does not work, and even editing the page is messed up until I delete the webpart with the code.
I suspect that the problem has to do with this:
_spBodyOnLoadFunctionNames.push
But if I remove it then the pop up does not work.
In case it's not clear, my goal is to show any type of dialog in which I can type a sentence or two to tell the user something. Then they can click OK and give full control back to the page.
Please please someone help!

Shame on Google for not leading you directly to SP.UI.Modal.Dialog.showModalDialog().
<script>
ExecuteOrDelayUntilScriptLoaded(showDialog,"sp.js");
function showDialog(){
var options = SP.UI.$create_DialogOptions();
options.title = "My Amazing Dialog Box";
// create a dummy HTML element for the body of your dialog box
var div = document.createElement("div");
div.appendChild(document.createTextNode("Some text inside my dialog box."));
options.html = div;
SP.UI.ModalDialog.showModalDialog(options);
}
</script>
If you want to put that in a content editor web part:
Save the above code into a text file
Upload that text file to a document library on your site
Add a content editor web part to the page where you want the dialog to appear
Edit the web part, opening up the web part properties panel on the side of the screen
Paste the URL of the text file that you uploaded into the "Content Link" property
This method prevents SharePoint from stripping your JavaScript out of the content editor web part, and lets you use that same script on multiple pages.

Related

Contact form 7 is not working with Safari due file-upload button

As you already know; the contact form, build with the CF7 plugin, can not be submitted when using Safari and when the contact form contains a file upload button. The problem only occurs when the user is leaving the upload field blank, so without selecting a file.
For me, the best solution for this problem is to remove the file upload button when there is no file selected. I've partly succeeded in doing this through the following Jquery script:
jQuery(document).on('submit', '.wpcf7-form', function (e) {
jQuery('input.wpcf7-file').each(function() {
if (jQuery(this).val() == '') jQuery(this).remove();
});
});
There is only one problem left… When the form is submitted with the upload field left blank, the button is being removed but the spinning arrow icon keeps spinning and nothing happens. ONLY, when the user is submitting the form for a second time, the submission will succeed.
So I want to expand the code shown above with a few lines which is automatically submitting the contact form a second time in case the file upload field is left blank. Because of this the user would not have to submit the contact form twice which can be VERY confusing…
Can someone help me out with this? I think this is also a good solution for many other users because I have read many topics from people having the same problem.
Thanks in advance & have a nice day!
Best regards
I think your problem stems from the fact that the "submit" method is firing after the form submission starts (or at least after the form fields are collected). So on a second click it re-submits the form without the empty fields.
I've implemented a version of your script but binding to the click on the submit button, rather than the submit method of the form. So far - it seems to be working.
I experimented with making it only trigger on the affected browses (using nagivator.userAgent.match()) but without much luck in the brief time I'm looking.
<script>
jQuery(document).on('click', '.wpcf7-form [type=submit]', function (e) {
jQuery('input.wpcf7-file').each(function() {
if (jQuery(this).val() == '') jQuery(this).remove();
});
});
</script>

FileUpload: choosen file isn't shown in preview

I am using the FileUpload in advanced mode. I used it before on another page in the same application where it works.
But now I am trying to use it again on another page and I can't get it working.
The 3 buttons (choose, upload and cancel) appear. When I choose a file the buttons "upload" and "cancel" are enabled but the choosen file isn't shown under the buttons.
When pressing the upload button, I get the following message (and my handler is never called):
Uncaught TypeError: Cannot read property 'submit' of undefined
Source: fileupload.js.xhtml?ln=primefaces&v=5.2:1
I have been looking with the debugger in the javascript. The error occurs in the following block of code:
upload: function() {
for (var a = 0; a < this.files.length; a++) {
this.files[a].row.data("filedata").submit()
}
},
I think this error is caused because after choosing a file, it is added to the array named files but data("filedata") should also exist and doesn't exist for the file. So the script tries to call the submit method of something undefined. I guess the undefined thing is an input which should be added to the html after choosing a file and which isn't added.
Does any one have an idea what might be causing this problem?
I have no idea whether it's relevant, but the page where the FileUpload works is for uploading images and allowTypes is specified there, while on this page I am uploading text files and the attribute allowTypes isn't specified. So I tried to choose an image file (gif or png) but that isn't shown either and in that case the buttons Upload and Cancel remain disabled.
When specifying allowTypes and selecting a bad file the error message is shown under the buttons, but when a matching file is selected it's still the same. It doesn't work.
I also posted this question on the Prime Community Forum: http://forum.primefaces.org/viewtopic.php?f=16&t=46724&p=145363&sid=54403839b9ad4535b70087b19048cf04#p145363
I have got it working now. The FileUpload was embedded in 2 panelGrids. After removing both panelGrids the FileUpload works.
It seems that a panelGrid can mess up the HTML element tree structure in such way that the FileUpload doesn't find it's own files list table any more (It uses JQuery to find it).
So, I can go on with my work.
But I still don't know what exactly happened, and I would like to know.

.innerHTML does not work on Windows Phone browser

I have a problem with a label field on my HTML page. I have set a label as below:
<label id="labelid" class="required control-label">Old Label Value</label>
Based on some other form input, I am trying to change the value of the label using javascript. The code for that is:
function change()
{
document.getElementById(labelid).innerHTML = "New Label Value";
}
For some reason, this works fine on a desktop browser. It also works fine on IOS and Android phones. But when i view this HTML page on a windows phone browser, the new value is not visible.
Please advise. I must be doing something silly, but i cant figure it out.
The basic objective is to update a label based on what the user has typed in a text field. Please let me know if there is another way of doing it instead of using labels.
Try this code. You didn't have quotes around labelid..
function change() {
document.getElementById("labelid").innerHTML = "New Label Value";
}
In reference to Windows phone browser, Mark Chamberlain had these comments to a similar issue:
"Standard Javascript injection is not enabled; most likely due to risk of attacks, web site spoofing etc. If you need to customize a web site that you own, you should implement your changes on the web site (server) side."
This could possibly extend to adding/deleting/modifying HTML is my interpretation.
From this link: https://social.msdn.microsoft.com/Forums/windowsapps/en-US/94d4a806-3eca-411e-adda-9e0fa8a6f467/how-to-inject-or-insert-the-javascript-code-in-webbrowser-windows-phone-7?forum=wpdevelop

IBM Domino custom login form load issue

I created domcfg db on my server, made a copy of $$LoginUserForm, customize it and set proper mapping. After all those operations i am able to modify my form as i wish, but ...
All the content, which is located below the login form (i didn't change it - only modify css) - doesn't render. Here is image:
All html code, which is located above table - is loaded, but below the table - whatever i'm adding - nothing is loading below the login form. What can be wrong with this?
The Sign In button closes the form. So comment out the Sign In button. You then need to add your own button and can then add more content below it.
Here's an example of a OneUI login form:
Moving submit below the form doesn't help, so i used dirty trick. Maybe for someone it will be helpful.
add jquery to header
add custom script like:
var content = "%your content%"
$( document ).ready(function() {
$( "form" ).append(content)
});

how to open specific page on Google's docs viewer

I'm using google's docs viewer to show a pdf document in a html page and I would like to open the document starting on page 20 instead of 1 for example.
There's hardly any documentation about Google's docs viewer service. They say in its webpage https://docs.google.com/viewer that the service only accepts two parameters (url and embedded) but I've seen other parameters searching the web, like "a", "pagenumber", "v" and "attid", none of them did anything to me. I've tried to add #:0.page.19 at the end of my url (that's the id of the div containing page number 20 inside the body google creates) but it just ignores it or works in a random way.
Do you guys know how to tell google docs viewer to show the document starting on a specific page?
I found a solution I'll post here just in case somebody is in the same situation.
Every page inside google's docs viewer iframe has an id like :0.page.X, being X the number of the page. Calling the service like this
<iframe id="iframe1" src="http://docs.google.com/gview?url=http://yourpdf&embedded=true#:0.page.20">
won't work (maybe because the pages ids are not yet created when the page is rendered?)
So you just have to add an onload attribute to the iframe:
<iframe id="iframe1" src="http://docs.google.com/gview?url=http://yourpdf&embedded=true" onload="javascript:this.contentWindow.location.hash=':0.page.20';">
and voilà, the iframe will automatically scroll down after loading.
Note that page indices are zero-based. If you want to view the 20th page of a document in the viewer, you would need use the parameter :0.page.19
I found these two ones :
1) just an Screenshot(Image) of specific page (without navigation):
https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true&a=bi&pagenumber=12
2) a link to specific page of PDF in IFRAME (with navigation):
<script>
var docURL='https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true';
var startPAGE=7;
document.write('<iframe id="iframe1" onload="javascript:go_to_page('+ startPAGE +')" src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"width="600" height="400" ></iframe>');
function go_to_page(varr) { document.getElementById("iframe1").setAttribute("src", docURL + '#:0.page.'+ (varr-1) );}
</script>
p.s. then you can have on your website go to page 3
For me this solution didn't work with the current version of google viewer. Link to specific page on Google Document Viewer on iPad helped me out. Use &a=bi&pagenumber=xx as additonal URL parameter.
Got it working in the imbed viewer
By changing the url with a timout function, this becous the pdf is not directly shown
$(window).load(function() {
setTimeout(function() { $('.gde-frame').attr('src', 'https://docs.google.com/viewer?url=http://yourdomain.com/yourpdf.pdf&hl=nl&embedded=true#:0.page.15'); }, 1000);
});
Just copy the imbed url and add your hash for the page (#:0.page.15 > will go to page 15)
You might want to change the language to your own &hl=nl
and for the people how have to support ie8
if you use a boilerplate like this:
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
you can change the output of the link directly to the pdf like this,
if( $("html").hasClass("ie8") ) {
$('#linkID').attr('href', 'http://yourdomai.com/yourpdf.pdf');
};
the pdf will be shown in the pdf reader from IE
My PDF is 13 pages, but when I used hash: 0.page.13, it only jumped to page 10. I had to setTimeout and call the same function again:
Only needed to do that once per page load, then it seems to be synched properly. I am sure there is a more elegant solution:
var is_caught_up = false;
function pdf_go(page){
$('pdf_frame').contentWindow.location.hash=':0.page.'+page;
if (!is_caught_up){
setTimeout('pdf_catchup('+page+')', 500);
}
}
function pdf_catchup(page){
$('pdf_frame').contentWindow.location.hash=':0.page.'+page;
is_caught_up = true;
}