0

My code

index.php

<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
  $("#verifica").click(function(){
  $("#risultati").html("Please wait...");
    $.ajax({
      type: "POST",
      url: "go.php",
      data: $("#ciao").serialize(),
      dataType: "html",
      success: function(msg)
      {
        $("#risultati").html(msg);
      },
      error: function()
      {
          $("#risultati").html("An error occurred.");
      }
    });
  });
});
</script>
<form name="ciao" id="ciao" action="#">
<input type="text" id="zio" name="zio">
<input type="submit" onclick="return:false;" name="verifica" id="verifica" value="go">
</form>
<div id="risultati"></div>
</body>

go.php

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script>
$("#zio").focus();
</script>
</body>

What it should do

Focusing #zio when form has completely submitted to go.php via jquery.

What's not working

While form data is submitted, #zio is not focused.

My question

How can I fix my code?

  • Calls to `html()` string strip out a number of elements from the HTML text (including scripts). Same as if you convert the text to DOM using `$(html)`. – iCollect.it Ltd Sep 03 '14 at 11:38
  • Thanks for your comment :) I didn't know that, but if I try to put alert("Hey!"); into go.php it is run. How come? –  Sep 03 '14 at 11:42
  • Did your other test (of alert) have a body element in the child page too? Nesting body elements will also cause problems. – iCollect.it Ltd Sep 03 '14 at 11:43
  • They have, I just added the alert to the code of go.php I posted. So I shouldn't put head and body tags? I had to put the charset into it (and so specify the main two tags) because otherwise there would have been problems with accents (which exist in Italian, the language the page is written) –  Sep 03 '14 at 11:45
  • 1
    I don't think the charset of the loaded page will be used (rather than the current page), as the header is stripped too. I would need to see a mock-up sample to check the behavior. – iCollect.it Ltd Sep 03 '14 at 11:54
  • I was creating the basic sample you requested and I noticed that *using* an additional charset will create problems, as you said (I can link you the page where there's the script), so the specific problem I'm facing is caused by something else. I'm going to dig deeper and figure out. Thanks for your help :) –  Sep 03 '14 at 12:07

3 Answers3

0

As your Ajax code knows all about the inputs (same page), why not just do this:

  success: function(msg)
  {
      $("#risultati").html(msg);
      $("#zio").focus();
  },

Your current version has a child page has knowledge of the parent page (bad separation).

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
0

You do not need to display the html code in go.php after you finish processing the POST data

Try this

$(document).ready(function() {
  $("#verifica").click(function(){
  $("#risultati").html("Please wait...");
    $.ajax({
      type: "POST",
      url: "go.php",
      data: $("#ciao").serialize(),
      //dataType: "html",
      success: function(msg)
      {
        $("#risultati").html(msg);
        $("#zio").focus();
      },
      error: function()
      {
          $("#risultati").html("An error occurred.");
      }
    });
  });
});
kefy
  • 535
  • 2
  • 10
-1

ADDITIONAL SOLUTION Had same issue where focus() didn't seem to work no matter what I tried.

Eventually turned out that what was needed was scrolling to the correct position:

Community
  • 1
  • 1
Martin
  • 1,385
  • 15
  • 21