Ok so now it has been a day almost in searching about Modal box to display a complete .HTML file in Modal box rather opening it in new window or tab.
More precisely:
example
This ajax.html file should open in "modal box" in the same window.
How can I acheive it through anchor tag?
I have searched thoroughly but found no good solution except this one(Example#4). This works on site but doesn't work when I download it.
.
P.S: I do not want to use iframe.
There are a few different ways to do this, but the best way is to use an AJAX request to the page using jQuery:
$.post("ajax.html", function(data){
$("#myModalDiv").html(data).fadeIn();
});
Then to bind this to your anchor, assign it an ID and do this in your $(document).ready():
$(document).ready(function(){
$("a#someId").on("click", function(){
//Put the code from above here.
});
});
Note that this will only work for files on the same domain.
If you want to use files on a different domain, you will have to use an iframe, therefore I cannot put this into a fiddle because there are no local files to pull on a fiddle.
You can use bootstrap for the thing you want to do.
http://getbootstrap.com/javascript/
Check out the modal section.
Related
I have an image and i want, once i click it, that a particular html page is displayed into a specific div. I found several answer yet, but none of them seems to work.
I'm thinking something simple with jquery, like the answer given here: display html file in a div
What's your solution ?
Thanks in advance.
EDIT1
I want to load an internal html page ( not an external page from another webiste ) by clicking an image.
This is the code i used taking example from the answer on the link above.
<script type="text/javascript">$(document).ready(function(){$("mainscreen").load("/home/dontrythisathome/Programmazione/HTML/Progetto-Corso-Inglese/Misc/FILE/HTML/ChiSiamo.html");}</script>
"mainscreen" is the final div when i want to display the html page.
Inside the function .load() there is the path of the html page.
But no html page is displayed into the div.
EDIT2: I found the silly mistake. I use this structure: when the correct position of the elements is . I could remove also the element but i'm using CSS and i'm more comfortable to place elements than using tag options instead. Thanks for all your replies. Tomorrow i'll see if the code with jquery works.
I think your Problem is, that when you load another website using .load().
All the other websites CSS/JavaScript gets loaded and yours gets overwritten.
Could you tell us, what you are trying to accomplish?
Are you loading a html-page from your own website or an external url?
If you dont care for the styles that other website uses, you could do something like this:
.load("example.com/some.html #content");
This loads the url you specifies and just copys the content of the HTML-Element that corresponds to this selector into your target element. (ONLY INLINE-CSS will be applyed that way, you would need to do that styling manually)
EDIT: Thank you for updateing your question.
You are trying to load a file from your filesystem.
Add file:// in front of the path to your .html file.
NOTE: Especially when you are trying to use AJAX you should use a local website and work with relative paths! This makes it much easier to deploy the website afterwards as you do not have to rewrite all your URLs.
Here is jsFiddle
Your html code
<img class="img" src="http://www.lessons4living.com/images/penclchk.gif" width=100 height=100>
<div class="targetDiv"></div>
Your javascript
$(document).ready(function(){
$(".img").click(function(){ //capture the event and ignite your work
loadPage("http://fiddle.jshell.net/"); //call our function
});
});
function loadPage(link){
$.get(link,function(data){ //dont forget cross-browser rules.
$(".targetDiv").append(data) //appended in to your div
})
};
Or you can use .load function with link parametre.
Lets say you have the following HTML code.
<div id="mainscreen">click on the image to load html …</div>
<img id="js-image" src="http://cl.ly/image/0A1P1s3r2M0u/Bildschirmfoto%202014-05-24%20um%2021.59.23.png" />
And some JavaScript code (with jQuery).
var image = document.getElementById('js-image'),
mainscreen = document.getElementById('mainscreen');
$(image).on('click', function() {
$(mainscreen).load("http://fiddle.jshell.net/florianpircher/tmRy9/show/");
});
Demo: http://jsfiddle.net/florianpircher/6wXBu/1/
You can not use $("mainscreen") because that would select <mainscreen> and not #mainscreen. In jQuery, you need a CSS-selector (like $("#mainscreen")).
I have some content hosted on my own servers which I'm displaying to the user dynamically. However the content is a few layers deep and I need the url/location of the iframe so I can assign it to a link.
The result should be when a user clicks on the link, it takes them to the page with the iframe as well as displaying the proper page/layer within the iframe.
How do I achieve this via javascript or jquery? Or is xpath also required for this? If you disagree, please don't downvote this question but explain why I shouldn't post it since too many downvotes and you get banned.
Thanks!
Try to use jquery for this, like:
$(document).ready(function(){
$("#iframeid").load(function(){
alert(this.contentWindow.location);// do what you want with this location
});
});
Note: First add a latest version of jquery
I'm using a third-party commenting plugin right now, All it provides is a piece of script as follows:
<div id="uyan_frame"></div>
<script type="text/javascript"
id="UYScript"
src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async="">
</script>
As it is not a live commenting plugin, I want to add a refresh button next to it to reload it manually to see the latest comments instead of reloading the whole page.(I know Disqus is a good commenting plugin, but as we target Chinese users, I have to use the current one).
As it's a third party plugin, I don't have too much control over it. And I also think iframe is a ugly way to achieve this partly refreshing thing. So, is there any other way to achieve this? Like every time I click on the refresh button, it will erase out all the HTML element this script generated, recreate this script tag, append it to the appropriate place, and run it again?
you do not have to use iframe as it is slow. What you can do is create a div or section and give it an id or class, then create a button that when is clicked will fetch a script and append the right html contents in the div or section you've created. To make it easier to understand the code would look something like this.
<section id="content"></section>
<button id="refresher"></button>
<script>
$('#refresher').click(function(){
//Load your script like so
$.getScript('url of the script you are trying to get', function(){...})
//Load your content here
$('#content').html('Current contents will be erased and will be replaced by whatever you placed here')
//...or if you need ajax fetching
$.ajax({
url: url,
success: function(){
$('#content').html('place your content here and this will erase old content')
}
});
})
</script>
I would ask 3rd party company how to refresh comments without refreshing the whole page. They did developed this, and they must have a way to refresh it easily.
For example, UYComment.refresh(document.getElementById('comment'))
You may also find this kind of solution by looking at their javascript code if you don't want to ask them.
You can go around by not using 3rd-party provided code, i.e. ajax to replace div, refreshing iframe, etc., but, based on my experience, it always make your code little messier.
Since you tagged jQuery, I'm assuming you're using it.
Try adding a click handler to your refresh button and then use .html()
example:
$('#uyan_frame').html('');
When you call .html, it should replace the element you called it on and it should recall any scripts in the string you pass in. Just as a disclaimer, this is not tested.
I am using a popup plugin to open my popup window.
Generating html table using Javascript. In that there column Employee Id having hyperlink.
I am openning popup on click of hyperlink to display the employee details.
Dynamic generated code:
<a id='" + arrElement[0].EMP_DATA[i].EMP_ID +"'
href='employee.do?requestSource=EMP_PROFILE&empId=" +
arrElement[0].EMP_DATA[i].EMP_ID+"'
class='empName' >
<B>" +arrElement[0].EMP_DATA[i].EMP_NAME+"</B>
</a>
Issue: popup is open in the same window. This issue happen only when code is generated dynamically using java script
Following is my code to open the popup, calling script code after completion of employee table:
$('.empName').popupWindow({
centerScreen: 1,
scrollbars: 1,
height: ($(window).height()-100),
width: ($(window).width()-100)
});
Please help
First Try: The library might not be loading at all. Make sure that the javascript file that provides popupWindow is present and is being referenced correctly. Also, make sure that jquery itself is being loaded, since this library depends on it.
Try something like
alert($.fn.popupWindow);
after load to make sure that jQuery and the popupWindow library are loading. If that says something about a function reference or object, the problem is something else. Otherwise, jquery or the library isn't being loaded.
2nd Try:
See jquery doesn't see new elements, closely related question. jQuery doesn't recognize created elements 'immediately', you have to wait for the change to take place via events. It appears that you will want to use something like
$('.empName').change(function(){
$('.empName').popupWindow({ ... });
});
Did you check it in another browser or on another system? It's probably a setting of your browser to open popups in a new tab in the same window (I'm assuming that's what happening, and that the popup doesn't replace your whole page).
I'm a jQuery newb. I'm building a Online Shop and I'm using jQuery plugin 'Thickbox' (http://jquery.com/demo/thickbox). The Online Shop is set up to display a 'Enlarged Image' which runs the Thickbox JS script and shows an image.
A problem occurs as the data is placed on the page thru a CMS system (using Ajax I believe?). When you choose another product from the 'Choose Type' select drop down new data from the CMS system is placed on the page and the Thickbox script isn't applied as it can't see the new data.
I've been playing around with a fix I've found (http://www.codynolden.com/blog/2009/01/thickbox-and-ajax-using-livequery) but I can't seem to apply it to my website?
A live example of my site: http://madisonlane.businesscatalyst.com/_product_36331/AAA-_Autumn_Dress
Any ideas?
in thickbox.js:
$(domChunk).click(function(){
was replaced with this:
$(domChunk).live(click, function(){
Stuart got it right: thank you so much!
I was stuck with a similar problem issue: in my case, the target of an appended link (through jQuery .append() method ) was not loaded in a thickbox.
My jQuery code was executed in a document.ready() function:
$("#subpages").append('','<a href="..." class="thickbox" [...]');
Simply adding:
tb_init('.thickbox'); //required to reinitialize thickbox as DOM was manipulated
just after the last line fixed the problem.
Are you using an IFRAMED thickbox? You may have better luck with that, since by default thickbox is just displayed in a DIV. You need to add &TB_iframe=true to your URL's querystring to get this
I may not be reading your question right, but from the way it sounds, content is being destroyed and created with new item selections, right?
If that's the case, you'll need to call tb_init('.some-selector') when you load new content. I recall having to do this for conditionally setting up a thickbox once. Thickbox works by going through your page and wiring up click events to link with class "thickbox." By using tb_init(), you can wire your stuff up at any time on any selector you like. Check out the source code for Thickbox to see what I mean.