Topic: Adding Jquery effects to xajax

Hello all, I'm new here and was wondering how would I add jquery effects to xajax. I wanted to uses this ajax because the jquery one was giving me problems.

Re: Adding Jquery effects to xajax

Hi,

Most jq effects are done in the ready function at page load time.

To invoke an effect from your xajax function use the response object's script function.

$respose->script("jQuery('#element').whatevereffect(...)");

You can also write a js function and call it from your xajax using the response's call function.

Look here http://xajax-project.org/en/docs-tutorials

Hope this helps. smile

Ed

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: Adding Jquery effects to xajax

Thanks alot!

Re: Adding Jquery effects to xajax

Hi i tried to follow your instructions, but at the end don't work. Im really want use the Jquery effects in my projects.  But the only trick i found to activate inside of a xajax function is use the onclick event :

onclick="javascript:$(\'input:checkbox:not([safari])\').checkbox();"    //Succesful example

this is my document ready function
    <script type="text/javascript">
            $(document).ready(function() {
                $('input:checkbox:not([safari])').checkbox();
                $('input[safari]:checkbox').checkbox({cls:'jquery-safari-checkbox'});
                $('input:radio').checkbox();
            });

DONT WORK:
$respuesta->addScript("JQuery(\'input:checkbox\').checkbox()"); 
$respuesta->addScriptCall("javascript:$(\'input:checkbox:not([safari])\').checkbox();");
$script="$('input:checkbox:not([safari])').checkbox();";

IM USING AJAX 2.5 (is this the possible cause?)

please help me.

Re: Adding Jquery effects to xajax

Here's a snippet from one of my pages. It works fine.

This particular app is using xajax 0.6 beta 1 with no issues.

Just for esthetics I would recomment at least going to 0.5.


<?php>
.
.
.
function DisplayHeaderList($dta){
.
.
.   
  $resp->assign('fielddiv','innerHTML',$s);  //Populate the fields div with the table
  $resp->script("jQuery('#tabdiv').tabs({selected: 2})"); //Instruct jQuery to select the proper tab.
  return $resp;
}
.
.
.
?>
<!DOCTYPE HTML>
<html>
<head>
<link id="jqs" rel="stylesheet" type="text/css" href="../javascript/JQueryUI/themes/redmond/jquery.ui.all.css"/>
<script type="text/javascript" src="../javascript/JQueryUI/js/jquery-1.5.1.min.js?V=1"></script>
<script type="text/javascript" src="../javascript/JQueryUI/js/jquery-ui-1.8.11.custom.min.js?V=1"></script>
<script type="text/javascript" src="../javascript/jquery.textareaexpander.js"></script>
<?php $xajax->printJavascript();?>
<title>MySql Table from CSV File</title>
<!DOCTYPE HTML>
<html>
<head>
<link id="jqs" rel="stylesheet" type="text/css" href="../javascript/JQueryUI/themes/redmond/jquery.ui.all.css"/>
<script type="text/javascript" src="../javascript/JQueryUI/js/jquery-1.5.1.min.js?V=1"></script>
<script type="text/javascript" src="../javascript/JQueryUI/js/jquery-ui-1.8.11.custom.min.js?V=1"></script>
<script type="text/javascript" src="../javascript/jquery.textareaexpander.js"></script>
<?php $xajax->printJavascript();?>
<title>MySql Table from CSV File</title>
<script>
  //jQuery Load time initialization
  jQuery(document).ready(function()
    {
    jQuery("#tabdiv").tabs({selected: 0});  //Setup the tabs
    jQuery("input:button").button();        //Setup the buttons
    jQuery("#radios").buttonset();          //Setup the radio buttons 
    jQuery("#checks").buttonset();          //Setup the checkboxes
    jQuery("textarea").inputexpander();     //Autoexpand the textarea tags   
  });

  //Request the field list 
  function SendDefRequest(){
    xajax_DisplayHeaderList(xajax.getFormValues('form1'));
  }
  //Save the file name from the file control
  function GetFname(){
    jQuery("#thefile").val(jQuery("#filename").val());
  }
</script>
</head>
<body>
.
.
.
<div id="defs" style="padding: 15px;">
<div id="checks">
<input type="checkbox" id="adddrop" name="adddrop" value="adddrop" checked/> <label for="adddrop">Add drop statement?</label>
<input type="checkbox" id="addid" name="addid" value="addid" checked/><label for="addid">Add Autoinc. Key?</label><br/><br/>
</div>
<input id="newtablename" name="newtablename" /><label>New Table Name</label><br/><br/>
<input type='button' value='Generate SQL' onclick='xajax_generateSQL(xajax.getFormValues("form1"))'/>

<div id="fielddiv"></div>
</div> <!-- defs -->
.
.
.

Note: I have experienced problems using JQ's $ operator on xajax pages so I always use jQuery... Seems more meaningful.

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: Adding Jquery effects to xajax

thanks edrobinson,

Works like a charm... at the end one of my issues was i don't put in the correct position the  $object->script.  I supposed i have to run before the assign of the html elements, not after, like you show me in your funtion DisplayHeaderList.

In fact, i don't need the documen.ready function code.  The Jquery effect loads directly to the .js file

after read your answer begin to test a couple of Jquery effects that  i was research in the past without results.  But now i wrote a new page in my knowledge book... jeje

Thanks,

Carlos.
NOTE: "works sweet with de ajax 2.5 "

final example:
   $respuesta->addAssign("consulta","innerHTML",$telam);  // populate divs with the table, forms, etc
   $respuesta->addScript("jQuery('input:checkbox:not([safari])').checkbox();");  //jquery effects
   $respuesta->addScript("jQuery('input:radio').checkbox();");  //jquery effects