my first post on Stackoverflow.

I'm building a page with bootstrap and php. I have a value load from a database in a text field in a div.

In the same page I have a button loading a modal where I have a form with the same value load in a text field.

So if the user changes the value in the form and hits update I would like the modal to close and the value update on the page.

All the modal, form, load and save database is working. The place where I'm stuck is the div refresh data part.

Any advice.

You can change the content of the div by using text

$("div#some_id").text("new text")

Or add HTML using html

$("div#some_id").html("<h1>Hello</h1>")

Or use a variable

var post_name = "Update div after form submit";
$("div#some_id").text("Thanks for adding a new post called '" + post_name + "'")

If you are using jquery ajax to post you can do this

$.ajax({
    type: 'POST',
    url: 'php file name',
    dataType: 'html',
    data: 'somedata',
    success: function(data) {
        $('#divID').html(data)
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("Failed to load");
    }
});

IF is a Input : api.jquery.com/val/

$(element_to_change).val(ajaxResponse.new_value)

OR api.jquery.com/html/

$(element_to_change).html(ajaxResponse.new_value)

Modal

If modal is JqueryUI Dialog

http://api.jqueryui.com/dialog/#method-close

$(element_modal).dialog( "close" );

So You can do

$.ajax({
    success : function ( ajaxResponse ) {
      $(element_modal).dialog({
             close: function( event, ui ) {
             $(element_to_change).html(ajaxResponse.new_value) 
             //OR
              $(element_to_change).val(ajaxResponse.new_value)
          }
      });
    }
});

If is not a jqueryUI Dialog

$(element_modal).hide();

Or Remove element from DOM

$(element_modal).remove();