Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 4890

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Nov 11th, 2009

AJAX/Jquery Internet Explorer error

Expand Post »

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.

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.

Similar Threads

internet explorer error messages in Web Browsers
Internet Explorer Error in Web Browsers
Internet Explorer Error in Viruses, Spyware and other Nasties
Internet Explorer Error Signature in Viruses, Spyware and other Nasties
Internet Explorer 6 Error Box in Web Browsers

calina

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Nov 2009

Permalink

Nov 11th, 2009

Re: AJAX/Jquery Internet Explorer error

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 ?

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

pritaeas

Sponsor

Featured Poster

Reputation Points: 557

Solved Threads: 735

Bite my shiny metal ass!

Offline

4,204 posts
since Jul 2006

Permalink

Nov 11th, 2009

Re: AJAX/Jquery Internet Explorer error

Thanks for replying

Unfortunately still get the same problem

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

calina

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Nov 2009

Permalink

Nov 11th, 2009

Re: AJAX/Jquery Internet Explorer error

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.

pritaeas

Sponsor

Featured Poster

Reputation Points: 557

Solved Threads: 735

Bite my shiny metal ass!

Offline

4,204 posts
since Jul 2006

Permalink

Nov 11th, 2009

Re: AJAX/Jquery Internet Explorer error

OK. Here's all the code for you:

HTML

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

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

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; Nov 11th, 2009 at 9:36 am.

calina

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Nov 2009

Permalink

Nov 11th, 2009

Re: AJAX/Jquery Internet Explorer error

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

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; Nov 11th, 2009 at 9:43 am.

pritaeas

Sponsor

Featured Poster

Reputation Points: 557

Solved Threads: 735

Bite my shiny metal ass!

Offline

4,204 posts
since Jul 2006

Permalink

Nov 11th, 2009

Re: AJAX/Jquery Internet Explorer error

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

calina

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Nov 2009

Permalink

Nov 11th, 2009

Re: AJAX/Jquery Internet Explorer error

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 ?

pritaeas

Sponsor

Featured Poster

Reputation Points: 557

Solved Threads: 735

Bite my shiny metal ass!

Offline

4,204 posts
since Jul 2006

Permalink

Nov 11th, 2009

Re: AJAX/Jquery Internet Explorer error

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; Nov 11th, 2009 at 10:41 am.

calina

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Nov 2009

Permalink

Nov 11th, 2009

Re: AJAX/Jquery Internet Explorer error

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

pritaeas

Sponsor

Featured Poster

Reputation Points: 557

Solved Threads: 735

Bite my shiny metal ass!

Offline

4,204 posts
since Jul 2006

Page 1
2
Next

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: problem in linking pages in wordpress!!

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Context-free Feedback Form

DaniWeb Message

Cancel Changes

User Name
Password