Develop Reference

replacing showModalDialog causes loss of form post functionality

I am replacing the showModalDialog function which no longer works in Chrome and FF. We have many applications using that. The problem is, pop up windows do post instructions to the web server and update the database. For instance if there's a list of accounts on screen and edit is clicked on one of the accounts, an edit page appears as a pop up, posts changes back to the web server, then the list is refreshed with changes. The entire list may be refreshed or just text that changed.
I made a javascript function to do pop up content using overlays. I thought it would be simple to replace showModalDialog calls with the javascript function, but I did not consider post instructions sent by the pop up page to update the database, and complexity to facilitate that. Posting can be done via ajax-like functionality, encapsulated in a set of functions. Before I start writing code to do this I'd like to know what other people have done in this circumstance. Thanks

I wrote some javascript to do everything I want. Since my pop up windows had javascript, I needed to run javascript upon rendering modal content, and also when the modal content went away. This will produce any number of overlays on top of each other, managing each. Content can optionally appear in a frame with a title bar, closely matching the functionality of showModalDialog.
Download at http://bikehappy.org/modal.html . If used, please give feedback saying if it works and provide update suggestions.

JQuery Mobile: <script> tags do not show up but code runs

I'll refer to this ticket as step in the right direction for what I need:
jQuery mobile not loading new page scripts
One of the answers states that any code NOT nested in the first $([data-role=page]) tag in jQuery mobile will NOT show up in the html. I don't know if maybe this is a browser quirk or not but regardless, the code IS getting run despite it NEVER showing up. I find this difficult if I want to debug the js code since I can't add break points to any of it.
I've also had a problem with using the Jquery autocomplete plugin as it only works ONE time and then after submitting the form and returning the the form it no longer works. I believe this is because the page (well a partial piece of it by jquery mobile) gets reloaded and the autocomplete plugin is no longer bound to my textbox. I've tried using the live and on methods to make sure they get rebound but this doesn't work.
Can any javascript/jquery mobile geniuses out there help me out with this problem? Thanks!

Bootstrap Popover Reinitialization (To refresh Content)

So i managed to find a way to do what i want, but I'm not sure it's exactly the smartest and most efficient way....
What I'm currently doing is using a popover to show whether or not the user has met the password conditions to set a password. Because there are 5 fields, i decided it would be easier to create it in a hidden html (using the hide class), and then use JQuerys .html() to provide the content to the popover.
This worked, until i attempted to refresh the content while it was still open. I looked at several solutions after i couldn't figure it out by myself, and one of them recommended to use the .popover('destroy'); and then show it again with the new content. However this requires that you reinitialize everything else as well.
There were other solutions, but they appear to require you to use the data- attributes method of initialization, which i couldn't figure out a nice way to do (Because i wanted to create the content in the html while it was hidden.)
Since i couldn't find any working solution, i went with reinitializing everything, so i created a basic JavaScript function, and call .popover('destroy');, reassign everything, and the call .popover('show');, Then call this function whenever i want to update the popover's content.
I was wondering if this is the most efficient way of updating the content of a bootstrap 3.0 popover, that has been created from JavaScript...?

html look up field

How to create an html look up field. So, I want to achieve
an html input field, with an icon/button next to it
when user click on it, a pop-up window displays with a search form (I assume this can be created beforehand and hide using javascript)
user apply search, and data is displayed in the same (pop-up) window
when user select a value and apply ok, the field value is copied to the original input filed, and pop-up window closes.
Any sample code? Is there any simple way without using any java script library? or any simple plugin for jquery.
thanks.

It would be possible, but very unwise to do this without any libraries or plug-ins.
I strongly recommend jQuery UI's Dialog widget. It's very simple, well documented and easy to use.
You will probably be interested specifically in how to use the Dialog to display a form. Click the View Source link on that page to see all of the mark-up and code required to achieve that effect.

How to display a form in any site's pages using a bookmarklet (like Note in Google Reader)?

In Google Reader, you can use a bookmarklet to "note" a page you're visiting. When you press the bookmarklet, a little Google form is displayed on top of the current page. In the form you can enter a description, etc. When you press Submit, the form submits itself without leaving the page, and then the form disappears. All in all, a very smooth experience.
I obviously tried to take a look at how it's done, but the most interesting parts are minified and unreadable. So...
Any ideas on how to implement something like this (on the browser side)? What issues are there? Existing blog posts describing this?

Aupajo has it right. I will, however, point you towards a bookmarklet framework I worked up for our site (www.iminta.com).
The bookmarklet itself reads as follows:
javascript:void((function(){
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());
document.body.appendChild(e)
})())
This just injects a new script into the document that includes this file:
http://www.iminta.com/javascripts/new_bookmarklet.js
It's important to note that the bookmarklet creates an iframe, positions it, and adds events to the document to allow the user to do things like hit escape (to close the window) or to scroll (so it stays visible). It also hides elements that don't play well with z-positioning (flash, for example). Finally, it facilitates communicating across to the javascript that is running within the iframe. In this way, you can have a close button in the iframe that tells the parent document to remove the iframe. This kind of cross-domain stuff is a bit hacky, but it's the only way (I've seen) to do it.
Not for the feint of heart; if you're not good at JavaScript, prepare to struggle.

At it's very basic level it will be using createElement to create the elements to insert into the page and appendChild or insertBefore to insert them into the page.

You can use a simple bookmarklet to add a <script> tag which loads an external JavaScript file that can push the necessary elements to the DOM and present a modal window to the user. The form is submitted via an AJAX request, it's processed server-side, and returns with success or a list of errors the user needs to correct.
So the bookmarklet would look like:
javascript:code-to-add-script-tag-and-init-the-script;
The external script would include:
The ability to add an element to the DOM
The ability to update innerHTML of that element to be the markup you want to display for the user
Handling for the AJAX form processing
The window effect can be achieved with CSS positioning.
As for one complete resource for this specific task, you'd be pretty lucky to find anything. But have a look at the smaller, individual parts and you'll find plenty of resources. Have a look around for information on modal windows, adding elements to the DOM, and AJAX processing.