Solved

Jquery Dialog empty

Posted on 2014-04-16
5
368 Views
Last Modified: 2014-04-16
Hi again,
I have set up a dialog box for updating or creating a new record which opens by a link click
<a href="javascript:getAddRemark()">Add Remark</a>

Open in new window

which calls my script
 function getAddRemark() {
            $.ajax({
                type:"GET",
                url:"/Remarks/Create/" + TreeId,
                success: function(content) {
                    $("#rinput").dialog({modal: true, width:425, resizable: false, title: "Add Remark", dialogClass: "mydialog" });                    
                    $("#irinput").html(content);                   
                    $(".date").datepicker();           

                }                              
            });            
        }

Open in new window


About 8/10 times everything runs perfect but every once in a while the dialog opens and is empty (No labels, textboxes or dropdowns).

I have no idea what is causing it so any help would be highly appreciated.

Thanks
0
Comment
Question by:Niall292
  • 3
5 Comments
 
LVL 23

Expert Comment

by:Ioannis Paraskevopoulos
Comment Utility
Have you tried using
$( document ).ready

Open in new window


$( document ).ready( function getAddRemark() {
            $.ajax({
                type:"GET",
                url:"/Remarks/Create/" + TreeId,
                success: function(content) {
                    $("#rinput").dialog({modal: true, width:425, resizable: false, title: "Add Remark", dialogClass: "mydialog" });                    
                    $("#irinput").html(content);                   
                    $(".date").datepicker();           

                }                              
            });            
        });

Open in new window

0
 

Author Comment

by:Niall292
Comment Utility
I could be wrong but I don't think $(document).ready comes into this issue as it is a named function and is being called by a button click.

I will try it anyway
0
 

Author Comment

by:Niall292
Comment Utility
When I put in $(document).ready it treats it like I'm trying to call it when the page opens and then fails because there are no parameters yet
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
Can't see a specific problem in your code, although there are a couple of things to improve it.

Firstly, make sure your function returns false, which will prevent the link from being followed.

Assuming the AJAX request grabs the content for the dialog, try populating the dialog before calling it:

$("#irinput").html(content);                   
$(".date").datepicker();           
$("#rinput").dialog({modal: true, width:425, resizable: false, title: "Add Remark", dialogClass: "mydialog" });

Open in new window

When the dialog appears and is empty, check the content that is being returned from your script - if that's empty, then the problem is with your server-side script - not your jQuery. If you're using FireFox/Firebug then you can see exactly what the AJAX call is doing (parameters being passed / response from the server etc.).

You may also want to add an error handler to your AJAX call (although if the dialog is showing then an error isn't being fired!)
0
 

Author Closing Comment

by:Niall292
Comment Utility
Chris,
Thanks again, that seems to have done the trick swapping the lines. So far I tried it about 8 times and it was populated every time.

Thanks
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now