Solved

how to refresh a jquery UI dialog after a form submitted?

Posted on 2012-03-24
10
1,401 Views
Last Modified: 2012-08-13
Hi
i have  a jquery ui dialog that open with a table of data from the database.
i also have a link that open another UI dialog with a form to add an item.

right now, when i press the submit button of the form i refresh the whole page and  that is it. what i want is to refresh the first dialog when the submit button is pressed.

so when i add an item and press the submit: the form dialog is cloased and the dialog with the data display the refreshed data.

i add my ajax code for the form submition.

    $("#devidersend").live('click',function(e){
        e.preventDefault();
          var devidertitle = $("#devidername").val();
          var devidermenutype =  $("select#devidermenutype option:selected").val();
          var deviderlang = $("select#deviderlang option:selected").val();
          // $("form#form-menu p.msg").remove();
          //triger a click the current menu group.
          $.ajax({
            type: 'POST',
            url: '/cms/addDevider/',
            data:{
                devidertitle:devidertitle,
                devidermenutype:devidermenutype,
                deviderlang:deviderlang
            },
            datatype: 'json',
            success: function(data){
                var theData = JSON.parse(data);
                
                if(theData.type == 'errors'){     
                    $("form#devideradding").prepend("<ul class='formalerts'>");
                    $.each(theData.message, function(key, value) { 		 		
                        $("form#devideradding ul.formalerts").append("<li> "  + value + "</li>");
                    });
                    $("form#devideradding ul.formalerts").append("</ul>");
                }else if(theData.type == 'missings'){
                    $("form#devideradding").prepend("<ul class='formalerts'>");
                    $.each(theData.message, function(key, value) { 		 		
                        $("form#devideradding  ul.formalerts").append("<li>" +emptyfield+ ": "  + value + "</li>");
                    });
                    $("form#devideradding ul.formalerts").append("</ul>");
                }else {
                   window.location.href = '/';
                    $('div#adddevider').delay(5000).queue(function(){
                        $('div#adddevider').dialog("close");
                    });
                   
                }
            },
                        beforeSend: function() {
                           $('form#devideradding').prepend("<p class='loadit' ></p>");
                        },
                        complete: function(){
                            $("p.loadit").fadeOut();
                        }
        });
        return false;
    });

Open in new window



how can i get this to work?

best regards
0
Comment
Question by:derrida
  • 5
  • 5
10 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37760511
window.location.href = '/';
Will reload the page. Why do you do that?
0
 
LVL 1

Author Comment

by:derrida
ID: 37760524
because as it stand now i have no idea how to refresh the dialog UI. once i`ll be able to do that i will not reload the page.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37760713
Do you have a page somewhere?
0
 
LVL 1

Author Comment

by:derrida
ID: 37760890
hi
no its on my locqal machine.
but the issue is : where right now i do
window.location.href = '/';
to write a code that refresh the specific dialog.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37760995
With the code provided I cannot help you solve your issue - I do not know what you mean by refreshing the UI dialog since I do not see it opened
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 1

Author Comment

by:derrida
ID: 37762277
hi
think about a simple CRUD . lets say: user management.
when i press a "manage users" a jquery UI dialog is opened with a table of all the users and a link to add a new user. when this link is pressed a new jquery UI dialog is opened with a form for adding a user.
when this form is submitted i close the form dialog and i want to refresh the table of users in the table dialog.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37762463
So refresh dialog or table?
Can you make some screen shots?
0
 
LVL 1

Author Comment

by:derrida
ID: 37762476
well the table since i want the new data to appear once i added a new content.

i attach the imagesfirst fialog with the table second dialog with form and submit button
what i need is that when i press the submit button in the form: the form dialog will close and the data in the first dialog will be updated.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 37762481
Ohh, the first is ALSO a dialog

try changing

}else {
  window.location.href = '/';
  $('div#adddevider').delay(5000).queue(function(){
    $('div#adddevider').dialog("close");
   });
     

to

}else {
   $('div#adddevider').dialog("close");
   $("#devidersend").trigger("click");
0
 
LVL 1

Author Closing Comment

by:derrida
ID: 37762488
had no idea i can fake a click
thanks
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

911 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

18 Experts available now in Live!

Get 1:1 Help Now