The questions similar to that I found a lot but still can not realize what I need. I have a page.php that loaded in the block din_content with function .load
Page.php
<div id="ess">
<div id="top_ch">
<h1>Ess</h1>
</div>
<div id="ch">
<iframe name="users" width="220" height="510" align="left" src='ess/users.php' id="userch"></iframe>
<iframe name="text" width="450" height="405" src='ess/text.php'></iframe>
</div>
In page I have two Iframes. So I have two problems. First in main page where that iframes loaded I have Jquery function
$(document).on('click','.link_pro',function () {
//some actions
});
How to make that that function also worked in iframe?
Second, In the first Iframe I have two links. So what I need is that depend of what link you click on, the variable 'active' changed and depend on the value of that variable changed the second iframe. In example, you click on the first link and variable 'active' =1 than it transfered to the second iframe (may be even transfer to the parent and try to send to the second iframe trough method Get) where depend of the value displayed a requested result. I try to realize it with jquery and php. But still didn't get the result. The most problem to get a result from clicking on links in the first Iframe.
If you own the iframes sources and they belong to the same domain as the top window, then, for attaching events, you could probably do something like:
jQuery("iframe").load(function(){
jQuery(this).contents().find(".link_pro").on("click", function(){
});
});
The code above will attach the click event to your iframe's content (.link_pro).
Then, for the second question, if you have, for example, in your top window:
var myTopVar; //This belongs to top window scope
From your iframe, you can access:
top.myTopVar;
I think that should be it but, again, both your top window and iframe should share the same domain (document.domain). If not, you will face same origin policy problems.
Related
I have a iFrame inside an php page.
The iFrame contains form (in asp), can I link a button outside the iFrame to the button outside?
Thanks!
you can use a button on main page to click a button on iframe page using jquery.
for example in main page if you have:
Main page HTML Sample:
<button id="parentbutton">click me</button>
<iframe name='select_frame' src='http://www.barzegari.com/DEAFULT.ASP'></iframe>
JQUERY in main page:
$("#parentbutton").click(function(){
$('input:button[name=save]').click(function() {
$('iframe[name=select_frame]').contents().find('#mybuttonid').click();
});
});
in iframe html:
you have a button with id(clientid) like "mybuttonid";
this is prevent by cross domain privacy, but you can do it by this way,
in your php page, use file_get_contents to get asp content, filter get form script and paste to php page, by this way, you can do everything as you want :)
Accessing iframe content from other URL will give you the error Refused to display 'YOUR_URL' in a frame because it set 'X-Frame-Options' to 'sameorigin'. This is because, all the server restricts the access of iframe content from third party website for security purpose. If you are not getting the above error, try the below code in your PHP file.
$("#phpbutton").click(function(){
var iframe = $('#aspiframe').contents();
iframe.find("#aspbutton").click();
});
<iframe id='aspiframe' src='YOUR_ASP_URL'></iframe>
<input type="button" id="phpbutton">click here</button>
Note : Make sure you have replaced with correct IDs.
To be clear - Ive already checked other Questions about refreshing div and the ideas I found were not exactly what I look for.
My site is made of plenty pages with the same header and footer (top, bottom, menu on both sides). I use smarty templates, and the Whole action of every page happens in one <div id="content">.
My users use to refresh most of those pages many times to do an action they've already done once again. With refreshing browser loads again header, footer, viewed page etc. I would like to bring them the button (instead of F5) which will refresh just a current content page (e.g. account.php) without refreshing whole site.
One of plenty structure:
<?php
$title = 'OneOfPlenty';
require_once("includes/head.php");
{
Whole action
}
require_once("includes/foot.php");
?>
header.tpl ends with <div id="content"> then comes
onofplenty.tpl and then in
footer.tpl I got </div> (close the content)
Here comes the question: Is it even possible? Am I able to create such a flexible button which will recognize which page is being displayed and will "know" to refresh just the content of this page?
Any ideas and help will be aprreciated.
Thank you
TTed
You could do an Ajax call with jQuery to get the output html of the tpl file of the page.
You could use an Ajax call, e.g. by using the jQuery get() function, e.g. like this
$.get("includes/account.php", function(data) {
$("#content").html(data);
alert("Load was performed.");
});
If you saved some kind of variable, either to session or to a data-content on your div. Just so you know which page you are on. Say if you are on account.php you set $('#content').attr("data-content", "account"). Then if you press the refresh button you could use an ajax get on $('#content').attr("data-content") + 'php' to re-import the data. Could be done with a SESSION variable as well.
I'm using a simple script to reload a div
$('#mydiv').fadeOut('300').load('# #mydiv').fadeIn("300");
The problem is that the div I'm reloading has the Facebook like button inside it. After the DIV reloads, I can see it updated inside the source, but the button is hidden for some reason.
Is there any way to force the button to re-draw?
As I stated in my comment, I think the .load is misunderstood, as you stated in your question
I can see it updated inside the source, but the button is hidden for some reason
.. so with that in mind, I assume you have load functioning with the correct parameters.
You have a synchronistic problem here. Everything you use in the chain uses a timescale, and .load() for that matter is asynchronous.
So instead of just chaining everything, you have to use the callbacks in order to know when the time scale ends for a particular function.
$('#myDiv').fadeIn('300', function() {
// callback when #myDiv is faded out (display:none;)
$(this).load('url', function() {
// callback when #myDiv is loaded with new content from the given 'url'
$(this).fadeIn('300');
})
});
The facebook button won't display because it is configured normally just AFTER document.load.
If you load the div content while the document is already loaded and the Facebook javascript SDK has already initialized. It won't work.
If facebook is not required UNTIL the div loads. You may just try to load the "all.js" script inside the div.
Otherwise, if you've come to that, you'll certainly have to review the application's design.
I have an overlay popup box (DIV + JavaScript + some CSS) which is toggled by a link, like this:
<a href="#" onclick="popup('popUpDiv')">
The box that pops up contains an iframe. Now I want different links on my page to load different iframes when the box opens; so that link A would toggle the box to appear, and load iframe1.html inside the box, while link B would toggle the same box to appear, but load iframe2.html inside the box, and so forth.
I'm a beginning programmer, and I first figured maybe this could be done with PHP, by putting something like this inside the popUpDiv:
<iframe src="http://mysite.com/iframe<?php echo $_GET ["iframeid"] ?>.html">
... and then simply adding ?iframeid=x to each link's href, where x is the id of the iframe to be loaded.
This obviously won't work in practice though, because it requires a page reload, and when the link is clicked, the popUpDiv is toggled to open, but at the same instant, the page reloads, now with the ?iframeid=x query string in place, but too late, since the popUpDiv disappeared on reload.
Is there perhaps a JavaScript equivalent that could be used, or can anybody suggest another way to make this work?
FYI, this is the kind of popup box I'm working with:
http://www.pat-burt.com/csspopup.html
I finally found a really simple way of accomplishing this without additional JavaScripting, by simply using the target attribute:
<iframe name="myfavoriteiframe">
Then:
This is a link.
P.S. Just FYI for any of those out there who might want to use this feature with Vimeo's JavaScript API, as I'm doing: In order to make API buttons work with this target method, it seems like the iframe src-attribute cannot be left blank. You need to specify a link to any of your videos in the src, so that a video loads into the iframe on page load, like this:
<iframe name="myfavoriteiframe" id="player_1" src="http://player.vimeo.com/video/[the_number_of_your_video]?api=1&player_id=player_1">
I simply inserted the URL to the first video on my page, but you can use any of them, since they're hidden anyway.
Then link to any of your videos using the target method described above, and the pre-set iframe video will be replaced by a video of your choice.
Create two divs with the two variations of content (the two iframes with each specific URL). Then toggle by the name of the div.
<a href="#" onclick="popup('popUpDiv1')">
<a href="#" onclick="popup('popUpDiv2')">
Set the id attributes of the div elements appropriately.
Rather than adding something to the popup DIV element, I would add a required link to the href property of the link that you use to open the popup:
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
And then inside the popup function I would take the href parameter of the link that has triggered the event and use it in a popup:
function pre_popup(id) {
// Take the href parameter of the link
var href = this.href;
// And then use it in the iframe
window.frames["your_iframe"].src = href;
// And then pop it
popup(id);
}
Basically, I want the same effect as the oldschool html 'frameset' I think.
Take a look at this page please:
http://onomadesign.com/wordpress/identity-design/alteon-a-boeing-company/
If a user selects a project from industry -> transportation for example, I would like that the right scrollmenu keeps its initial state when the new project page comes up. So they won't get lost and have to click again to be in the same submenu section.
So, the right thumbnail navigation should stay in the same way, I don't want it to reload.
Do I have to do it with frames or iframes? Or can I make some kind of jQuery call to 'not reload' that div? Maybe PHP? I'm sorry, I am not a programmer from origin.
Update:
Guys, I managed to put the whole thumbnail navigation code into a seperate php file, called sidebar.php. Now this gets called in my single.php (Wordpress) by <?php get_sidebar(); ?>.
Should it now be easier to make this sidebar.php NOT refresh on page reload? I've been looking at cookies, php sessions, iframes.. but I can't get it to work.
Any more help would be greatly appreciated!
Facebook kinda does this without frames for optimization's sake. They take every single link and, if supported, using AJAX to load the page content without reloading the layout.
Obviously, this sort of thing may require significant restructuring of the internals of your app. Another option is to simply store the menu's state as a cookie on link click (see the jQuery Cookie plugin) and, on every reload, either have Javascript look at the cookie and dynamically restore the menu to its correct state, or use your internal PHP to read the cookie and decide what menu to display.
But if you get really desperate, you may end up falling back on frames. Sometimes that can be okay - but try everything else first :)
You also can detect what menu item was activated (you got the page request due to clicking on the corresponding link) and use this information to restore/select this menu item.
At least that is what I do and... No cookies or AJAX required!
You can use a technique known as "AHAH" Asynchronous HTML and HTTP. Essentially you're doing a jQuery
$.post("whatever.html",function(data) {
$("contentdivelement").html(data);
}
You can wrap this in a function like:
updateContent(sPage) {
$.post(sPage,function(data) {
$("contentdivelement").html(data);
}
}
This will load the content from your "frame" page into the div without reloading the page.
You can also bind to each of the navigation links and use their HREF as your path to load in your content div such as:
$(".menuLink").click(function() {
var menuLink = $(this).attr('href');
updateContent(menuLink);
/* prevents the browser from taking the parent to that link */
return false;
});
ADDITION:
Your menu may look like this:
<ul class="myMenu">
<li>Frame 1</li>
<li>Frame 2</li>
</ul>
Also,
If you want it to remember the page you're on you can use cookies or #anchors. There are many ways to add "tab" or "menu" anchors but one way would just be to use a jQuery plugin.
The most COMMON and TRENDY way to do it is to use #anchors. Your browser address bar ass #frame1 to the end so when the page is refreshed or reloaded it will load up "frame1" automatically with some additional code.
You can even called the anchor #/frame1.html and read the anchor in
$(document).ready(function() {
/* you'll need to either use a plugin or parse out the anchor from your current browser address bar */
updateContent(anchorContentVar);
});
Instead of updating your content using click-handlers I suggest a slightly different approach. Just replace your hyperlinks with this kind of link:
#info_page
Now set up a simple interval that reads out the current URL and updates the DIV accordingly:
__LOC = document.location.href;
setInterval(function(){
if (__LOC!=document.location.href) __LOC=document.location.href;
var fetchURL = __LOC.split("#")[1];
$.get( "/getcontent/"+fetchURL, function(d){ $("#mydiv").html( d ); } )
} 1000);
This allows visitors to use bookmarks as well.