Updating iframe 'src' on button press (a form ' file' button) - javascript

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.

Related

Create a link in javascript popup

I would think this is very easy but I have searched and searched and can't find a solution. I have setup an over 18 age verify popup using this code I found.
http://www.jqueryscript.net/other/Website-Age-Verification-Plugin-with-jQuery.html
The code and popup work great. BUT, If someone clicks "no" and you get the regret response, it then says like click to leave, and when you click the overlay just goes away and you are on the site.
I would like that if when you click "no" it to say "sorry, click here to leave" and when you click it actually takes you somewhere else, any link, like google.com
The js file has a link url in the regret code to #nothing . When i change that to an actual link it still doesn't work as I intend.
Is that clearly stated? My first time here and want to explain it all. The site this is being setup on is kickbassvapor.com if you want to see it. The files and a demo are at the link above.
Thank you in advance!
ETA: sorry here is the code in question.
// Regret Content
var regret_heading = $('<h2>We\'re Sorry!</h2>');
var regret_buttons = $('<nav><small>I hit the wrong button!</small> <ul><li>I\'m old enough!</li></ul></nav');
var regret_text = $('<p>You must be 21 years of age or older to enter this site.</p>');
modal_content_wrapper.append(content_heading, content_buttons, content_text);
modal_regret_wrapper.append(regret_heading, regret_buttons, regret_text);
modal_content.append(modal_content_wrapper, modal_regret_wrapper);
In file age-verification.js in line 69 change:
av_showRegret();
to:
window.location.href = "http://google.com";

Change page using a button in SP2010, strange behaviour

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/New‌​Form.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.

How do I discover which function is called when I press a button?

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)

Redirect to another page is causing dup entries

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)

.text & .attr in Jquery not working in IE

I am having some trouble getting a function to work in internet explorer (7-8). My problem is that I need to hide some links until a user logs in, I would do this server side; however, suffice to say I have no way of doing this.
My approach has been to load a set of text (login/logout) that will change server side and test for the logout value. I was doing this by loading a div by id in Jquery and using the .text() when IE 7-8 both refuse to run this ie dev tools told me that "object doesn't support this property or method" with a reference back to the line of code containing this lookup. Code posted below:
function logintest(){
login_test= "Sign out";
alert($('#log').text());
login = $('#log').text();
if(login.search(login_test) == -1){
$('#hiddenBox').css('display','none');
}
};
The fun thing is that the alert runs properly and displays the right text string. Upon this failing I tried using the .attr() and got identical results. Any help would be great!
Jquery version: 1.4.4
Site: www.brainwellnesspro.com
IE: 7-8 on win xp
Looking at your site I'd start by fixing the html to be valid, this isn't good:
<div id="log" name="<a href='http://www.brainwellnesspro.com/login.php' onclick=''>Sign in</a> or <a href='http://www.brainwellnesspro.com/login.php?action=create_account' onclick=''>Create an account</a>">
<a href='http://www.brainwellnesspro.com/login.php' onclick=''>Sign in</a> or <a href='http://www.brainwellnesspro.com/login.php?action=create_account' onclick=''>Create an account</a>
</div>
and since you already have jquery you can check the current text value of the login link like this
function logintest(){
if($("#log a").first().text() !== "Sign out"){
$('#hiddenBox').css('display','none');
}
};
My problem is that I need to hide some
links until a user logs in, I would do
this server side; however, suffice to
say I have no way of doing this.
Why Not? Surely your application should know if the user is logged in or not (and be able to render differently accordingly?)
anyway - without seeing your markup (with the context of the element with id='log' (what type of element is this???)....
if(login.search(login_test) == -1)
should probably be
if(login.search(login_test) == '-1')

Categories