Solved

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

Posted on 2012-03-24
10
1,410 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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
 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

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 …
This article will show, step by step, how to integrate R code into a R Sweave document
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

821 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