Solved

Jquery Dialog empty

Posted on 2014-04-16
5
380 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

759 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