Solved

form post to same page

Posted on 2011-09-15
44
579 Views
Last Modified: 2012-05-12
Hi i am using jquery but issue is i am unable to load the partial page on submit on button like this!

i have the following form

<form name="loginform" id="loginform">
<input type="text" name="isname" id="isname">
<select name="hi" id="hi">
<option value=1">Yes</option>
<option value=1">No</option>
</select>
<input type="submit" name="button" id="button" value="Submit">
</form>


Now my concern is when i fill the data and click the Submit button, i have the following

<table align="center" id="loaddata">

</table>
declared just under the form and i want the submission should load data in the follwoing table which has id "loaddata" and page should not refresh

Please guide, also if i can add some validation to jquery form that will be great!

Thanks
0
Comment
Question by:myselfrandhawa
  • 22
  • 16
  • 2
  • +2
44 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
$("#button").click(function(e) {
    e.preventDefault();
    $.get("/path/to/mypage.cfc", $("#loginform").serializeArray(), function(rows) { $("#loaddata").html( rows ); } );
})

mypage.cfc receive read respective values of the parameters : isname, hi
and return the rows for :

<tr><td>lmlklk</td></tr><tr><td>lllklklkk</td></tr>
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
but suppose, my cfc accepts two paramerts and return a full blown 20 rows with 15 columns, ihave to write the logic in the cfc itself for the td/tr or in the cfm page
Please guide
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Cfm is complete, you don't need more.
Cfc return the right content from the provided parameters
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
ok this is working in Mozilla, not in IE 7, i tested many times
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
please provide a link to your basic not working page
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
oops! cannot because its an intranet application, i tried same code in IE 7

it fails
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
if posible, guide me another approach, it does not wor in IE, should i use Request Attention
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
>if posible, guide me another approach, it does not wor in IE
Not sure it's a good way to handle your problem.
the code provided is simple that's why I asked you to provide an URL to see your page on IE7 and found where the error is

>should i use Request Attention
you're boss of your question, not me.
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
:) Thanks, but if you try another technique that might work, I am unable to share link becoz intranet application!

So if you try another approch, it may work. Let's try
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
>Thanks, but if you try another technique that might work,
perhaps not (please not that 99% percent of time I'm positive :)

>I am unable to share link becoz intranet application!
Yes and I understand but again the code is basic, you may have additional coding causing the issue on IE7, I don't want to seach an other solution (just for fun? nahhh :)
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
well, if you do follow another way, i think i will learn one more way to to!, probaby you have take less time than me to get that thing working! It can save my development time! So my request let's try some another technique
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
>It can save my development time!

you may loose some time too. if you've a problem with a navivator version I think the best is to handle the problem for this navigator... or just create a parallel question...
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
well i do have this question open also because i do not think @ this point and i am doing the cfwindow and cfgrid wrong way!
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
ok here is the issue i am getting!

"#loaddata".html is not a function
[Break On This Error] ("#loaddata").html(rows);

using just as you guided above, now even coming in FF
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
and what about : jQuery("#loaddata").html(rows);
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
Still it is not working Same Error in IE and FF
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
you confirm :

 $.get("/path/to/mypage.cfc", $("#loginform").serializeArray(), function(rows) { jQuery("#loaddata").html( rows ); } );
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
yes this is what ia m doing, it throwing erros in both
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
> in both

?
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
yup!
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 82

Expert Comment

by:leakim971
Comment Utility
so no error on the $get
but an error on the $.html

try to plublish your app for a given time over internet I want to see that
else just hot the request attention
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
check this!

http://randhawaworld.com/Test/index.cfm

in IE 7,8,9

Ok
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
not working as expected as u are saying
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
add html, head, body tag and you're done
the right place for script tags is inside the head section
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="javascript" src="validate.js"></script>
</head>
<body>
<table width="100%">
<tr><td>
	<form name="analysisview" id="analysisview">
	<table align="center" width="100%" cellspacing="1" cellpadding="2">
		<tr>
			<td width="10%" align="left">ID:</td>
			<td width="80%" align="left"><textarea name="projectList" id="projectList"></textarea><br>
			<label for="projectList" class="error" id="projects_error">Please add some Projects.</label>
			</td>
			<td width="10%" align="right">&nbsp;</td>
		</tr>
		<tr>
			<td width="10%" align="left">View:</td>
			<td colspan="2">
				<select name="optionsReasons" id="optionsReasons" class="select-input">
					<option value="0">Select one</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
				</select>
				<label class="error" for="optionsReasons" id="optionsReasons_error">Please select a valid reason.</label>
			</td>
		</tr>
		<tr>
			<td colspan="3"><input type="submit" id="analyze" name="analyze" value="Analyze"></td>
		</tr>		
	</table>
	</form>
</td></tr>
</table>
<table align="left" width="100%" border="0" cellspacing="1" cellpadding="2" id="loaddata">
</table>
</body>
</html>

Open in new window

0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
Still in IE 9, i tested on my stsem, it does not show up, it works on Mozilla anyhow but on IE
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
please copy/paste ID:36554104
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
i tried Copy pasting and same issue, you can check on the link url i gave above, its all there
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
work fine on IE9 too
clear your browser cache
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
Sorry But i think i have to click to Request Button, I do not what browser you have but with ur technique its not working!

Thanks
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
#ID:36553736
you confirm to have an error on jQuery.html but not on $.get : look for me very strange because $.get run first

For an unknown reason, you miss to add html, head and body tag in your page before ID:36554101
For an unknown reason, you miss to add a DOCTYPE in your page before ID:36554724

I tested your page on IE9, IE8, IE7, chrome, safari, opera, firefox 4 and it work fine

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="javascript" src="validate.js"></script>
</head>
<body>
<table width="100%">
<tr><td>
        <form name="analysisview" id="analysisview">
        <table align="center" width="100%" cellspacing="1" cellpadding="2">
                <tr>
                        <td width="10%" align="left">ID:</td>
                        <td width="80%" align="left"><textarea name="projectList" id="projectList"></textarea><br>
                        <label for="projectList" class="error" id="projects_error">Please add some Projects.</label>
                        </td>
                        <td width="10%" align="right">&nbsp;</td>
                </tr>
                <tr>
                        <td width="10%" align="left">View:</td>
                        <td colspan="2">
                                <select name="optionsReasons" id="optionsReasons" class="select-input">
                                        <option value="0">Select one</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                </select>
                                <label class="error" for="optionsReasons" id="optionsReasons_error">Please select a valid reason.</label>
                        </td>
                </tr>
                <tr>
                        <td colspan="3"><input type="submit" id="analyze" name="analyze" value="Analyze"></td>
                </tr>           
        </table>
        </form>
</td></tr>
</table>
<table align="left" width="100%" border="0" cellspacing="1" cellpadding="2" id="loaddata">
</table>
</body>
</html>

Open in new window


javascript : http://randhawaworld.com/Test/validate.js

$(function() {
  $('.error').hide();
  $('select.select-input').focus(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });
  $('select.select-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $("#analyze").click(function(e) {
	  e.preventDefault();
	  $('.error').hide();
	  var reason = $("select#optionsReasons").val();
	  if($('#projectsList').is(':empty')) {
		  $("label#projects_error").show().delay(2000).queue(function(n) {
	    	  $(this).hide(); n();
	      });
		  $("a#addprojects").focus();
	    	return false;
	  }
	  else if (reason == 0) {
      $("label#optionsReasons_error").show().delay(2000).queue(function(n) {
    	  $(this).hide(); n();
      });
	      $("select#optionsReasons").focus();
	      	return false;
	  }
	  //Show the Data inside the table
	  $.get("Process.cfm", $("#analysisview").serializeArray(), function(rows) { jQuery("#loaddata").html( rows ); } );
  });
});

Open in new window

0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
why you copy/pasted my validate.js file, its not needed here and ID did add everything, DOC type is not a necessaity, i often have pages where i do not use doctypes. but they still work!

:(

Do not what is wrong, May be any other expert can guide
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
I got a neglected question alert on this one.  I think leakim971 has given you good advice, but maybe you are not following it completely?

You wrote, DOC type is not a necessaity,

Wrong.  DOCTYPE is a necessity (jQuery is not).  I use the HTML5 DOCTYPE declaration.  Maybe you should, too.

Be sure that your HTML passes W3C validation, or you can expect errors and browser incompatibilities.  Validation will not guarantee success, but failed validation will almost certainly guarantee failure.

Good luck with your project, ~Ray
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
... etc

Open in new window

0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
just go to my link aud view the view source
u will see the source code and doc type in ie any bropwser

u will the issue!

Just tell why will i lie or make assumptions, i also want that my problem should be resolved, if i asked for alternative he just said, click request link. is this how we do the think!

This is just coming up as a "Conflict of Interest"

No Resolution but just a debate is going on. Should i close this question, if i making nuts here

I do not understand what is the issue lying here
0
 
LVL 10

Expert Comment

by:ray-solomon
Comment Utility
I see what the OP is saying.
If you use IE9 in compatibility mode then the page will not work.
Same problem might happen on IE7 and probably IE8 too.

I'm sure its a simple JS issue that can be fixed.
I'm too tired at the moment. Maybe someone else can take a second look.
0
 
LVL 24

Expert Comment

by:dgrafx
Comment Utility
i came here from a neglected question alert
1) some jquery functionality will not work without the proper doctype - that is a fact - note that i said some - not all
2) ray-solomon is correct in saying that the test link that was posted does not function IF in compatibility view - it does however work when you remove compatibility view

a fix?
no i don't have a fix, but this is a step in the right direction ...
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
This is getting too much now, So i should remove the question!

Thanks all

This is no way someone is understanding, I am just trying my point here and that is GO AND VIEW THE LINK & view the SOURCE CODE, you will be see all declared types! even Doc type!

I will close it

That's all i have say!

Thanks all

This is no way going to finish. The debate keeps going on, I am going to Close this question
0
 
LVL 24

Expert Comment

by:dgrafx
Comment Utility
actually - everyone here understands ...

it may be that you don't understand the points being made.

YES - we understand that you have doctype specified now - those comments were extra information - it's unfortunate that they confused the issue for you.

And I believe we all went to see your link and we found that it works fine in ie - You don't seem to understand that.

Also, you need to understand that it doesnt work in compatibility view - that must be what your ie is set on.
Read that last line again.

but go ahead and delete the question - it doesnt seem like you can understand all this - you think we are wasting time "debating"

good luck
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
things does not work [why use] compatibility mode, do i tell my client to use compatibility mode whenever he uses this page

Anyways

Question is going to be deleted, i am expecting no one should object
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
okay! let me add here, i just used serialize rather serializearray and it worked like a charm..

This was all what i was expecting the @expert should do a bit of search, but anyways, i did it and thanks @leakin, Suppoting other Experts

regards
0
 
LVL 15

Author Closing Comment

by:myselfrandhawa
Comment Utility
use serialize rather than serializearray
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now