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
