PDA

View Full Version : Ajax Post conflict with Ajax Pagination



s0110282
09-16-2011, 02:28 PM
1) Script Title: Ajax Pagination

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxpaginate/

3) Describe problem:
I'm a noobie so I hope I explain this well...

I've implemented Ajax Pagination and it works correctly as expected (awesome script!). But I'm having problems trying to use it in conjunction with an ajax post (I may not be using correct terminology here) within the Ajax Pagination. The Ajax post page also works correctly separately, it's just when it is used in conjunction with the Ajax post. The problem is instead of dynamically posting and retrieiving information, the Ajax post is submitting the values as if it was just a regular submit button.

I've read so many threads in the forum that seem to be related (ie. conflicts with JQuery), but when I tried to implement what is being suggested it still does not work for me.

Here's an example of the Ajax Post I'm doing (http://www.scottritchie.com/inc_test.cfm). It's very basic. It takes the value from the drop down, passes it to another page (include.cfm) and passes the value back.

Ajax Post Code (inc_test.cfm):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("#Form").submit(sendForm)
});

function sendForm() {
$j.post('include.cfm',$j("#Form").serialize(),function(data,status){
$j("#result").html(data)
});
return false
}

</script>

<form id="Form">
<select name="versionname2">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
</select>
<div id="result"><input type="submit" name="butt" value="Submit"/></div>
</form>

Here's the include page just for reference (include.cfm). I'm using ColdFusion, but that should be irrelevant here.


<cfparam name="versionname" default="">
<cfparam name="versionname2" default="">

<cfif versionname2 EQ "Option1">
<font color="red">
<input type="submit" value="Submit">
<br>
<cfoutput>
<br><br>
You selected this value: #versionname2#
</cfoutput>
</font>
<cfelse>
<font color="red">
<input type="submit" value="Submit">
<br>
<cfoutput>
<br><br>
You selected this other value: #versionname2#
</cfoutput>
</font>
</cfif>

Here's the Ajax Pagination script that takes the inc_test.cfm, but it submits the values through the "default" way and not dynamically.
(Example: http://www.scottritchie.com/test.cfm)
Ajax Pagination code (test.cfm):

<link rel="stylesheet" type="text/css" href="ajaxpagination.css" />

<script src="ajaxpagination.js" type="text/javascript">

/***********************************************
* Ajax Pagination script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

Test Page 1

<div id="paginate-top"></div>
<div id="bookcontent"> </div>
<div id="paginate-bottom"></div>

<script type="text/javascript">
var bookonflowers={
pages: [
"inc_test.cfm?StartAt=0","inc_test.cfm?StartAt=1"
],
selectedpage: 0 //set page shown by default (0=1st page)
}

var mybookinstance=new ajaxpageclass.createBook(bookonflowers, "bookcontent", ["paginate-top", "paginate-bottom"])
</script>
Any help would be appreciated!!! Thanks!!!

-Scott