I am currently writing a compatibility layer between browsers and for this I need to ask the user to confirm an action. Currently the only standard way in JavaScript to do this is window.confirm which is synchronous and I do not want to block the whole site. So I would be searching for a library which can display a asynchronous browser-like request (e.g. the ones they use for Geolocation).
EDIT: And similar to the native one I do not need/want the user interaction to be modal. Just displaying and reacting on user input that is all.
I remember having seen such sites, but cannot remember where.
Can someone point me in the right direction?
As a bonus it would be great if it would work an look like the native ones in IE, FF and Opera.
the jQueryUI library has a dialog plugin that can be made modal. Since it is JS, it does not block the rest of the page execution.
Related
I have a webpage where the user has the possibility to display the terms and conditions without reloading the page, via AJAX. That, in itself, is no problem, however, I am also trying to push a history state.
That works fine in most browsers, except in IE. For some inexplicable reason, there, the content is loaded via AJAX, but also, a new tab is opened with the previous page. How can I fix this?
You can see the example on this webpage ( http://galaxy-battle.de ), try clicking on "T&Cs" in the "Join"-box.
IE9 and below doesn't support pushState. You have an exception when calling the following line
window.history.pushState(null, null, pathFullPage);
SCRIPT438: Object doesn't support property or method 'pushState'
?terms_and_conditions, line 62 character 21
You may probably be interesting looking on some workarounds discussed at Emulate/polyfill history.pushstate() in IE
Old but still current question. I just want to say I would recommend not to try to emulate pushState on IE.
Instead of that, you can use a feature detection :
if history.pushState is not null (browser supports pushState), you use it and load your content with nifty javascript
if history.pushState is null (browser does not support pushState), you change url / follow the link and make a full page change
Of course, this means IE<=9 users won't have all the cool animations other users have. But the question I want to ask is : do you want to see on the net links to your website containing # ?
Users may think your app is useful and paste links to it on the web. That's cool, because it brings you some google juice. Now, if that user uses IE and you use history.js, user will paste a link containing a hash.
This will defeats proper indexation of public pages of your app, and also will look ugly. My personal opinion is that having a js animation or lightbox for IE users doesn't worth those trade off.
I'm still pretty new to AJAX and javascript, but I'm getting there slowly.
I have a web-based application that relies heavily on mySQL and there are individual user accounts that are accessed and the UI is populated with user specific data.
I'm working on getting rid of a tabbed navigation bar that currently loads new pages because all that changes from page to page is information within one box.
The thing is that box needs to reload info from the database, etc.
I have had great help from users here showing that I need to call the database within the php page that ajax is calling.
OK-so pardon the lengthy intro-what I'm wondering is are there any specific limitations to what ajax can call that I need to know about? IE: someone mentioned that it's best not to call script files and that I should remove scripts from the php page that is being called and keep those in the 'parent' page. Any other things like this I need to keep in mind?
To clarify: I'm not looking to discuss the merits/drawbacks of the technology. I'm wondering about specific coding implementation that I need to be aware of (for example-I didn't until yesterday realize that if even if I had established a mySQL connection on the page, that I would need to re establish that connection in my called page as well...makes perfect sense now).
XMLHttpRequest which powers ajax has a number of limitations. I recommend brushing up on the same origin policy. This is a pivotal rule because it limits where AJAX calls can be made.
First, you can't have Javascript embedded in the HTTP response to an AJAX call. That's a security issue.
No mention of the dynamics of the database, but if the data to be displayed in tabs doesn't have to be real-time, why not cache it server-side?
I find that like any other protocol, Ajax works best in tightly controlled conditions. It wouldn't make much sense for updating nearly the whole page, unless you find that the user experience is improved with an on-page 'loader'. Without going into workarounds, disadvantages will include losing the browser back button / history, issues such as the one your friend mentioned, and also embedded resources and other rich content can suffer as well, and just having an extra layer of complexity to deal with in your app. Don't treat it as magic sauce for your app - make sure every use delivers specific results that benefit your client / audience.
IMHO, it's best to put your client side javascript in a separate page and then import it - neater container. one thing I've faced before is how to call xml back which contains code to run such as more javascript - it's worth checking if this is likely earlier on and avoiding, than having to look at evals.
Mildly interesting.
It's not that I'm not familiar with the concept but I'm wondering about what is the best approach when you are creating applications supporting ajax userexperience.
I mostly use ajax with jQuery but also when I want to load information without a pagerefresh. As you will probably know, the XmlHttp Object and the ResponseText provides a nice and easy way to execute a script in the back and display the results e.g. a div.
A bit of a downside of this approach is that its hard to see the actual generated sourcecode. I often take a look at the sourcecode to see if the expected parameters are correctly provided to e.g. formelements.
So I'm curious, what is your approach for creating ajax-data-load functionality? Is it just by the ResponseText property?
Having manually crafted XmlHttpRequest objects for a while, I now use jQuery for all my AJAX-ified stuff. It gives you much better control while coding less.
If you use Firefox, get yourself the Web Developer Toolbar. It has a cool feature called "view generated source code" which generates the HTML code that the browser knows about in the current document as it stands, so it includes the HTML sent back by your AJAX requests.
Also I make it a rule to always tell the user you're loading something rather than relying on the browser to tell them (like Gmail's "Loading" text in the corner for instance.)
I am using RUBY to screen scrap a web page (created in asp.net) which uses gridview to display data. I am successfully able to read the data displayed on page-1 of the grid but unable to figure out how I can move to the next page in the grid to read all the data.
Problem is the page number hyperlinks are not normal hyperlinks (with URL) but instead are javascript hyperlink which causes postback to the same page..
An example of the hyperlink:-
6
I recommend using Watir, a ruby library designed for browser testing, if you're already using ruby for processing. For one thing, it gives you a much nicer interface to the DOM elements on the page, and it makes clicking links like this easier:
ie.link(:text, '6').click
Then, of course you have easier methods for navigating the table as well. It's easy enough to automate this process:
1..total_number_of_pages.each do |next_page|
ie.link(:text, next_page).click
# table processing goes here
end
I don't know your use case, but this approach has its advantages and disadvantages. For one thing, it actually runs a browser instance, so if this is something you need to frequently run quietly in the background in completely automated way, this may not be the best approach. On the other hand, if it's ok to launch a browser instance, then you don't have to worry about all that postback nonsense, and you can just click the link as if you were a user.
Watir: http://wtr.rubyforge.org/
You'll need to figure out the actual URL.
Option 1a: Open the page in a browser with good developer support (e.g. firefox with the web development tools) and look through the source to find where _doPostBack is defined. Figure out what URL it's constructing. Note that it might not be in the main page source, but instead in something that the page loads.
Option 1b: Ditto, but have ruby do it. If you're fetching the page with Net:HTTP you've got the tools to find the definition of __doPostBack already (the body as a string, ruby's grep, and the ability to request additional files, such as those in script tags).
Option 2: Monitor the traffic between a browser and the page (e.g. with a logging proxy) to find out what the URL is.
Option 3: Ask the owner of the web page.
Option 4: Guess. This may not be as bad as it sounds (e.g. if the original URL ends with "...?page=1" or something) but in general this is the least likely to work.
Edit (in response to your comment on the other question):
Assuming you're using the Net:HTTP library, you can do a postback by just replacing your get with a post, e.g. my_http.post(my_url) instead of my_http.get(my_url)
Edit (in response to danieltalsky's answer):
watir may be a really good solution for you (I'm kicking myself for not having thought of it), but be aware that you may have to manually fire the event or go through other hoops to get what you want. As a specific gotcha, with any asynchronous fetch like this you need to make sure that the full response has come back before you scrape it; that isn't a problem when you're doing the request inline yourself.
You will have to perform the postback. The data is pass with a form POST back to the server. Like Markus said use something like FireBug or the Developer Tools in IE 8 and fiddler to watch the traffic. But honestly this is a web form using the bloated GridView and you will be in for a fun adventure. ;)
You'll need to do some investigation in order to figure out what HTTP request the javascript execution is performing. I've used the Mozilla browser with the Firebug plugin and also the "Live HTTP Headers" plugin to help determine what is going on. It will likely become clear to you which requests you will need to make in order to traverse to the next page. Make sure you pay attention to any cookies getting set.
I've had really good success using Mechanize for scraping. It wraps all of the HTTP communication, html parsing and searching(using Nokogiri), redirection, and holding onto cookies. But it doesn't know how to execute Javascript, which is why you will need to figure out what http request to perform on your own.
Right now i'm building a firefox plugin that duplicates some functionality on my website. It takes in an email address and then returns information to the user. The easiest way to do this in the plugin is to use an Iframe and render that super simple form on my website. All of this works great, but to make the plugin really useful, i would like the plugin to have access to the information that the iframe renders, so it can use it in the current window that the user is in.
Is it possible to pass information back through an Iframe in this manner? I know there are quite a few domain access restrictions with Iframes, so any help or insight is appreciated!!
I've done this two ways.
If the iframe is on the same domain as the parent website, you can just, in javascript, access window.parent.
If it isn't, however...I've done a dirty trick. I'll share it here, though, as it may help.
We created a page on the other domain, which would call to window.parent.parent. We put that in a hidden iframe inside the iframed page, and send it a querystring argument or two. It's not pretty, but it gets around cross-domain scripting problems.
This basically means that you have this sort of thing:
admin.example.com
content.example.com - iframe
admin.example.com?contentid=350 - hidden iframe that makes a window.parent.parent call.
Is the point of this whole exercise functional testing of your website? If so, instead of your custom Firefox plugin, consider using Selenium to automate interactions with websites. It works with all major browsers and supports the inspection of page elements you are trying to do (using XPath). It also features a Firefox plugin called Selenium IDE that allows you to conveniently "record" your interactions with a website for automated playback later.