Solved

Jquery Dialog empty

Posted on 2014-04-16
5
375 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
ID: 40003697
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
ID: 40003764
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
ID: 40003790
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 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40004512
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
ID: 40004662
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

785 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