Thanks for your advice Beres. Eric's tip solved the problem. The
problem was never the initial (Ajax) request but each following
display of the modal dialog which will skip the step of populating the
content. That said, you are right in that it would be better to
display the modal in a callback function so I can make sure the
content was correctly loaded before I display it. I will modify my
code accordingly.
- Martin
On Jan 14, 3:21 am, Beres Botond <boton...@gmail.com> wrote:
> I think the most likely issue is that you are doing an ajax request
> (load), but manipulate the same div without waiting for the request to
> complete.
> So the modal is created before .load is finished.
> Try moving $("#content").modal(); to a callback of .load. This is a
> golden rule of ajax request, if you want to do something with returned
> data/html, then need to add your logic to a callback.
>
> $("#content").load("settings.htm", {}, function() {
> $("#content").modal();
>
> });
>
> On Jan 13, 9:10 pm, "mh.karls...@gmail.com" <mh.karls...@gmail.com>
> wrote:
>
> > I'm using AJAX to load content into a DIV and display it as a simple
> > modal (using the SimpleModal plugin). In order to limit the requests
> > to the server I would like to only load the content once, but that's
> > when I run into trouble. Let me show you the code and then I will
> > explain what happens.
>
> > HTML:
> > <div id="sidebar">
> > <a id="settings" href="#" class="settings">Settings</a>
> > <a id="options" href="#" class="test">Test</a>
> > </div>
> > <div id="content">Default Text</div>
>
> > JAVASCRIPT:
> > var isLoaded = false;
>
> > $(document).ready(function () {
> > // click event handler for 'settings'
> > $('#sidebar a.settings').click(function (e) {
> > if (!isLoaded) {
> > $("#content").load("settings.htm");
> > isLoaded = true;
> > }
> > $("#content").modal();
> > }
> > // click event handler for 'test'
> > $('#sidebar a.test').click(function (e) {
> > $("#content").modal();
> > }
>
> > }
>
> > function hideModal(){
> > $.modal.close();
>
> > }
>
> > The first time I click on the link 'Settings' the content from
> > 'settings.htm' is correctly displayed as a simple modal. But each time
> > I click on the link after that it will display the DIV's initial text
> > ("Default Text"). However, if I remove the following line;
>
> > $("#content").modal();
>
> > from the event handler for the link 'settings' and then use the 'test'
> > link instead it displays correctly each time. I can't find the reason
> > why this wouldn't work in the event handler for 'settings'? By viewing
> > the rendered HTML I can confirm that content of the 'settings.htm' is
> > correctly injected to the content div after the initial click. But I
> > can't figure out what happens after that and how the default text make
> > it back in there. I'm pretty new to jQuery so if anyone can shed some
> > light on this issue I would really appreciate it.
>
> > Thanks, Martin
