Running into a problem while trying to implement Waypoints infinite scroll example from http://imakewebthings.com/waypoints/shortcuts/infinite-scroll/.
Here is a JSFiddle to demonstrate my issue: http://jsfiddle.net/jmankin/75g6cap2/5/
HTML
<div class="infinite-container">
<div class="infinite-item">Not much content</div>
</div>
<a class="infinite-more-link"
href="/gh/get/response.html/jermifer/jsfiddle/tree/master/waypoints-infinite/"
>Loading...</a>
JS
var waypoint = new Waypoint.Infinite({
element: $('div.infinite-container')[0]
});
In instances where the 1st "infinite-more-link" is "above the fold" of the viewport on page load (i.e. the "inifinite-item" content is too short to require scrolling), the script correctly makes an AJAX call to the link href and loads the requested content.
However, it then prematurely--and seemingly incorrectly--proceeds to make the AJAX call to the 2nd "infinite-more-link" even though that is "below the fold" when it loads.
Secondly, from then on, scrolling to the bottom of the page (what would technically now be the 2nd "infinite-item" content element) will cause an AJAX call to the originally requested URL (the one that the client explicitly addressed), which is completely baffling. Under normal circumstances, it does this over and over again. In jsFiddle, it just does it the once, but that still gives you an idea of what I mean.
(Note: I'm not able to know ahead of time the length of the content I'd be loading, which is why I can't guarantee that the user will have to scroll down to see the 1st "infinite-more-link.")
I tried to contribute to solve this issue in the library in this link, please check that: https://github.com/imakewebthings/waypoints/issues/384 - Best wishes!
Related
I have a working progress bar inside a Django app. Except in Safari the bar shows up only under weird circumstances.
First, I have the progress bar appended via jquery/ajax combination:
var $progress = $('<div id="upload-progress" class="upload-progress"></div>')
.appendTo($('#webfileuploadform'))
.append('
<div class="progress-container">
<div class="progress-info">uploading 0%</div>
<div class="progress-bar"></div>
</div>');
//This is all one string, I've just broken it up like this so it's readable.
//Called on form submit
$.ajax({
...yada yada...
success: function(data){
$progress.show(); <-- shows the div(s)
...more yada...
In Firefox and Chrome, this all works fine. In Safari, this is actually working as well, just not displaying. When I open up Safari developer tools and drill down to the <form> I can see that the DOM elements are being appended to the form as they should. The width of the progress bar and the text of the progress-info div are updating correctly as well (in developer tools). The problem is the #upload-progress div is not showing in the browser even though I see it exists in the developer tools!
What blows my mind is that if I click the grey 'x' in Safari to force stop the page, the progress bar then shows up!
Another weird thing is that once I click the form submit, if I highlight any dom element in my developer tools the entire page is blanked out with the same color I have on a wrapper div around the entire page! Also, if I highlight an element in the developer tools before I click the submit button, then click, the page just jumps straight to blanking out again. I don't even have to move around in the developer tools.
Very strange behavior. I have no idea what's going on...
I've read some things saying safari doesn't redraw the DOM when css is applied with jquery? I don't think that's true, but does this have something to do with it?
UPDATE
So this problem persists even outside the ajax function, but works outside the submit handler. That is:
problem persists when I click the submit button (no ajax code here)
$('#webfileuploadform').submit(function(){
$('#webfileuploadform').append('<div id="upload-progress" class="upload-progress">asdf</div>');
$('#upload-progress').append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
...
});
same code outside of the submit handler works
$('#webfileuploadform').append('<div id="upload-progress" class="upload-progress">asdf</div>');
$('#upload-progress').append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
$('#webfileuploadform').submit(function(){
...
});
This is a problem with webkit. The bug report is here. Webkit cannot handle XMLHttpRequests after a form submit. A workaround that I used was to submit the form to a target iframe. Turns out the bug only happens when the target is the same document that the form is in...
Changed target:
<form action="my_django_view" method="post" enctype="multipart/form-data" id="formID" target="theIframeName">
...
</form>
Hidden iframe on page:
<iframe name="theIFrameName" id="style-me-with-display-none"></iframe>
Although it should be noted I'm working with legacy code here, which is why I'm handling file objects with forms. If you are starting from scratch, there are better ways to handle file objects nowadays and this method should be avoided.
I have a REST Url http://localhost/issues presenting me a search form for querying issues of a bug tracker system. The search form has a textfield with name="f". The action of the form is action="/issues" and the method=GET. So if I type "foobar" into the textfield, I am getting redirected to http://localhost/issues?f=foobar.
To prevent page reload, I use AJAX with jquery. So I used $(document).on('submit',...) to bind an AJAX query function to the submit function of the form. I used firebug to proove, that jquery sends the request and no page reload is taken. I also have a function to fill results of the response into my site presented in the browser. Everything works fine for the first search attempt.
But if I type another search string "anotherfoobar" into the textfield and resend the request, the request URL is http://localhost/issues?f=foobar&f=anotherfoobar, so the search parameter is only appended to the URL, not updatedas I thought it would happen.
I've read about "hashing" the URL parameters to prevent this behaviour here on stackoverflow, but do not fully understand what and why this is happening and what "hashing" means exactly. Perhaps it's not the right solution for me. So I kindly ask someone to explain me how I can solve this.
I've solved it! Don't ask how exactly, what I did was the following:
The AJAX response is the whole Web page as I would get it with a page reload. with jquery I select a div which includes the search form AND the results.
I simply defined a div only for the results, and update only the content of the results div. After doing so, everything works fine, and the results div updates with multiple search attempts.
Another case of not knowing what I do, but I do it fine ;)
Perhaps someone still can explain me my error so wisdom can rise.
This is probably going to get a resounding no, but I am wondering if it possible to have the URl change dynamically with using hashing, and without invoking a http request from the browser?
My client is keen on using AJAX for main navigation. This is fine, when the end user goes to the front page first, but when they want to use the deep linking, despite it working, it forces an extra load time as the page loads the front page, then invokes the AJAX from the hash.
UPDATE: Could it be possible, given that what I want to avoid is the page reload (the reason is that it looks bad) to stem the reload by catching the hash with PHP before the headers are sent, and redirecting before the page load. This way only one page loads, and the redirect is all but invisible to the user. Not sure how to do this, but seems like it is possible?
Yes, this is possible. I often do this to store state in the hash part of the URL. The result is that the page doesn't reload, but if the user does reload, they're taken to the right page.
Using this method, the URL will look like: "/index#page=home" or "/index#page=about"
You'll need to write a JavaScript function that handles navigation, and you'll need a containing div that gets rewritten with the contents fetched from AJAX.
Home
About
Questions
<div id="content"></div>
<script type="text/javascript">
function link(page) {
location.hash = "page="+page;
loadPage(page);
}
// NOTE: This is using MooTools. Use the AJAX method in whatever
// JavaScript framework you're using.
function loadPage(page) {
new Request.HTML({
url: "/ajax/"+page+".html",
onSuccess: function(tree, elements, html) {
document.id('content').setProperty('html', html);
}
}).get();
}
</script>
Now, you'll also need to have something that checks the hash on page load to load the right content initially. Again, this is using MooTools, but use whatever onLoad method your JavaScript framework provides.
<script type="text/javascript">
document.addEvent('domready', function() {
parts = location.hash.split('=');
loadPage(parts[1]);
}
</script>
Ok, the problem is that opening an AJAX link of the form http://example.com/#xyz results in a full page being downloaded to the browser, and then the AJAX-altered content is changed once the page has loaded and checked the hash part of its URL. The user has a diconcerting experience.
You can hugely improve this by making a page that just contains the static elements - menus, etc. - and a loading GIF in the content area. This page checks its URL upon loading and dynamically fetches the content specified by the hash part. The page can have any URL you want; we'll use http://example.com/a. Links to this page (http://example.com/a#xyz) now provide a good user experience for users with scripting enabled.
However, new users won't come to the site by fetching http://example.com/a; they'll fetch http://example.com. This is fine - serve the full page, including the home page content and links that don't require scripting to work (e.g., http://example.com/xyz). A script run on loading this page should alter the href of AJAXable links to their AJAX form (http://example.com/a#xyz); thus the first link a user clicks on will result in a full page load but subsequent ones won't.
The only remaining problem is is a no-script user gets sent an AJAX link. You can add a noscript block to the AJAX page that contains a message explaining the problem and provides a link back to the homepage; you could include instructions on how to enable scripting or even how to modify the link by removing a# and pressing enter.
It's not a great answer, but you can offer a different link in the page itself; e.g., if the address bar shows /#xyz you include a link to /xyz somewhere in the page. You could also add a link or button that uses script to bookmark the page, which would again use the non-AJAX form of the link.
After I load a page through a WebBrowser, and I click a link that fires an AJAX script, I need to detect when the AJAX java script finishes loading HTML changes into a div. Since no DocumentCompleted event is fired when the AJAX script is run, I don't know when it finish running. Is there a way I can attach an event to be raised after I know 100% that the javascript finished changing the div?
The project is in C#.
Thanks
I did something similar recently (using jQuery):
$('#mydiv').change(function(){
// do stuff
}
);
Granted, I also use jQuery to set the HTML of that div. I suppose one non-jQuery approach for you could be to set HTML through your own function, which in turn can fire an onchange event.
#New in town: From my experience that is not correct. I use this on multiple DIVs that never get focus in the first place, and it works well and consistently. The normal behavior is as you describe, and normally only applies to the INPUT and SELECT elements, but this is not the case with jQuery.
There is no event. You must patch the JavaScript callback that the browser runs when the reply for the AJAX request comes in. This will contains code like "div.innerHTML = ...". Just put your code below that.
Good day,
I was wondering if there is a way to make Ajax move on to the next code segment only when all the elements included in the server-side code page are fully loaded. When the retrieved data is text-only there’s no problem, but sometimes there are photos included.
This is part of the code I have been using:
xajx.onreadystatechange = function(){
if(xajx.readyState==4){
document.all.div1.innerHTML = xajx.responseText;
document.all.div1.style.display = “”;
}
}
The thing is that when the response is retrieved (readyState set to 4) and div1 is displayed, the Photo has not been completely loaded yet, so actually the user can see the process of the picture slowly appearing, as he would in any other “normal” case. What I want to do is making div1 available for display only once all the components are fully loaded while meanwhile the system does its stuff in the background. Before Ajax I used hidden iframes like everybody, so I could enclose an onload event handler within the iframe tag (or in an external script), so div1 would appear only after the iframe has fully loaded, photos included.
Any idea?
You can use the 'onload' event on images themselves. You'll need to work out how to attach that event when you are downloading the code dynamically as in your case.