AJAX

AJAX/Jquery Internet Explorer error

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2009

Posts: 8

Reputation: calina is an unknown quantity at this point

Solved Threads: 0

calina

Offline

Newbie Poster

AJAX/Jquery Internet Explorer error

24 Days Ago

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.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  $(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;
    });
  });
  $(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.

•

Join Date: Jul 2006

Posts: 849

Reputation: pritaeas will become famous soon enough

Solved Threads: 138

pritaeas

Offline

Practically a Posting Shark

24 Days Ago

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 ?

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
success: function() {
  $('#weekly_poll').html("<div id='message'></div>");
  $('#message').html("<h2>Thanks for your vote!</h2>").hide().fadeIn(500);
}
success: function() {
  $('#weekly_poll').html("<div id='message'></div>");
  $('#message').html("<h2>Thanks for your vote!</h2>").hide().fadeIn(500);
}

"If it is NOT source, it is NOT software."
-- NASA

•

Join Date: Nov 2009

Posts: 8

Reputation: calina is an unknown quantity at this point

Solved Threads: 0

calina

Offline

Newbie Poster

24 Days Ago

Thanks for replying

Unfortunately still get the same problem

Once the form is submitted, all code beneath the form disappears on IE.

•

Join Date: Jul 2006

Posts: 849

Reputation: pritaeas will become famous soon enough

Solved Threads: 138

pritaeas

Offline

Practically a Posting Shark

24 Days Ago

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.

"If it is NOT source, it is NOT software."
-- NASA

•

Join Date: Nov 2009

Posts: 8

Reputation: calina is an unknown quantity at this point

Solved Threads: 0

calina

Offline

Newbie Poster

24 Days Ago

OK. Here's all the code for you:

HTML

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
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);
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);

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  $(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;
    });
  });
  $(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.

Last edited by calina; 24 Days Ago at 9:36 am.

•

Join Date: Jul 2006

Posts: 849

Reputation: pritaeas will become famous soon enough

Solved Threads: 138

pritaeas

Offline

Practically a Posting Shark

24 Days Ago

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

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<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>
<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>

Last edited by pritaeas; 24 Days Ago at 9:43 am.

"If it is NOT source, it is NOT software."
-- NASA

•

Join Date: Nov 2009

Posts: 8

Reputation: calina is an unknown quantity at this point

Solved Threads: 0

calina

Offline

Newbie Poster

24 Days Ago

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

•

Join Date: Jul 2006

Posts: 849

Reputation: pritaeas will become famous soon enough

Solved Threads: 138

pritaeas

Offline

Practically a Posting Shark

24 Days Ago

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 ?

"If it is NOT source, it is NOT software."
-- NASA

•

Join Date: Nov 2009

Posts: 8

Reputation: calina is an unknown quantity at this point

Solved Threads: 0

calina

Offline

Newbie Poster

24 Days Ago

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.

Last edited by calina; 24 Days Ago at 10:41 am.