Solved

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

Posted on 2012-03-24
10
1,413 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
[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
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Powershell- Registry HIVE 6 60
Where is this content coming from? 4 34
Make New Browser Window Fully Functional 7 32
Check for Numeric Phone Field 14 39
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 …
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

740 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