I am trying to do something like this:
var data = $('#upTar').contents();
$("#fileRes").html(data);
Where #upTar is an iframe and #fileRes is a div, that is I want all the data from iframe (in HTML format) into the div.
The iframe is dynamically loaded.
Edit
The additional code looks like:
$("#addMore").click(function() {
$("#progForm").submit();
$('#upTar').load(function() {
$("#title, #obj, #theory, #code, #output, #conc").val("");
var data = $('#upTar').contents().find("body").html();
alert(data);
$("#fileRes").html(data);
});
});
The target for form submit is an iframe (#upTar) on the same page. Once that one is loaded, I want its data to be transfered to div.
CLOSURE EDIT
Rather than trying to fetch the details from the iframe, I now call an ajax script to update the div.
Thanks All!
try $('#upTar').contents().find("body").html()
contents itself return top-level HTMLElement node, you have to grab HTML from this node too. and you possibly don't want all the HTML including the head section, so first you need to find body tag.
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 tried to refresh some div in my page with ajax load by using .load() but didn't work. I have to create new file page that use php to echo my div again. So Question is Do I have to create new file for echo that div, if I just want to refresh some div in my page?
$("button").click(function(){
$("#div1").load("currentpage.php");
});
above is not work.
I have to use below code.
$("button").click(function(){
$("#div1").load("otherpage.php");
});
Use Ajax for this.
Build a function that will fetch the current page via ajax, but not the whole page, just the div in question from the server. The data will then (again via jQuery) be put inside the same div in question and replace old content with new one.
Relevant function:
http://api.jquery.com/load/
eg
$('#thisdiv').load(document.URL + ' #thisdiv');
Note, load automatically replaces content. Be sure to include a space before the hastag.
Reference link : Refresh Part of Page (div)
I have a div that contains a student's schedule, and there is a drop-down box for selecting by semester.
Once they select the semester, there is an ajax post, but when it refreshes, it displays the entire website within that div (with the appropriate schedule for that semester).
It looks like an iframe within a webpage, as seen here: http://cl.ly/Dy3b
Here is the ajax post script
<script type="text/javascript">
$(document).ready(function() {
$('#term').change(function() {
var form_data = {
term : $('#term').val(),
ajax : '1'
};
var u = $("#schedulePortletURL").attr("href");
$.ajax({
url: u,
type: 'POST',
data: form_data,
success: function(msg) {
//alert(u);
$('#view-schedule').html(msg);
}
});
return false;
});
});
</script>
If possible, could you give me some suggestions of what to investigate to correct this? Thank you
My guess is that the call to the server is returning a full HTML page, and your code then puts the full HTML page into the view-schedule div.
To resolve this, create a new HTML page that you can call that contains a html fragment - the chunk that you want to live in the view-schedule div. Then change schedulePortletURL to point to the new HTML page.
Alternately, you could get the html back (the msg) and parse it to pull out the data you are interested in, then insert the filtered data into the view-schedule div.
Does the existing website have a API at all that you can call?
Another possibility is that some kind of error checker in your server-side script is mistakenly firing and causing a redirect to some web page. That web page is then retrieved by the AJAX, then displayed in the DIV. I have had this happen before. You should check your server side script.
If you do not have full control over the webpage you are fetching the fetched page should be considered unpure and you should use iframe. Remember that with .html(blob) you will also get javascript code, flash objects etc. which can be used to compromize your users.
If you on the other hand have full control over the fetched webpage (which I assume) you should make a if-statement in your template that checks if the request is ajax-based.:
Pseudo serverside template code:
if not request.is_ajax():
import header.html
import body.html
if not request.is_ajax():
import footer.html
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.