jquery对话框与ajax

Question

i want to replace my popup with ajax-dialogs. For example :

i have a input field for article-numbers.

<span>article-no</span><input type='text' id='article_no'>

now if you klick on the text article-no a popup (new window) opens and you can search the article via searchfields. You can enter searchwords and a table with matching articles will be shown. if you select an article in the table the popup closes an the article-no in the opener will be filled. That works, but i want to have no popups.

i searched the weekend for jquery dialogs. But i found no example that has dynamic content. i mean that i show a searchform in the dialog and if you search in it, the table with matching articles(created via ajax call) should be shown in the dialog so you could select the right article.

can anybody give me tipps how to get this?

bya jogi

Answer 1

You can accomplish this via ajax, by implementing a flow like this:

1. when "article-no' is clicked call the dialog() jquery-ui function, and launch an ajax call; optionally you can either supply a "loading" css class for the dialog div, or set a "loading" html content
2. on ajax success handler set the html content of the dialog div to the one received from server
3. now the problem is with the search form, as the popup implementation took care by that by reloading the page with the search results, you'll need to intercept the submit event on the search form and make another ajax call, with the same success handler setting the dialog div html; again you can supply a loading indicator to the user
4. you will need to also intercept the click events on the search results in order to fill the article contents on the main page

Note. You can use the jQuery.load() function instead of the jquery.ajax() one as it makes it easier to write the ajax calls.