I've used jQuery's .html() function to update content before, but it has always been inside an .ajax() function, for example:
$.ajax({
padding : 15,
type : "POST",
cache : false,
url : "anyPage.php?page=ajax",
data : $(this).serializeArray(),
success: function(data) {
$("#Div").html(data);
}
});
Problem is, in order to utilize TinyMCE, I had to open it in Fancybox inside of an iframe, but I ran into the problem of Posting data, which was solved by submitting the form to a PHP $_GET URL (pretty sure that's not what it's actually called), and then closing Fancybox:
<? if($_GET['page'] == "X"){
$_SESSION["X"] = $_POST['X'];
echo '<script type="text/javascript">
parent.$.fancybox.close();
</script>';
die();} ?>
That successfully passes the Post variable into a Session variable, which I can then call from inside the main page. Problem is, I'd like to also refresh a div on the main page, and am encountering problems.
I don't think I can use .ajax(), at least I haven't had any luck with trying to use it.
I've also tried using different combinations of .html() and .load() with .parent() and whatnot. A couple examples of things I've tried (the others have been long since overwritten):
parent.document.getElementById("Div").innerHTML = "something";
and
parent.$("Div").html("Some updated text");
Inserted both as follows:
echo '<script type="text/javascript">
parent.$("Div").html("Some updated text");
parent.$.fancybox.close();
</script>';
Haven't found anything that will work. Wondering if anyone can lend me some assistance.
If the domains match, in the iframe and the parent document you should be able to access the parent using either of the following:
window.parent
parent
top // If the parent is the top-level document
window.top
Since parent and top can be overwritten by javascript I would go with window.parent or window.top
Related
I have a page we can call parent.php. In this page I have an iframe with a submit form and outside of that I have a div with the id "target". Is it possible to submit the form in the iframe and when success refresh the target div. Say load a new page into it or something?
Edit:
The target div is in the parent page, so my question is basically if you can make for an example a jQuery call outside the iframe to the parent. And how that would look?
Edit 2:
So this is how my jquery code looks like now. It is in the of the iframe page. the div #target is in the parent.php
$(;"form[name=my_form]").submit(function(e){
e.preventDefault;
window.parent.document.getElementById('#target');
$("#target").load("mypage.php", function() {
$('form[name=my_form]').submit();
});
})
I don't know if the script is active cause the form submits successfully but nothing happens to target.
Edit 3:
Now I'm trying to call the parent page from a link within the iframe. And no success there either:
Link
I think the problem may be that you are not finding your element because of the "#" in your call to get it:
window.parent.document.getElementById('#target');
You only need the # if you are using jquery. Here it should be:
window.parent.document.getElementById('target');
You can access elements of parent window from within an iframe by using window.parent like this:
// using jquery
window.parent.$("#element_id");
Which is the same as:
// pure javascript
window.parent.document.getElementById("element_id");
And if you have more than one nested iframes and you want to access the topmost iframe, then you can use window.top like this:
// using jquery
window.top.$("#element_id");
Which is the same as:
// pure javascript
window.top.document.getElementById("element_id");
Have the below js inside the iframe and use ajax to submit the form.
$(function(){
$("form").submit(e){
e.preventDefault();
//Use ajax to submit the form
$.ajax({
url: this.action,
data: $(this).serialize(),
success: function(){
window.parent.$("#target").load("urlOfThePageToLoad");
});
});
});
});
I think you can just use window.parent from the iframe. window.parent returns the window object of the parent page, so you could do something like:
window.parent.document.getElementById('yourdiv');
Then do whatever you want with that div.
I made an Ajax call using JQuery and appended (using div.append()) the returned information to a div. This Ajax call was called when clicking on another div on the page. But even after a hard refresh in multiple browsers, the appended information from the previous call stays there, furthermore some of the links in the div it was appended to don't work. I also tried clearing the cache on both the browsers and the server but it didn't work(and found out that they don't store cache on the server).
If it means anything at all, here is the code I used, which I have since commented out:
$("#LogoutDiv").click(function() {
$.ajax({
url: 'header.php',
type: 'POST',
data: {
NumLgtRqt: 1
},
success: function(response) {
$("#HeaderContainer").append(response);
window.location.replace("index.php");
}
});
}
Thank you very much for your help!
The problem was that I put script tags in the append () function. Even though they were inside the append output and in quotations, they still registered to the html.
So I have a function that uses jQuery's $.post mechanism to fill in a div with contents from another page. I want to fire this method in the very beginning to show the content in the div right away. To do this I call the method in the document.ready script.
This is how the code looks:
function OnloadFunction()
{
alert("HELP!");
var url = "<?php echo $this->url('public', array('id'=>'ajax')); ?>";
$.post(url, {contentVar:cv}, function(data){
$("#shoppingCart").load(data).show();
});
}
//when document loads, do the following
$(document).ready(function(){
OnloadFunction();
})
When I load the page, the alert saying "HELP!" shows up, but the $.post function is not making any difference and the div is not filled with the contents from the url.
P.S This shouldn't make a difference but I am using ZF2 (hence the url('public', array('id'=>'ajax')); ?>)
Any help would be appreciated :)
Thanks!
You need to use .html() instead of .load(), assuming data is html content
$("#shoppingCart").html(data)
The load function takes a URL as an argument, makes an XHR request for it, and then populates the element with the response.
Presumably data is not a URL.
I'm trying to replace all the HTML (including the HTML tags) with another page. What I'm trying to do is having a website acting as an app even when navigating the another page.
Here is the code :
(function($) {
Drupal.behaviors.loadingPage = {
attach: function(context,settings) {
$('a').click(function(event) {
event.preventDefault();
// Create the loading icon
// ...
$.ajax({
url: $(this).attr('href'),
success: function(data) {
$('html').replaceWith(data);
}
});
});
}
};
})(jQuery);
I've tried several things. replaceWith() causes a jQuery error in jquery.js after deleting the HTML tag, I guess it is because it can't find the parent anymore to add the replacement.
The best result I got was with document.write(data). The problem is, the javascript code on the loaded page is not executed.
Anyone got a better idea ?
A better idea? Yeah, just load the new page normally by setting window.location instead of using AJAX. Or submit a form.
Otherwise, if you want to load something to replace all of the visible content of the current page but keep the current page's script going, put all the visible content in a frame sized to fill the browser window - which, again, you wouldn't populate using AJAX.
(I like AJAX, but I don't see why you'd use it to replace a whole page.)
I have a page we can call parent.php. In this page I have an iframe with a submit form and outside of that I have a div with the id "target". Is it possible to submit the form in the iframe and when success refresh the target div. Say load a new page into it or something?
Edit:
The target div is in the parent page, so my question is basically if you can make for an example a jQuery call outside the iframe to the parent. And how that would look?
Edit 2:
So this is how my jquery code looks like now. It is in the of the iframe page. the div #target is in the parent.php
$(;"form[name=my_form]").submit(function(e){
e.preventDefault;
window.parent.document.getElementById('#target');
$("#target").load("mypage.php", function() {
$('form[name=my_form]').submit();
});
})
I don't know if the script is active cause the form submits successfully but nothing happens to target.
Edit 3:
Now I'm trying to call the parent page from a link within the iframe. And no success there either:
Link
I think the problem may be that you are not finding your element because of the "#" in your call to get it:
window.parent.document.getElementById('#target');
You only need the # if you are using jquery. Here it should be:
window.parent.document.getElementById('target');
You can access elements of parent window from within an iframe by using window.parent like this:
// using jquery
window.parent.$("#element_id");
Which is the same as:
// pure javascript
window.parent.document.getElementById("element_id");
And if you have more than one nested iframes and you want to access the topmost iframe, then you can use window.top like this:
// using jquery
window.top.$("#element_id");
Which is the same as:
// pure javascript
window.top.document.getElementById("element_id");
Have the below js inside the iframe and use ajax to submit the form.
$(function(){
$("form").submit(e){
e.preventDefault();
//Use ajax to submit the form
$.ajax({
url: this.action,
data: $(this).serialize(),
success: function(){
window.parent.$("#target").load("urlOfThePageToLoad");
});
});
});
});
I think you can just use window.parent from the iframe. window.parent returns the window object of the parent page, so you could do something like:
window.parent.document.getElementById('yourdiv');
Then do whatever you want with that div.