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>
Related
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>
I'm banging my head against the wall here, and hoping I'm just blind to something obvious.
I have this DOM structure:
<ul>
<li>
<h3>Lorem ipusm</h3>
<p class="remove-story">Delete</p>
</li>
</ul>
And this is my jQuery:
$(".remove-story a").click(function()
{
var parent = $(this).closest('li');
$.get($(this).attr('href'), function()
{
$(parent).fadeOut();
});
return false;
});
As it stands, clicking on the link within .remove-story does nothing, and the action triggered by the URL in the link does not occur either.
No JS errors pop-up in the console either on page load or when clicking the link.
If I remove the $.get function and simply fade out the list item, that works as expected.
If I visit the URL manually (or remove the return false and click the link), the link works and the back-end action completes (story removed).
Is there an error in my code here that anyone can spot? If not, any ideas as to where to look next to troubleshoot this?
I would firstly check if that get request really been send our, I mean using some tool like Fiddler or Chrome developer tool network tab, and then maybe add break point inside the call see if the parent you in that certain context is nothing or a wrong object
Wrap your onclick with $(document).ready(function() {}):
$(".remove-story > a").click(function(e)
{
var parent = $(this).closest('li');
alert($(this).attr('href'));
$.ajax({
url: $(this).attr('href'),
success: function() {
alert(12);
$(parent).fadeOut();
},
error: function(e) {
alert('baaaahhhh:' + e);
}
})
//e.stopPropagation();
return false;
});
Update: Changed $.get to $.ajax to see if thrs error while doing Ajax request.
You need to encode your link encodeURIComponent($(this).attr('href'));
Here is a jsfiddle working:
http://jsfiddle.net/9Wnt8/
I have a form which populates div elements based on selections from a select box using an AJAX call.
The content of the populated div is a multiselect box that I want Chosen to apply to. Unfortunately it seems that the 'chzn-select' is not firing, no doubt due to this being pulled in dynamically.
I have added this:
<script type="text/javascript">
$(".chzn-select").chosen();
</script>
To the bottom of the code that is pulled in by AJAX, but it is still not firing. Any ideas on how to make this work as desired?
Solved myself. Will post for future reference. I put the Chosen calls in their own function on my original page that calls the AJAX:
<script type="text/javascript">
function doChosen() {
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
}
</script>
And in the AJAX script itself, I added a call to the function after the responseText part:
document.getElementById(div).innerHTML=oXmlHttp.responseText
doChosen();
instead of using chosen(), try change() method. It works on change event.
try:
$(".chzn-select").change(function () {
var str = "";
$("select option:selected").each(function () {
// do your coding here
});
})
.trigger('change');
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?