So I am new to jQuery and I'm trying to set up an html page that has tabs. Each tab should show a different html page as follows:
<div id="tabs">
<div class="tabdiv tabActive">Page1</div>
<div class="tabdiv">Page2</div>
<div class="tabdiv">Page3</div>
<div class="tabdiv">Page4</div>
</div>
<div class="tabscontent" id="ajax-content">
Default text
</div>
So what I want is that when I click on page 1, page1.html will be loaded up in div.tabscontent. This is the jQuery code that I have.
$(document).ready(function() {
$("div#tabs a").click(function() {
alert(this.href);
$("#ajax-content").empty().append("Loading");
$("div#tabs div.tabdiv").removeClass('tabActive');
$(this).children('div.tabdiv').addClass('tabActive');
$.ajax({
url: this.href,
success: function(html) {
$("#ajax-content").empty().append(html);
alert("Success!");},
error: function() {
$("#ajax-content").empty().append("Didn't work");}
});
return false;
});
});
Note: 1) I have the latest jquery attached 2) I the page1.html, page2.html, etc are in the same folder as the above html file. 3) I am working locally and have tried google-chrome, firefox, and opera and they all had tabs that showed "Didn't work". Even when I reference http://www.facebook.com in the url it doesn't work. Please help me.
I put the alert in there to see if the href works and it does work. For example for page1 tab it returns `file:///u/b/user/Desktop/ajaxdemo/Page1.html'
In your case, it does not work because you're trying to access a file from user computer. It poses security risks because if javascript is able to access local files, javascript is able to steal files from client machine.
Even when I reference http://www.facebook.com in the url it doesn't
work
The reason for this is: AJAX requests are subject to the same-origin policy. Facebook is on another domain, that's why it does not work.
One more thing to keep in mind, some browsers think absolute URLs are cross-domain requests even if it's in the same domain, only relative Urls work, so avoid using absolute Urls.
To fix your issues, try deploying on a server and use relative URLs instead of absolute URLs.
Related
I have a html structure like this
<html>
<body>
<iframe srcdoc="HTMLDOC"></iframe>
<body>
</html>
where HTMLDOC is a HTML doc which has some <img> tags that show images in my server that the user must be authenticated to see.
This works flawlessly on Chrome, but when trying on Firefox the requests made from the browser to fetch these images do not send the user's cookies, and thus the images are not downloaded, (since the server thinks that the user is not authenticated).
If I convert the iframe to a "classic" iframe, like this:
<iframe src="URL INSIDE MY SERVER"></iframe>
where URL INSIDE MY SERVER is an endpoint that serves the same HTMLDOC it works both in Chrome and Firefox, sending the appropriate cookies in the requests to fetch the images.
I've tried as well to add the parameter sandbox="allow-same-origin allow-top-navigation allow-scripts" to the iframe using srcdoc, to no avail.
What's weird is that if this is a same-origin situation I can't think a clearer same-origin that having the page in the HTML itself, so I don't know if I'm missing something.
I'm not sure whether the implement differences between Chrome and Firefox are, but I use some DOM manipulations to bypass this issue:
<html>
<body>
<iframe onload="fillIframe(this);"></iframe>
</body>
</html>
<script type="text/javascript">
function fillIframe(o) {
o.contentWindow.document.body.innerHTML = "HTMLDOC";
}
</script>
I have a page with a container that gets different content from an ajax request. This content has a form that posts data (and a file) to an iframe that is also in this ajax content container. I can submit the form and it works perfectly in Chrome, but Firefox and IE just sit there like I never clicked the submit button. I have default security settings on each browser, and don't want to change them for this functionality. Can anyone see any bugs in my code or process that would cause this? thanks in advance!
form:
<form action='processUploadFrame.php' method='post' enctype='multipart/form-data' id='myForm' target='iframeUpload'>
<input type='submit' value='Upload' />
iframe:
<iframe name='iframeUpload' frameborder=1 width=750 height=150></iframe>
Solved. My HTML 101 has failed me. Having my submit button in a different table cell than the rest of the form doesn't work in IE and FF, but Chrome is okay with it. Strange. A simple javascript submit link did the trick:
<a href='javascript:document.getElementById(\"myForm\").submit();'>Submit</a>
Here's an article that reminded me about the rules of such: http://www.cs.tut.fi/~jkorpela/forms/tables.html
I am trying to use lightbox plus plugin for Wordpress which works fine for most of my site.
I have a php page which is used by a jQuery AJAX function to retrieve data in order to paginate a large result set back in wordpress. This page is not part of wordpress.
I have managed to get Wordpress functions to work fine in this php page by using:
define('WP_USE_THEMES', false);
require('/home/love/public_html/dev/wp-blog-header.php');
require('/home/love/public_html/dev/wp-load.php');
However, in this page is an include, and within the included file is a link to an external sheet which is meant to be brought in with a lighbox:
<a class="" rel="lightbox" href="<?php bloginfo('url'); ?>/more-product-info?a=<?php echo $post->ID ?>">
<div id="moreprodinfo">More Info</div>
</a>
This method of retrieving information in a lighbox works ok on most parts of my site, but its just not working on the part that uses AJAX to retrieve the link to the lighbox page.
I assumed it was something to do with plugins not working when the page is not part of Wordpress, but all the Wordpress function have been working so why not plugins? Also my cufon plugin doesnt work on this ajax retrieved page either.
Is it becuase I am using .html javascript function to display the content retrieved by AJAX:
if(pageType == 'prizeHome'){
loading_hide();
$("#tab-prize-home #container").html(msg);
Any help would be appreciated
It looks like a common issue when using ajax to load html content :
You probably call lightbox and cufon when document is ready, which happens only once before your ajax call. You have to call again lightbox and cufon after your ajax call.
i am using script tag in my MVC view and my src for Script tag is "http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js".
the issue iam facing is html buttons are not working/postingback.
If i remove script tag,everything works fine.
whts the actuals problem with my code.?
there could be number of issues, the script tag you are refereing to includes the jquery library from the CDN. One possibility could be that there is some javascript code in the view that is disabling your buttons you can verify by doing the following
1) keep the script tag (jQuery) included in the view
2) in the script section of your view (if you have else create one like)
<script>
$(function(){
$(":button").removeAttr("disabled");
});
</script>
3) so your final code will look like
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(":button").removeAttr("disabled");
});
</script>
check now if it works... if it works then it means that you have some code that is disabling the buttons and upon removal of jquery library js error would have occured that why it seems to work...
I want to load an external page (i.e. google or facebook auth) into a iframe when the user clicks a button. How would you do this using MVC3 and Razor?
This seems like an extremely trivial task, but I can’t seem to figure out what to ask Google so I get something back I can use.
You could use JQuery something like this:
<script type="text/javascript">
$(function () {
$('#myButton').click(function () {
$('#myFrame').attr('src', 'http://www.google.com/');
});
});
</script>
<iframe id="myFrame"></iframe>
<button id="myButton">
Refresh IFrame
</button>
However, you will find that some sites (such as google.com) will prevent you from doing this, as they can specify in their response header whether or not the page can be opened in an IFrame. This is to prevent 'clickjacking' and is built in to most modern browsers.