0

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.

3
Contributors
15
Replies
16
Views
7 Years
Discussion Span
Last Post by Practicality
Featured Replies
  • 1

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

0

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);
}
0

Thanks for replying :)

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

0

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.

0

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.

Edited by calina: n/a

0

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>

Edited by pritaeas: n/a

0

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

0

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.

Edited by calina: n/a

1

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.

Votes + Comments
Thank you for taking the time out to help me with my issue :)
0

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 :)

0

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?

0

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.