I'm trying to do something in Sharepoint 2010 that ought to be very simple, create a button that changes page (to a "create new item" form as it happens).
I set up a Content Editor Webpart and put a button in it (not in a form, because in Sharepoint the whole page is a form) with an "onclick" handler that changed the windows.location.href.
In 2010 the CEWP fights you a bit when you try to enter non-trivial HTML, it keeps escaping characters like "&" which can be a real pain. However in the end I got the right content entered.
It didn't work (the page just refreshed itself without changing URL). By checking on StackOverflow I found some recommendations for a more robust form for the CEWP content, which ended up as-
<script type="text/javascript">
function submit_rec(){
window.location.href = "<my server root URL>/Lists/Rec/NewForm.aspx";
return;
}
</script>
<button onclick="javascript:return submit_rec();return false"/>Submit a Recommendation</button>
Here's the strange part.
If I use Firebug and put a breakpoint in the submit_rec() function this works fine. But without a breakpoint, it goes back to the behaviour of always returning to the current page.
It seems there's a timing issue, or Sharepoint is taking control after my URL starts to load, and reloads the original page again!
Anyone seen this before and found a solution?
Ideas and suggestions woudl be much appreciated.
Regards: colin_e
Try this:
javascript:SP.UI.ModalDialog.OpenPopUpPage('/dev/KfD/KfDdev/Lists/Recommendation/NewForm.aspx');return false;
in the onclick event
Thanks to everyone who responded. With some more experimentation, and following hints from other threads on Stackoverflow, I was finally able to get this working.
My mistake with my last effort, using the Sharepoint builtin OpenNewFormUrl() function, was to expect this this would be a global function defined in a central library by SP. Turns out it's not, it has to be defined separately on every page where it's used, partly because it hard-codes the size of the popup frame for the library edit form.
(Yes this is ugly, like a lot of Sharepoint under the covers, anyway, I digress...)
I was able to get a Sharepoint 2010 style "popup" editor working with a button of the same style as the standard SP Document Centre "Submit a Document" button using the following code in a Content Editor WebPart. I have no idea what the script does in detail, I just copied it from the Document Centre site template home page-
<script type="text/javascript">
// <![CDATA[
function ULS18u(){var o=new Object;o.ULSTeamName="DLC Server";o.ULSFileName="default.aspx";return o;}
var navBarHelpOverrideKey = "wssmain";
// ]]>
function OpenNewFormUrl(url)
{ULS18u:;
var options = {width:640, height:720};
SP.UI.ModalDialog.commonModalDialogOpen(url, options, null, null);
}
</script>
<div class="ms-uploadbtnlink">
<button onclick="javascript:OpenNewFormUrl('/dev/KfD/KfDdev/Lists/Recommendation/NewForm.aspx');return false;" type="submit"><nobr><img alt="Submit a Recommendation" src="/_layouts/Images/uploaddoc.png"/> <span>Submit a Recommendation</span></nobr>
</button>
</div>
I'm wary of what setup this will do if (say) the users screen is smaller than the hard-coded popup size, and i'm still confused as to why my earlier (and much simpler) efforts failed, but at least I have a working soluion.
Related
This questions was already answered here - How to specify javascript to run when ModalPopupExtender is shown - but the accepted solution is not working for me.
The modalpopupextender is declared as below:
<ajaxtoolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btn"
PopupControlID="pnlModal" PopupDragHandleControlID="pnlModalDragHandle" BackgroundCssClass="modalBackground"
CancelControlID="btnModal" DropShadow="true"/>
The showing / hiding works fine. What does not work is linking a client script to the showing event of the modal popup extender. Based on the original question, I tried:
<script type="text/javascript">
function pageLoad() {
var popup = $find('mpe');
popup.add_shown(SetShowing);
}
function SetShowing() {
alert('showing');
}
</script>
Nothing happened. No alert, no errors. Reading further in the original post, I even added this line in the script:
Sys.Application.add_load(pageLoad);
The additional line had no effect. Any ideas why the original answer is not working? Thanks, I have been trying for hours.
I am not familiar with "modalpopupextender",
but why not just use some jquery?
$(document).ready(function(){
if ($('#mpe').is(':visible')){
//code for when MPE is visible here
}
});
jquery documentation
http://jsfiddle.net/N62g5/8/
I ended up having to attack this problem another way. None of the suggestions were able to successfully detect when the modalpopupextender was displayed. I instead changed my approach to handle user actions on the shown elements - like focusing on a textbox, etc. I could be confident the modalpopupextender was displayed if the user was interacting with it.
If you came here, I would direct you to the original post here - How to specify javascript to run when ModalPopupExtender is shown - and hope you were more successful than I was.
Thank you to everyone who commented, I sincerely appreciate your time.
I'm stuck modifying someone else's source code, and unfortunately it's very strongly NOT documented.
I'm trying to figure out which function is called when I press a button as part of an effort to trace the current bug to it's source, and I"m having no luck. From what I can tell, the function is dynamically added to the button after it's generated. As a result, there's no onlick="" for me to examine, and I can't find anything else in my debug panel that helps.
While I prefer Chrome, I'm more than willing to boot up in a different browser if I have to.
In Chrome, type the following in your URL bar after the page has been fully loaded (don't forget to change the button class):
var b = document.getElementsByClassName("ButtonClass"); alert(b[0].onclick);
or you can try (make the appropriate changes for the correct button id):
var b = document.getElementById("ButtonID"); alert(b.onclick);
This should alert the function name/code snippet in a message box.
After having the function name or the code snippet you just gotta perform a seach through the .js files for the snippet/function name.
Hope it helps!
Open page with your browser's JavaScript debugger open
Click "Break all" or equivalent
Click button you wish to investigate (may require some finesse if mouseovering page elements causes events to be fired. If timeouts or intervals occur in the page, they may get in the way, too.)
Inspect the buttons markup and look at its class / id. Use that class or id and search the JavaScript, it's quite likely that the previous developer has done something like
document.getElementById('someId').onclick = someFunction...;
or
document.getElementById('someId').addEventListener("click", doSomething, false);
You can add a trace variable to each function. Use console.log() to view the trace results.
Like so:
function blah(trace) {
console.log('blah called from: '+trace);
}
(to view the results, you have to open the developer console)
First let me say i dont know if this is possible the way im doing it so, i come here to the pros for help.
As the subject points out, What im trying to achieve is, that on button press, the content i want loaded appears in an iframe....
At first, what i did is this:
The iframe html is this:
<iframe id="my-frame" src=""></iframe>
and the simple form code is this:
<form action="#" method="post" target="my-frame">
<input type="file" name="localFile" id="localFile">
<input type="submit" id="Sbtn" name="Sbtn" value="submit">
</form>
Which should load what i selected inside the iframe i targeted called "my-frame" but instead, when i press
the button, it loads the currently opened page and i end up with like, one of those funhouse mirror effects that you see the same thing over and over and over inside itself.......or loads nothing at all, the iframe section stays white....
So i gave up and tried a bit of Js and again, not sure if this is the way to go about it but...well i gotta try something. So that said, i took out the "target="my-frame" from the form part of it, and put in this.
var myFrame = document.getElementById("my-frame");
var btn2 = document.getElementById("Sbtn");
var field2 = document.getElementById("localFile");
btn2.onclick = function(){
if(field2.value ==""){
//enter error message or something.
} else {
myFrame.src = field2.value;
return false;
}
}
Then when i do this, i get errors like "page cannot be found" etc...not matter what i do the page cant be found.
the exact error i get is this:
Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found.
to which i dont understand since im navigating to the file(whatever it is) via the wizard that comes up.
Now for further troubleshooting, when i do a regular link ...for example(pseudo code)
then it loads it in just fine...
so im lost.
Any ideas as to what im doing wrong or...something im missing?
Any tips,links, any help of any kind ill gladly and humbly accept.
thanks in advanced.
Somdow
http://somdowprod.net/
As I understand, what you want is:
Pick a file with an input type=file
Click submit
The selected file should appear inside an iframe (what you expect)
AFAIK, this can be done only with IE. Cause of the security settings for Chrome & FF are different (higher). You can try an alert command to see what really happen whith IE, Chrome & Firefox. Just change your code a bit like this :
...
} else {
alert(field2.value); ///--- add this line
myFrame.src = field2.value;
return false;
}
...
Open your file with all 3 major browsers (IE, Chrome, FF) & see result for each one when you choose file and click the submit button repectively.
As I tested, the result for IE was the full path on hard disk to the file :
C:\Documents and Settings\DUNGPRO\My Documents\A WALLPAPER\abc.jpg
While Chrome replace the path with a fakepath:
C:\fakepath\abc.jpg
And firefox just give you the filename only:
abc.jpg
Yes, the fake path or filename only are what make it displayed 404-File not found. Only IE gives you the expected path & that's why your code works properly with IE.
Hope you don't feel this is too bad, while almost these settings from Chrome & FF are default and impossible to change whithin your code. Just think they're for user's security & find another approach. Good luck.
dearest experts.
You helped me with this issue on this link below previousl:
How to I redirect to another page *after* printing document?
Things seemed to be working fine until this morning we discussed that users were submitting duplicate entries.
The reason for this is that once the user clicks to Submit their request,they are presented with a button that says, ">>>Click Here To Print Form<<<<".
Users are required to print this form but for some reason, they forget to do so.
In the event that they forget to print this form, they are taking back to the input screen with boxes still retaining the data they initially entered.
Is there a way to redirec them to results.aspx page, whether they print the form or not?
Please see current code and many thanks in advance.
<script type ="text/javascript">
function doPrint() {
var printContent = document.getElementById("pdmyop");
window.print(printContent);
document.location.href = "results.aspx";
}
</script>
**********************************
<asp:Button ID="btnPrint" runat="server" Text=">>>Click Here To Print Form<<<<" OnClientClick="doPrint(); return false;" />
You can add this script at the end of the SubmitForm procedure:
String script = String.Format("window.print(); window.location = '{0}';", ResolveClientUrl("~/results.aspx"));
ClientScript.RegisterStartupScript(insub.GetType(), "print", script, true);
I hope you can translate this code from C# to VB. If insub placed in an UpdatePanel use ScriptManager instead of the ClientScript.
Be warned, that this code doesn't work in Chrome (as well as any code those make redirect onto different page before document printed)
I have found out that sometimes the simplest things you want to do are almost impossible to fund an answer for. I have an ASPX page in ASP.NET V2 programmed in Visual Studio 2005. The ASPX page has a behind code ASXP.VB page and is tied to a .master file. I have two buttons [Button_Process] that will eventually call a program that will extract data from a SQL table -- no problem here. [Button_Process] will also call a javascript timer that goes for 7seconds (enough time for the extraction to happen). We're doing the timer delay so a cute little graphic appears and makes the person using the page think the systems working and not to double-click the button -- I know there's other ways of doing this but this is our approach for know). Again there is no problem here. test with an aleart delivers a message seven seconds after clicking the [Button_Process] button. Everything is good in the world up to this point.
I have a second button, [Button_PM_Upload], that is hidden during this time. It will eventually call a program on button-click to take the info from the previous button click collecting, compare it to data in a second SQL table and update the second SQL table. All I want to do is to make that second button visible after the seven seconds is up. I very simple task but I am having problems finding the solution.
In the master page between head tags is this timer code that works remarkably well:
<script type="text/javascript">
<!--
var secs
var timerID = null
var timerRunning = false
var delay = 1000
function InitializeTimer()
{
// Set the length of the timer, in seconds
secs = 7
StopTheClock()
StartTheTimer()
}
function StopTheClock()
{
if(timerRunning)
clearTimeout(timerID)
timerRunning = false
}
function StartTheTimer()
{
if (secs==0)
{
StopTheClock()
// Here's where you put something useful that's
// supposed to happen after the allotted time.
// For example, you could display a message:
alert("The timer is working properly")
//document.getElementsByName ("Button_PM_Upload").style.display=
"block";
}
else
{
self.status = secs
secs = secs - 1
timerRunning = true
timerID = self.setTimeout("StartTheTimer()", delay)
}
}
//-->
</script>
On the ASPX.VB behind code page is this code for that button click and it works very well too:
Protected Sub Button_Process_OnClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button_Process.Click
'This code fires of the timer in the master file
ClientScript.RegisterStartupScript(GetType(Page), "Startup", "<script type=text/javascript>InitializeTimer()</script>")
End Sub
Through days of reading and research I found out that the timer is clientside and the behind code is Serverside and "never the two do talk". Articles on the NET say that to make the second button "grabable" by the javascript, I must instead of saying (visible=false) to initially make it invisible prior to the timer , which is serverside and doesn't deliver the button clientside, I need to tweak the display command. That code is located on the ASPX page for that button and looks like this in the source code:
<asp:Button ID="Button_PM_Upload" runat="server" Style="display: none; left: 632px;
position: absolute; top: 252px; z-index: 104;" Text="Upload to PartsMaster"
ToolTip="Change PR codes and Descriptions" Width="147px" />
As my older brother use to say in our youth, -- "everything is hunky-dory at this point". The next part that the articles say varies between authors. All do however have a close solution but do not tell where to place the code. I have been placing it under the alert in the Javascript in the master page. Here is what I am getting:
document.getElementsByName("Button_PM_Upload").style.display="block";
gives me -- button stays hidden
document.getElementsByName("Button_PM_Upload").style.display='block';
gives me -- button stays hidden
document.getElementsByName('Button_PM_Upload').style.display='block';
gives me -- button stays hidden
document.getElementsByName('Button_PM_Upload').style.display="block";
gives me -- button stays hidden
Whenever I substitute block for inline (one suggestion) all four code lines give me the same result (nothing). Whenever I substitute block for visible (another suggestion) all four code lines give me the same result. Whenever I substitute block with inline (another suggestion) all four codes lines give me the same result.
I did find this example where you put server code in -- ("<%=Button_PM_Upload%>") --, but all I get is an error (no matter how I arrange it) that reads this: BC30451: Name 'Button_PM_Upload' is not declared.
My web site has the master page on the root of the project. Also on the root is a folder called [PSC_Tools]. My ASPX and ASPX.VB pages are in that folder and I'm wondering if maybe its a simple path problem. Whatever it is, I am a standstill -- sometimes the simplest things to do are the hardest to find code for. Ajax tools are out of the question. The site was developed without them and if imported in, they interfer with the config file running the site.
Am I missing code somewhere? Am I not importing something? Does this have to do with the config or css files? I'm at a loss. I came across your site and could feel the heat of collected intellect and experience exuding out from my monitor. Hope I followed the rules for asking a question and would very much appreciate any help you could give. And as a help, coould you please let me know exactly where and on what page (ASPX, ASXP.VB, .master) the code should go.
Have a great weekend
There is an easy workaround: Wrap the button in a div:
<div id="x"><asp:Button/></div>
Then hide and show the div.
If you wanted to disable the button, use jQuery like this:
$('#x button').attr('disabled', 'disabled');
The trick is referencing the button through the wrapping element.