My app runs inside an iframe in a wrapper page. When the wrapper page loads, the source for the iframe is set like this
<script type="text/javascript">
var frameSrc = 'myApp.jsp';
$(document).ready(function() {
loadFrame(frameSrc);
$("#iFrm").height($(window).height() - 175);
$(window).bind('resize', function(){
$("#iFrm").height($(window).height() - 175);
return false;
});
$("#adminLink").click(function(){
frameSrc = 'myAdmin.jsp';
loadFrame(frameSrc);
});
return false;
});
function loadFrame(src){
$("#iFrm").attr('src', src);
}
</script>
And this loads and runs just fine, but then I've got the admin link on the page that is intended to load a different page into the iframe and it has an event handler inside the document.ready function.
The issue that I'm encountering is that the myAdmin.jsp is loading and then the original document.ready script, in the wrapper page, is running again - completely with the original frameSrc value. It seems as though by changing the iframe source, it's triggering a reload of the entire wrapper page and the original iframe source. Has anyone seen this? Am I missing something obvious?
I got an answer to this question while working through various possible solutions. The problem turned out to have to do with adminLink. The href value was empty, which appears to have directed the browser to reload the current page (the wrapper). When I put javascript: return false; in the href my issue resolved.
<a id="adminLink" href="">Administration</a>
vs
<a id="adminLink" href="javascript:return false;">Administration</a>
Related
I am using NavigationHandler.handleNavigation as suggested here (ExternalContext.dispatch() not working) since I am using an ajax request.
It works but I see the next page in the middle of the page (more or less) instead of seeing it in the top of the page.
I tried using an anchor as suggested here (http://www.computerhope.com/issues/ch001475.htm) but it also doesn't work.
Any idea of what is happening?
Here is my code:
context.getApplication().getNavigationHandler().handleNavigation(context, null, "/user-registration.xhtml#top");
I have added the following in the beginning of the body of the next page:
<a name="top"></a>
The correct approach to scroll the window to top is window.scrollTo() with x and y of 0:
window.scrollTo(0, 0);
This keeps your URL free of hash fragment clutter.
In order to invoke it on success of every JSF ajax event, include the following script in the document.
jsf.ajax.addOnEvent(function(data) {
if (data.status == "success") {
window.scrollTo(0, 0);
}
});
See also:
Execute JavaScript after every JSF ajax postback
Finally I solved it with the following script:
<script type="text/javascript">
$(document).ready(function() {
location.hash = "#top";
});
</script>
I designed a ASP.NET page named kk-container.aspx to be used as a control which will be loaded in Default.aspx with jQuery load function. The page kk-container.aspx has many HTML controls and javascript events bound as in the example.
<!--Sample code from kk-container.aspx-->
<div id="kk-container">
Action
<!--Many HTML controls here-->
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#kk-action").click(function () {
return false;
});
});
//Many javascript here.
</script>
I load this kk-container.aspx into Default.aspx with such code in the Default.aspx.
<div id="mycontainer"></div>
<script type="text/javascript">
$("#mycontainer").load("kk-container.aspx");
</script>
Everything works fine up to here. However, I have to load this kk-container.aspx in a few more divs in the Default.aspx. This causes conflict in the id's of HTML controls. $("#kk-action").click() doesn't work for all. How can I solve this problem and load kk-container.aspx multiple times in one Default.aspx page.
More to say: I considered giving random id's for HTML controls for each load of kk-container.aspx. However I had already designed my stylesheet mostly with id selector. And I use a packet javascript, valums uploader, working in kk-container.aspx. It will also require edit. If there is a simpler way, I don't want to code all over.
I expected too much from jQuery and asked this question desperately. I should have decided first whether I will use "kk-container" thing once or multiple times in a page. For loading "kk-container" thing multiple times, I had to consider these:
Designing CSS using class selectors instead of id selectors.
Producing random id for my HTML elements like in this question.
Writing my javascript functions so that they work compatible with those random id's.
Therefore loadind "kk-container.aspx" in a page with jQuery load wouldn't cause any id conflicts.
Anyway, I did a mistake and didn't want to rewrite my code. I found a solution to load content of "kk-container.aspx" in my Default.aspx page without a problem. Instead of jQuery load function I used iframes.
Since there is already an item with id "kk-action",
Action (like this one)
loading a content having an item with id "kk-action" will cause trouble.
$("#mycontainer").load("kk-container.aspx?id=" + recordID); //troublesome method.
Instead create an iframe without border and load that content into iframe.
function btnEdit_Click(recordID) {
$('#mycontainer').html("");
var kayitKutusuFrame = document.createElement("iframe");
kk-Frame.setAttribute("id", "kk-iframe");
kk-Frame.setAttribute("src", "kk-container.aspx?id=" + recordID);
kk-Frame.setAttribute("class", "kk-iframe"); //For border: none;
kk-Frame.setAttribute("frameBorder", "0");
kk-Frame.setAttribute("hspace", "0");
kk-Frame.setAttribute("onload", "heightAdapter();"); //For non-IE
document.getElementById("Mycontainer").appendChild(kk-Frame);
if (isIE = /*#cc_on!#*/false) { //For IE
setTimeout(function () { heightAdapter() }, 500);
}
}
I didn't gave random id to "kk-iframe" because I will not use it mulitple times. It now resides in FaceBox. To make the iframe flawless, it needs to be auto-resized. My heightAdapter() function will do it. Not only when a content is loaded into iframe but also content changes dynamically because of my clicks.
Here is the actual code for resizing iframe to fit content by Guy Malachi.
function calcHeight(content) {
//find the height of the internal page
var the_height = content.scrollHeight;
//change the height of the iframe
document.getElementById("kk-iframe").height = the_height;
}
Here is my heightAdapter() function which will work both when content is loaded and when I clicked something causing content to expand.
function boyutAyarlayici() {
var content=document.getElementById("kk-Frame").contentWindow.document.body;
calcHeight(content);
if (content.addEventListener) { //Forn non-IE
content.addEventListener('click', function () {
calcHeight(content);
}, false);
}
else if (content.attachEvent) { //For IE
content.attachEvent('onclick', function () {
calcHeight(content);
});
}
}
And the following is a link in a repeater. Since the link will be replicated, it should have unique id by asp server.
<a href="#mycontainer" rel="facebox" id='btnEdit-<%# Eval("ID") %>'
onclick='btnEdit_Click(<%# Eval("ID") %>); return false;'>Düzenle</a>
Now, whenever I click one of the replica links, the content having an item with id "kk-action" can be loaded into the my flawless iframe which will be created in "mycontainer".
<div id="mycontainer" class="kk-iframe" style="display:none"></div>
And the content will be shown in my fancy FaceBox.
You're going to have to use classes to style the elements. There can only be one unique ID per page, so you are going to have to generate different IDs or use class selectors in your JavaScript such as:
$('.kk-action').click()
The above is probably the best way to go as it will give every element with that class the binding
I have this issue. I'm working on a jquery ajaxed site. I have the main content div in the middle and on top the navigation. I need to AJAX the content, because I have flash backgound so that the flash video won't start from beginning after every page load. The only way I was able to do this was with this sort of code:
$(document).ready(function(){
$.ajaxSetup ({
cache: false
});
//For loading
var ajax_load = "<img src='img/load.gif' alt='loading...' /><p>";
// Var
var loadPage1 = "page1.html";
// Load page
$("#page1").click(function(){
$("#content").hide(2000);
$("#content").html(ajax_load).load(loadPage1);
$("#content").show(2000);
});
All other ways to get the div didn't work because there was issues on getting plugins etc. working in the ajaxed div (content).
So... everythig is working fine - but, the div loads it's content from page1.html and shows it and only after this does it hide it and show it. So it loads the page and then does the effects I want to.
Do I need to queue this some how or what's the proper jquery way? I tried delay, stop etc.. but can't seem to solve this out. It's propably very simple.
Thanks.
Show the element in the load callback handler.
i.e:
$("#page1").click(function(){
$("#content").hide();
$("#content").html(ajax_load).load(loadPage1, function(){
$("#content").show(2000)
});
});
.load() takes 2 arguments, the URI and a callback to fire after load.
API is found here: http://api.jquery.com/load/
function() {
$("#content").hide(2000);
$("#content").html(ajax_load).load(loadPage1, function() {
$("#content").show(2000);
});
}
I call a certain div from another page with jquery to be loaded into a div on my main page like this:
<script type="text/javascript">
$("#scotland").load("http://www.example.com/scotland .gallery");
</script>
<div id="scotland"></div>
The div I call is a piece of code which is automatically generated by a CMS made simple module, by the way.
Now it comes to my problem: The .gallery div I call, looks, a little simplified, like this:
<div class="gallery">
<span><img src="http://www.example.com/scotlandimage1.jpg"></span>
<span class="imgnavi"><a href="link_to_next_page_with_one_image">Next image</href></span>
</div>
I want the "next image"-link to load the next page into the .gallery div (it is always a page with one image on it). But what it does, is, it opens the new page http://www.example.com/scotland only.
I tried to use jquerys .live event to load the linked page (that would be "scotlandimage2" and the navigation, as you can see in the upper part - not only the image!), but I must have done something wrong. I tried different ways, but never got it to work. This was my last try:
$(".imgnavi a").click(function() {
var myUrl = $(this).attr("href");
$(".gallery").load(myUrl);
return false;
});
I have to admit that I am very new to jquery... But does someone know what I did wrong (do I even follow the right handlers?)?
Thanks very much in advance!
Martin
Your first attempt is good, but you're missing the required-for-ajax call to live instead of click:
$('.imgnavi a').live('click', function(ev) {
// Stop regular handling of "click" in most non-IE browsers
ev.preventDefault();
ev.stopPropagation();
// Load the new content into the div (same code you had)
$('.gallery').load($(this).attr('href'));
// Stop regular handling of "click" in IE (and some others)
return false;
}
EDIT in response to the question: "What will happen with the old $('gallery') content?"
With the above code, the old content will be replaced with the response to the .load() request. If you want to, say, prepend the image instead, you can just wrap the .load() call in a call to the built-in jQuery $.prepend( content ) method, like so:
$('gallery').prepend($.load($(this).attr('href')));
The same works for appending.
I use JQuery to insert a form into a div, the form is in a php file.
function show(id){
var content = $("#layer1_content");
$("#layer1").show();
var targetUrl = "mouse.php?cat="+id;
content.load(targetUrl);
}
Everything works, but when I submit it goes to that php page. Ff I call the same form within the same php then it works fine. The response is handled by:
$('#layer1_form').ajaxForm({
target: '#content',
success: function()
{
$("#layer1").hide();
}
});
Your question is not super clear but my hunch is that in the case when it does not work, you are actually submitting the form. This would cause the page reload.
Try grabbing the form and attaching a submit handler that cancels the submit:
$('form').submit(function(){ return false; });
hey, thanks for reply, i just fixed it but in a very cheap manner.
Il try explain again, my jquery gets the contents from a php file like so:
stuff....here..
this calls a div that pops up:
function show(id)
{ var content = $("#layer1_content");
$("#layer1").show();
var targetUrl = "mouse.php?cat="+id;
content.load(targetUrl);}
and this is supposed to submit and send back the results from the php "savesettings"
$('#layer1_form').ajaxForm({
target: '#content',
success: function()
{
$("#layer1").hide();
}
});
above : #content is were the output will show.
layer1 is the div that holds the form.
if #layer1 div is were my javascript is then, everything works, and the #content div receives the info. But i cant put it the form in the same file cause it will contain alot of settings that will fill the page horribly.
so what i did was (and this is cheap of note i am sure)
this, i took all the stuff inside the form, and called it externally, so that did the trick but it feels cheap :
Iput i new div hre
you think my solution is pathetic?