Link to home
Start Free TrialLog in
Avatar of Coast Line
Coast LineFlag for Canada

asked on

form post to same page

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
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Coast Line

ASKER

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
Cfm is complete, you don't need more.
Cfc return the right content from the provided parameters
ok this is working in Mozilla, not in IE 7, i tested many times
please provide a link to your basic not working page
oops! cannot because its an intranet application, i tried same code in IE 7

it fails
if posible, guide me another approach, it does not wor in IE, should i use Request Attention
>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.
:) 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
>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 :)
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
>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...
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!
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
and what about : jQuery("#loaddata").html(rows);
Still it is not working Same Error in IE and FF
you confirm :

 $.get("/path/to/mypage.cfc", $("#loginform").serializeArray(), function(rows) { jQuery("#loaddata").html( rows ); } );
yes this is what ia m doing, it throwing erros in both
> in both

?
yup!
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
check this!

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

in IE 7,8,9

Ok
not working as expected as u are saying
add html, head, body tag and you're done
the right place for script tags is inside the head section
<!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

Still in IE 9, i tested on my stsem, it does not show up, it works on Mozilla anyhow but on IE
please copy/paste ID:36554104
i tried Copy pasting and same issue, you can check on the link url i gave above, its all there
work fine on IE9 too
clear your browser cache
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
#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

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

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
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.
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 ...
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
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
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
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
use serialize rather than serializearray