Solved

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

Posted on 2012-03-24
10
1,398 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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article discusses how to create an extensible mechanism for linked drop downs.
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)
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

708 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