How to make post.php to popup message using jquery UI when post data in jquery

Question

I am using jQuery to submit a form, which calls another.php, then I use jQuery-UI for a pop-up message, but it is not showing.

Without post, if I give the parameters as variables it will show the popup message.

This is the jQuery:

<script>
$(document).ready(function() {
  $("#divhide").hide();
  $('#info').submit(function() {
    $.post('another.php',$('#info').serialize(), function() {
      location.reload(true);
    });
  return false;
});
</script>

And this is the code in another.php:

<link rel="stylesheet" href="assets/jquery-ui.css">
<script src="assets/jquery.min.js"></script>
<script src="assets/jquery-ui.js"></script>
<script>
$(function() {
  $("#dialog").dialog({
     width: 200,
     hide: 'slide',
     position: 'top',
     show: 'slide',
     close: function(event, ui) {
       window.location.href = history.back();
    }
  });
});
</script>
<div id="dialog" title="Error">
  <p><?php echo "Error : Already  X has the value $X"; ?></p>
</div>

Don't return HTML/JS from an AJAX request. Instead return actual data in a serialised format, such as JSON or XML, and work with that in the promise of the $.ajax() call — Rory McCrossan
– Rory McCrossan, Commented Jan 30, 2020 at 16:20
I see no value here in the code in another.php being in a different PHP file. If you wanted to make it re-usable, put the contents of it in a JavaScript file, and wrap it in a function ( and before you ask, you could use JS to add/remove the <div id="dialog" from the DOM), include that in your main page and then just call the function when you want to show a dialog. AJAX is completely the wrong tool for the task of showing a popup. If another.php does actually also process the form data, then please keep it, but move the task of showing the popup into the "success" of your AJAX call. — ADyson
– ADyson, Commented Jan 30, 2020 at 16:25
Does this answer your question? Executing Javascript in Ajax-called page — zbee
– zbee, Commented Jan 30, 2020 at 16:25
See this answer of mine stackoverflow.com/a/59918008/12232340 — user1805543
– user1805543, Commented Jan 30, 2020 at 16:30
You should return data from your post request and on success you can open the dialog. On fail do something else. That is the logical way of doing it. — Michelangelo
– Michelangelo, Commented Jan 30, 2020 at 21:23

Twisty · Accepted Answer · 2020-01-30 21:21:08Z

The benefit of AJAX is that you can send data to the server or get data from the server via HTTP without having to reload the entire page.

For example, if you're posting data to a PHP Script with:

$(function() {
  $("#divhide").hide();
  $('#info').submit(function() {
    $.post('another.php', $(this).serialize(), function(data) {
      $("#divhide").html(data).show();
    });
  return false;
});

Your script will post data to the PHP and get some result, as the data variable back. JavaScript can accept a lot of data types back, Text, HTML, JSON, and XML for example. So if you're expecting HTML back, you can just append it to an object.

For example, if another.php has the following code:

<div id="dialog" title="Error">
  <p><?php echo "Error : Already X has the value $X"; ?></p>
</div>

Then this will come back in data and using .html() we can append it to an element.

Collectives™ on Stack Overflow

How to make post.php to popup message using jquery UI when post data in jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related