AJAX/Jquery Internet Explorer error

[calina]

Hi guys

I was wondering whether someone could help me with a slight issue I have. I'm trying to set up a quick poll using AJAX which all works fine when using Firefox but running into issues via IE.

$(function() {
    $('.error').hide();
    $(".button").click(function() {
      var userid = $("input#userid").val();
      var name = $('input[name=name]:checked').val();

      var dataString = 'name='+ name + '&userid=' + userid;

  $.ajax({
    type: "POST",
    url: "poll/process.php",
    data: dataString,
    success: function() {
      $('#weekly_poll').html("<div id='message'></div>");
      $('#message').html("<h2>Thanks for your vote!</h2>")
      .hide()
      .fadeIn(500, function() {
        $('#message');
      });
    }
  });
  return false;
    });
  });

The issue I'm having is that although the form is being processed OK with data being captured in the database, once the form is submitted, the above script just seems to stop the rest of the page from loading. This only happens on IE and it must be something to do with the success function but as I'm new to JavaScript I don't know what I'm doing wrong.

Can anyway help me please? I think it's something really simple and I'm just being stupid.

Many thanks for reading.

[pritaeas]

I don't know why your specified a callback for the fadeIn, it doesn't appear to do anything. If you change success to the following, what happens ?

success: function() {
  $('#weekly_poll').html("<div id='message'></div>");
  $('#message').html("<h2>Thanks for your vote!</h2>").hide().fadeIn(500);
}

[calina]

Thanks for replying :)

Unfortunately still get the same problem :( Once the form is submitted, all code beneath the form disappears on IE.

[pritaeas]

It's hard for me to test, without having the complete code (html and php), I can only guess at this point, because the code looks okay.

[calina]

OK. Here's all the code for you:

HTML

<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="poll.js"></script>

.
.
.
.
.
.
.
.

<div style="background-image: url(../images/poll_background_mid.gif); background-repeat: repeat-y; width: 510px;">

  <div id="weekly_poll" style="padding: 5 0 0 20;">
    <form name="poll" action="">

    <label for="name" id="name_label">Question 1? </font>
    <input type="hidden" name="userid" id="userid" value="<?echo $userid;?>"/>
    <div style="margin: 5 0 0 0;">
      <input type="radio" name="name" id="name" value="Yes" /> Yes
    </div>
    <div style="margin: 0 0 5 0;">
      <input type="radio" name="name" id="name" value="No" /> No
    </div>

    <input type="submit" name="submit" class="button" id="submit_btn" value="Vote" />
    </form>
  </div>
  
</div>

PHP - poll/process.php

include("../include/session.php");

$userid = $_POST["userid"];
$answer1 = $_POST["name"];

$querypoll = ( "INSERT INTO poll (UserID, Poll, Answer1) VALUES ('$userid','Question here','$answer1')");
	
$resultpoll = mysql_query($querypoll);

JS

$(function() {
    $('.error').hide();
    $(".button").click(function() {
      var userid = $("input#userid").val();
      var name = $('input[name=name]:checked').val();

      var dataString = 'name='+ name + '&userid=' + userid;

  $.ajax({
    type: "POST",
    url: "poll/process.php",
    data: dataString,
    success: function() {
      $('#weekly_poll').html("<div id='message'></div>");
      $('#message').html("<h2>Thanks for your vote!</h2>").hide().fadeIn(500);
    }
  });
  return false;
    });
  });

Is that everything you need? Many thanks for taking the time to help.

[pritaeas]

I uploaded this to my server (saved it as index.php). Appears to be working in IE7 and IE8. Can you confirm ?

<div style="background-image: url(../images/poll_background_mid.gif); background-repeat: repeat-y; width: 510px;">
 
  <div id="weekly_poll" style="padding: 5 0 0 20;">
    <form name="poll" action="">
 
	    <label for="name" id="name_label">Question 1? </font>

	    <input type="hidden" name="userid" id="userid" value="<?php echo $userid; ?>"/>

	    <div style="margin: 5 0 0 0;">
	      <input type="radio" name="name" id="name" value="Yes" /> Yes
	    </div>

	    <div style="margin: 0 0 5 0;">
	      <input type="radio" name="name" id="name" value="No" /> No
	    </div>
	 
	    <input type="submit" name="submit" class="button" id="submit_btn" value="Vote" />
    </form>
  </div>
 
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
  $(function() {
    $('.error').hide();
    $(".button").click(function() {
      var userid = $("input#userid").val();
      var name = $('input[name=name]:checked').val();
 
      var dataString = 'name='+ name + '&userid=' + userid;
alert(dataString);
 
  $.ajax({
    type: "POST",
    url: "process.php",
    data: dataString,
    success: function() {
      $('#weekly_poll').html("<div id='message'></div>");
      $('#message').html("<h2>Thanks for your vote!</h2>").hide().fadeIn(500);
    }
  });
  return false;
    });
  });
</script>

[calina]

I was testing it out on IE6 which is where the error still occurs :(

[pritaeas]

I only have IETester, which shows my code snippet is working in IE6 (http://www.pritaeas.net/public/daniweb/poll/).

Could it be another part of the code ?

[calina]

I think I may have confused you a little :s

That has never been the issue... the form submits the data to be processed and the thank you message has always shown up. The problem is that the form is at the top of the page with html code below it. When the form gets submitted in IE (version 6 is the one I've tested on) everything below the thank you message disappears. Does that make it clearer for you?

Once again.. thanks for trying to help.

[pritaeas]

I see, opera has the same problem, although I cannot explain it at this moment. I'll keep looking.

[pritaeas]

Damn... missed it completely. Your <label> tag isn't correctly closed. It is closed with </font> . Replaced it with </label> and now it works in Opera and IETester.

[calina]

OMG... I'm so embarassed! Such a basic error. I feel really stupid as I've been looking at that same piece of code for two days now and I never saw the error :(

Thank you for all the help... can't thank you enough! All working now and the poll is now live on the website :)

[calina]

Sorry to be a pain but if after the user has submitted the vote I wanted to show them the poll result, what would I need to add to the success function to display the information?

[pritaeas]

I think you need to add another ajax call to a php page that will return the result in html, so you can add it to a div.

[calina]

Many thanks pritaeas. Will give it a go.

I only started using jQuery/AJAX this week and have never really looked into JavaScript before other than very basic onclick events but slowly getting there.

[Practicality]

Hey thanks! This solved my issue as well.