Search jQuery

jQuery Forum

A generic popup for messages?

in jQuery Mobile • 7 months ago

I have a multiple page setup where each page is in a different file. I make alot of Ajax calls on each page. Calls that can go wrong. So i need to display some info to the user if it goes wrong. So i thought that popup would be cool. But i need a generic popup that will popup instead of adding popups to every page and file.

In my start.html i have the following:
<body>
        <div data-role="page" id="startpage">
            <div data-role="popup" id="popup_msg" data-theme="a" data-shadow="false" style="min-width:230px;">
                <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
                <p id="startpage_msg" style="text-align:center; padding-top:10px; padding-bottom:10px;"></p>
            </div>
.....

There is no problem calling it like this:
$("#startpage #popup_msg").popup("open");

But not in another page (file).

Is there a way to do this so i can have ONE popup that will serve all the messages displayed to the user?

Replies(6)

watusiware

Re: A generic popup for messages?

7 months ago

Popups do not work this way. There is a specific disclaimer about it in the docs. The popup has to be in the page from which it pops-up.

If your site is not using a CMS or some server-side framework that uses templates, then a static site generator can ease the task of including a popup in every page.

It's no different than the requirement for, say, a persistent footer. You still have to define the footer in every page where it is used.

uwjack

Re: A generic popup for messages?

7 months ago

Thanx for your answer!

I solved it by injecting every page with a popup. Then from every page i call my own script to load it and then to show message (if needed).

John Chac..

Re: A generic popup for messages?

7 months ago

this is the runtime popup generation which I do...

function messagePopup(message, popupafterclose) {
var template = "<div data-role='popup' class='ui-content messagePopup' style='max-width:280px'> <a href='#' data-role='button' data-theme='g' data-icon='delete' data-iconpos='notext' class='ui-btn-right closePopup'>Close</a> <span> " + message + " </span> </div>";
popupafterclose = popupafterclose ? popupafterclose : function () {};
$.mobile.activePage.append(template).trigger("create");
$.mobile.activePage.find(".closePopup").bind("tap", function (e) {
$.mobile.activePage.find(".messagePopup").popup("close");
});
$.mobile.activePage.find(".messagePopup").popup().popup("open").bind({
popupafterclose: function () {
$(this).unbind("popupafterclose").remove();
popupafterclose();
}
});
}

watusiware

Re: A generic popup for messages?

7 months ago

Dynamically injecting the popup will work, but it's preferable to use a static site generator or server-side include, MVC frame work, template system, etc. so that it isn't necessary.

It really isn't practical to develop any JQM site of any appreciable size without using some sort of template/layout capability, yet I sense that many are developing unmaintainable JQM sites without the use of appropriate tools.

By using templates and layouts, you can easily place any markup on every page of your site or every page of sections of your site, etc. and then change it without having to do labor-intensive manual edits.

This is true for any website of any kind, but it is even more critical with JQM, particularly for maintaining <head> as well as popups and persistent headers/footers that might need to appear on every page of the site, or every page of some section or particular type.

If you have a site of 100 pages, and you find you have to edit 100 pages often, you are going about it the wrong way.

I use Middleman for this.

uwjack

Re: A generic popup for messages?

7 months ago

Thanx for your explanation. In this case i do not use a template framework. I have never tried it in a mobile app. When i usually do web projects i use templates. Either i write my own or use an existing framework (depending on overhead, time and complexity).

I will check your "Middleman" out. Sounds good. And it would be pretty nice to have a template framework so i can stop repeating my html code.

Thanx again for a great answer!

watusiware

Re: A generic popup for messages?

7 months ago

I think that web developers have a bit of a blind-spot regarding mobile. Mobile applications have brought back the need to create static sites.

Before mobile, static sites - at least large static sites - had largely gone the way of the dodo bird. Large websites today are created using a CMS or an MVC framework. Even if it is a simple site that doesn't use these, you can still use simple tools like server side includes which are available on every webserver.

Now, mobile has thrown a monkey-wrench at web developers. Once again, we need to be able to create large static sites.

So, you need some tools to manage that.

I would have thought that common tools for creating websites included this capability. I had a blind spot about this myself, since I was involved in some very early tools for creating large static sites.

----
Many years ago, (like 1995) I worked for a company called MediaShare. We had a product called ProductBase. It stored data about products in a database, and you could generate either a printed catalog (PageMaker) or a CD-ROM catalog (this was the Next Big Thing at the time...) It used templates to do this.

I had an interest in the emerging web, and I suggested to my boss that with a bit of effort, we could make it spit-out HTML pages as well. (I'd been hired on contract to do something completely different, and my task was complete, so...)

He agreed, and they piddled around with it at first. Because they were producing CD-ROM catalogs for some big companies, though, eventually, they produced some of the early web catalogs. Notably, a large catalog for 3M and a big catalog for Tesco. These were static sites, with no live database backend. (Nobody was doing that yet.)

Later, we added the ability to add in bits of interactive Javascript without any programming. This got MacroMedia interested, and they bought MediaShare. The ProductBase technology got rolled-into Dreamweaver.

Adobe later bought Macromedia.

Somewhere along the way, the templates seem to have become lost, while the ability to use bits of Javascript without having to do programming seems to have stayed. I've never used Dreamweaver, and so I always thought it had some kind of templating. Maybe that got put into some other Adobe product(s) instead. (I would think this is absolutely essential for producing print publications of any size.)

Unless I am mistaken, and templates are there hidden under a different name, somebody threw away something critical along the way, IMO. Because when I search on how to change, say, the <head> section of every page of your site with Dreamweaver, all I get are articles telling you how to do a mass edit using regexs. No suggestions that you should have used the apparently non-existent template capability.

-------

Middleman and other static site generators are great tools for creating static websites. However, they aren't terribly designer-friendly.

I suppose this should have been a separate post. It would be good to have a discussion of tools for managing large static sites.

Another option is that many CMSs have an option to generate a static site from their content.

Top Reply

Response title

Attachments

jQuery Forum

A generic popup for messages?

Replies(6)

Re: A generic popup for messages?

Re: A generic popup for messages?

Re: A generic popup for messages?

Re: A generic popup for messages?

Re: A generic popup for messages?

Re: A generic popup for messages?

Statistics

Tags

Actions

Related Posts