I have a simple ajax application
From this, a popup is launched, with a form.
Both the form resultpage, and the ajax application hava a javascript file in common.
From the popup window, in the form resultpage, I am trying to call a method from the common javascript file, to apply to the parent window.
My javascript file contains an updateLayer method, which when caleld from the parent window, works fine. I get nothing when trying to call it from the popup window.
The resultpage in the popup window has
<script type="text/javascript" src="x.js">window.opener.updateLayer("Layer3", "380118179930"); </script>
before any html.
Nothing happens in the parentwindow. I have also tried window.parent.
What is the reason and solution for/to this?
I assume this is related to this question, asked by another user that also happens to be named Josh.
In my answer to that question, I tried to explain that the functions from a Javascript file included in your parent window would be attached to the window object, so you use window.opener to get access to that window object to call them.
It looks like you've almost got this solved, but the problem here is that by including src="x.js" in the script tag from your form response, you're effectively overwriting any code placed inside the script. Plus, since x.js is included in the parent window, there's no need to have it in the popup at all, anyway.
The code for your form response should look like this:
<script type="text/javascript">
window.opener.updateLayer("Layer3", "380118179930");
</script>
I've removed the src="x.js" attribute, which would otherwise prevent code between the <script></script> tags from being executed.
Your problem can be that you have two JavaScript files with the same content, while no namespaces are applied.
First, your parent includes the file.js where your updateLayer() is defined. Then the parent opens the child window, which also includes that file.js. If you do that, you have two threads running, where each of them may have it's own functions and objects without bothering the other. I assume that your function is global. This can cause problems, if no namespaces are used. Also it can happen that your big ajax library creates iframes and things like that, and you won't see anything from that because it happens under the hood.
So try: top.window.opener.updateLayer("Layer3", "380118179930");
If that doesn't help, try to open a blank window with no included file.js and call that function from the opener. If that works, wrap the contents of that file.js in a namespace like myNamespace = {....big file content inbetween....}, make two versions of that (or better dynamically include the content) and make sure you have two different namespace. JavaScript is most often not working the way you think it should.
Also, make very sure that the url for your opened window has exactly the same domain. It can cause security issues so that the browser disallows access from a child window to it's parent.
Josh,
Can you determine if the function is triggered at all, like annakata suggests? E.g. by putting an alert box on the first line of the function?
Otherwise: how is the function updateLayer defined in x.js?
If it's defined like this:
function updateLayer(layer, result) {
// ...
}
...then it should work fine.
If it's defined as follows:
var updateLayer = function(layer, result) {
// ...
}
then it will not be available as property of the window object (and thus not available as property of window.opener either). In Firefox, at least; I haven't tested this in IE or other browsers.
Edit: why is this question tagged 'ajax'? AFAICS, all of the problem resides on the client side of the application; no ajax is involved.
Try following:
parent.window.updateLayer();
in a separate <script> tag.
I'm not quite sure whether it works with both src=some.js and inline script at the same time.
Since you have given the script element a src attribute, the results of x.js will be parsed as JS and the text content of the element will be ignored.
<script type="text/javascript" src="x.js"></script>
<script type="text/javascript">
window.opener.updateLayer("Layer3", "380118179930");
</script>
Create a new updateLayer function in you parent html file. Rename it different and call the original updateLayer from it.
e.g.
function updateLayerPage(arg1, arg2)
{
updateLayer(arg1, arg2);
}
and then call this new function from the child page
window.opener.updateLayerPage("Layer3", "380118179930");
Related
i have a problem here
i make a page that have function for print page that contain of dynamic table. the print function method is open the page html that contain the dynamic table in the new tab then open the print dialog. the process going well but when i add the ajax call for displaying the data in the dynamic table. the data not displayed at the table in the print dialog..but when i cancel the print dialog and the page that must be printed show off the data is displaying there...
how to fix it.
this the picture of the page
i use this code for print that
<script>
function myFunction() {
window.open('SPL.html','','height=650,width=1200').print();
}
</script>
You didnt provided yet the code of your generator, so I simply explain you why its not working and what you can do.
A good reference for window Mozilla Window Open
You can read there more details about possible functions and more. Your problem is, with:
window.open('SPL.html','','height=650,width=1200').print();
Directly after opening the file you call the print function, at this moment your script and ajax request don´t have finished yet. Thats why it just shows you the current state with the predefined html and css code.
So what you have to do is simply call print after it has finished. There are tons of ways to achieve this.
The simplest way would it to open it like this:
window.open('SPL.html','','height=650,width=1200')
Inside your SPL.html you stack your js script inside:
$(document).ready() {
//Your Generator
}
This little piece keeps safe that all dependencys (external scripts and dom elements) are created before your generator runs and it gives us the possibility for the next function:
$(window).load(function(){
window.print()
});
This one is a version of the globalEventHandler window.onload. It basicly ,if you read the documentation, fires after everything is loaded, including images, frames, objects and so on. And the tricky part also after document.ready, this makes it sure that our generator is finished before we run the print command.
I hope this helps, If you really want to stick the print command inside your first page I can give you an example of this too. But it is not as bullet prove as this solution. Ah and if you want to stick with #Saurabh solution you have to use allow-modals for your Iframe, if not it wouldn´t be possible to print. Is also mentioned in the official documentation.
This issue is caused because the page is not completely loaded before calling the print function.
Update: Using jQuery
index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#loaderFrame').load(function(){
var w = (this.contentWindow || this.contentDocument.defaultView);
w.print();
});
$('#loaderFrame').attr('src', 'SPL.html');
});
});
</script>
<style>
#loaderFrame{
visibility: hidden;
height: 1px;
width: 1px;
}
</style>
</head>
<body>
<iframe id="loaderFrame" ></iframe>
</body>
</html>
I am having a problem on a WordPress site. I have a function which slides down a certain <div>. It is:
jQuery(function($){
$(document).on('click','.tb_usertask_title',function(){
var title = $(this);
var key = title.data('key');
var msg = $('#tb_msg_'+key);
msg.slideDown('fast');
}
});
After executing this function, the <div> slides up again immediately. I think this might be due another script, but I have absolutely no idea how to find which function does this. Is there any way of finding this out? Things I have tried:
Adding breakpoints in my function. This showed me that the folding up happened outside my function.
Using Firebug to break on HTML change. This however redirected to jquery.js, but I did not know how to find out which function triggered the jQuery.
Using Firebug to list the events of my onclick event, but this only showed my function.
These didn't work for me. I also searched for a way to do a function backtrace in Firebug, but without any success.
Use unminified version of jQuery (just for the test and because its more easy to debug).
Look for the dispatch function.
Put a breakpoint in the function where there is an apply usage.
After the code breaks use the F11 to navigate to the binding function.
So I ran into a problem and I couldn't really find a good solution anywhere. And I'm sure more people run into this problem.
I tried to have an Ajax script call to a php-script which echoes a JavaScript function again but this function wont run or activate. It however does show up in the code if you do inspect element.
So the html and Ajax is as follows. Its dummy code since my own is a bit more complicated. so any syntax errors I made here are not the solution since this works for other parts of my code.
<html><headbodyetc>
<div id='change'>
//is supposed to alert or call another js function after
//verifying something with a database for instance.
<button type='button' onclick='ajaxbelow();'>alert</button>
</div>
<script type='text/javascript'>
function ajaxbelow(){
//AJAX code as found on w3schools.com/php/php_ajax_php.asp
//calls the change.php
</script>
</etc></html>
The php code that gets called is very simple.
//This shows up in the html-code after clicking the button but doesnt run.
echo"<script type='text/javascript'>alert('doenst work?')</script>";
So I am looking for a solution which makes me able to run a JavaScript or jquery function after an Ajax call, or the main reason why this doesn't work. Since I couldn't find it.
Inb4 why call the alert via php? Because I need to verify something first with the db on the server-side in my actual code.
So after combining and testing some of the comments I figured out my own answer.
You cant create new javascript within the php echo. You can however echo an onload that calls an existing function. Onload only works for the following tags:
"body", "frame", "frameset", "iframe", "img", "input type="image", "link", "script", "style".
However in this case after testing some of them like "script" and "img" it still didn't work with all tags, but it did with the "style" tag. I didnt test all other tags though.
So that changed my code to:
<html><headbodyetc>
<div id='change'>
//is supposed to alert or call another js function after
//verifying something with a database for instance.
<button type='button' onclick='ajaxbelow();'>alert</button>
</div>
<script type='text/javascript'>
//function to be called
function test(){
alert("now it works");
}
function ajaxbelow(){
//AJAX code as found on w3schools.com/php/php_ajax_php.asp
//calls the change.php
</script>
</etc></html>
and the php-code will then become
echo"<style onload='test();'></style>";
and now it does run the function.
edit this doesn't seem to work for IE, looking for a solution right now.
^
EDIT: By default, IE Browsers "DENY" the ability of scripts to throw prompts. So to enable this functionality, you must go to [Tools/ Internet Options/ Security / Custom Level / "Allow websites to prompt for information using scripted windows"] and enable that... Once you refresh, you will see your alert in IE :)
Just add slashes before single quote as given below
<?php echo '<script type="text/javascript">alert(\'doenst work?\')</script>'; ?>
You could use eval() to evaluate the returned javascript. The script tags wont be required if this method is used.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
Try this:
http://www.webdeveloper.com/forum/showthread.php?184830-Ajax-echo-script-problem
Basically the reason why nothing happens is because you are just sticking content in the DOM. Javascript is an event driven language and since nothing is telling the javascript to run at this point, its just sitting there doing nothing. If that code were there when the browser loaded the page, then the browser parsing the code is what would tell it to run. So, what you need to do is evaluate any scripts that come back
New to JavaScript. I have an AJAX function that ultimately is intended to navigate to a new URL. However, instead of the new page appearing as if the user had typed the URL themselves, the new page is sort of 'inserte' inside the same div of the button that launched the script via its onclick handler. The line in question is this:
window.location.href("newpage.html");
What I want is the old page to be replaced by the new page and the old page to be retained in the browsing history.
Note that this script is called by a button inside of a form. I can show the whole code if it is helpful.
Thanks!
It's usually used as follows:
window.location.href = "newpage.html"
href is NOT a function, but a property.
References:
https://developer.mozilla.org/en-US/docs/Web/API/window.location
I think you may have been confused with window.location.assign("http://whatever") method
Caveat: href(url) may work on some browsers (IE???), but definitely not in FireFox - it gives an explicit "Not a function" error when run via JS-Execute
Using JQuery 1.2.6, testing from Firefox 3 and IE7. I have a very basic bit of JavaScript to reload a captcha image. In my JS file, I have:
var Captcha = {
count: 0,
Refresh: function(){
// Concatenate "count" to force a URL change, which forces the browser to reload the image
$('#Captcha').attr('src', 'Captcha.aspx?' + Captcha.count);
Captcha.count++;
}
}
My link looks as follows:
Try a different image
When I click on the link, I get a JavaScript error. From the Firebug plugin for Firefox, it says "Captcha.Refresh" is not a function. So, I go to my Firebug console in the same window, and type
Captcha
And I get an "object" in the response line (as expected). I then type
Captcah.Refresh
And I get a function() in the response line (as expected). I then type
Captcha.Refresh()
And it executes the function, updates my captcha image, everything is dandy. If I go back and try the link again, it still does not work. If I type in Capcha.Refresh() into the console without ever hitting the link, it also works fine. What on earth am I missing here? Clearly the JS is getting loaded, but why doesn't that function call work?
The problem arises because you have an element with an id of Captcha, and a global variable with the same name. IE traditionally introduces a global variable for every id attribute. FF doesn't... but pretends it does in certain situations for compatibility with IE. In this case, the click handler sees Captcha as an element rather than your object.
Work-arounds:
Change the id of the Captcha element.
Or, change the name of your global object to something other than Captcha.
Or, use Pim Jager's technique to move interpretation of the handler into a context where the global Captcha variable has been overwritten with your own.
Or, change your onclick attribute to:
onclick="window.Captcha.Refresh();"
...this will force lookup of the Captcha property in the context where it has been replaced by your global variable.
(all of these tested in IE6 and FF3 - i recommend Pim Jager's answer)
Try sepperating the HTML and javascript:
$('#ChangeCaptcha').click(Captcha.Refresh);