Topic: Inlcuding JavaScript in xajax

I have a problem with including library Proto.Menu (http://yura.thinkweb2.com/scripting/contextMenu/).
It's a simple prototype-based script for context menu.

When I inlude .js files in <head></head> tag it works pretty well:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
            <link rel="stylesheet" href="protomenu/proto.menu.0.6.css" type="text/css" media="screen" />
            <script type="text/javascript" src="protomenu/prototype.js"></script>
            <script type="text/javascript" src="protomenu/effects.js"></script>
            <script type="text/javascript" src="protomenu/proto.menu.0.6.js"></script>
            <script type="text/javascript" src="protomenu/config.js"></script>          
    </head>
    <body> 
         <div id="menu">Click the right button on this text</id>
      </body>
</html>

But when I include the same .js files in xajax (function includeScript):

<?php
require_once ("../../xajax_core/xajax.inc.php");
$xajax = new xajax();

function load_protomenu()
{
      $objResponse = new xajaxResponse();
    
      $sFileName = "protomenu/proto.menu.0.6.css";
      $objResponse->includeCSS($sFileName);
    
      $sType = "text/javascript";
    
      $sFileName = "protomenu/prototype.js";
      $objResponse->includeScript($sFileName, $sType);
    
      $sFileName = "protomenu/effects.js";
      $objResponse->includeScript($sFileName, $sType);

      $sFileName = "protomenu/proto.menu.0.6.js";
      $objResponse->includeScript($sFileName, $sType);

      $sFileName = "protomenu/config.js";         
      $objResponse->includeScript($sFileName, $sType);

      $sScript = "alert('Its done');";
      $objResponse->script($sScript);

      return $objResponse;
}

$xajax->configure('debug', true);
$xajax->register(XAJAX_FUNCTION,'load_protomenu');
$xajax->processRequest();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <?php $xajax->printJavascript('xajax/'); ?>
    </head> 
    <body onload="xajax_load_protomenu();return false;">
         <div id="menu">Click the right button on this text</id>
      </body>
</html> 

It doesn't work. I don't understand why. Anyone have a idea?

Complete example (whith xajax and proto.menu library) you can download from url:
http://www.plikus.pl/zobacz_plik-protomenu-214816.html

Re: Inlcuding JavaScript in xajax

You in vain asked it, here to you won't help.
Itself I suffer with includeCSS (); and includeScript ();
Probably they at all don't work, why this xajax then is necessary?

Re: Inlcuding JavaScript in xajax

Skillful,

I don't know if this was ever resolved.The following code works just fine:

<?php
include_once("xajax/xajax_core/xajax.inc.php");
$xajax = new xajax();
$xajax->configure('javascript URI', 'xajax/');

function load_protomenu()
{
      $objResponse = new xajaxResponse();
    
      $sFileName = "protomenu/lib/proto.menu.css";
      $objResponse->includeCSS($sFileName);
    
      $sType = "text/javascript";
    
      $sFileName = "protomenu/lib/prototype.js";
      $objResponse->includeScript($sFileName, $sType);
    
      $sFileName = "protomenu/lib/effects.js";
      $objResponse->includeScript($sFileName, $sType);

      $sFileName = "protomenu/lib/proto.menu.js";
      $objResponse->includeScript($sFileName, $sType);

      //$sFileName = "protomenu/lib/config.js";         
      //$objResponse->includeScript($sFileName, $sType);

      $sScript = "alert('Its done');";
      $objResponse->script($sScript);

      return $objResponse;
}

//$xajax->configure('debug', true);
$xajax->register(XAJAX_FUNCTION,'load_protomenu');
$xajax->processRequest();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <?php $xajax->printJavascript('xajax/'); ?>
        <script>
 var myMenuItems = [
          {
            name: 'Edit',
            className: 'edit', 
            callback: function() {
              alert('Forward function called');
            }
          },{
            name: 'Copy',
            className: 'copy', 
            callback: function() {
              alert('Copy function called');
            }
          },{
            name: 'Delete', 
            disabled: true,
            className: 'delete'
          },{
            separator: true
          },{
            name: 'Save',
            className: 'save',
            callback: function() {
              alert('Saving...');
            }
          }
        ];  
new Proto.Menu({
  selector: '#contextArea', // context menu will be shown when element with id of "contextArea" is clicked
  className: 'menu desktop', // this is a class which will be attached to menu container (used for css styling)
  menuItems: myMenuItems // array of menu items             
        </script>
    </head> 
    <body onload="xajax_load_protomenu();return false;">
         <div id="menu">Click the right button on this text</id>
      </body>
</html> 

All of the scripts and css files are loaded into the browser - visible using Firebug.

The issue I encounter is that the script creating the object and configuring it is called before the scripts load in the onload event. Timing is everything...

Not sure why the original poster wanted to load these from an xajax function either.

Ed

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

Re: Inlcuding JavaScript in xajax

can and to me will help?

Re: Inlcuding JavaScript in xajax

Skillful,

If I understand you, you would like some help. If so, post the code that is giving you trouble...

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

Re: Inlcuding JavaScript in xajax

files can be taken here http://yensdesign.com/tutorials/popupjquery/

<?php

define('ROOT', 'http://localhost/T_E_S_T/popupjquery/');



require_once("ajax/xajax_core/xajax.inc.php");


function includeScript()
{
    $objResponse = new xajaxResponse();

    $objResponse->includeCSS(ROOT.'general.css', 'screen');
    
    $sType = "text/javascript";

    $objResponse->includeScript(ROOT.'jquery-1.2.6.min.js', $sType);
    $objResponse->includeScript(ROOT.'popup.js', $sType);

    return $objResponse;
}

function click()
{
    $objResponse = new xajaxResponse();

    $objResponse->Assign("click", "innerHTML", '
    <div id="button">click</div>
    <div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1>Title of our cool popup, yay!</h1>
        <p id="contactArea">
            Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
            <br/><br/>
            We can use it for popup-forms and more... just experiment!
            <br/><br/>
            Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
            <br/><br/>
            <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
        </p>
    </div>
    <div id="backgroundPopup"></div>');

    return $objResponse;
}


$xajax = new xajax();
$xajax->configure("debug", true);
$xajax->register(XAJAX_FUNCTION, "includeScript");
$xajax->register(XAJAX_FUNCTION, "click");
$xajax->processRequest();
$xajax->configure('javascript URI','./ajax');



?>

<!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" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
  <?php $xajax->printJavascript('./ajax'); ?>
</head>

<body onload="xajax_includeScript();">

<form id="testForm1" onsubmit="return false;">
<input type="submit" value="Include" onclick="xajax_click(); return false;" />
</form>

    <!--<div id="button">click</div>
    <div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1>Title of our cool popup, yay!</h1>
        <p id="contactArea">
            Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
            <br/><br/>
            We can use it for popup-forms and more... just experiment!
            <br/><br/>
            Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
            <br/><br/>
            <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
        </p>
    </div>
    <div id="backgroundPopup"></div>-->

<div id="click"></div>

</body>
</html>

Re: Inlcuding JavaScript in xajax

Skillful,

After much messing around I have your code running properly.

The problem was that your jq document ready function was called before your innerhtml was written with the xajax function.

<?php
define('ROOT', 'http://localhost/T_E_S_T/popupjquery/');
require_once("xajax/xajax_core/xajax.inc.php");

function includeScript()
{
    $objResponse = new xajaxResponse();

    $objResponse->includeCSS('styles/general.css', 'screen');
    
    $sType = "text/javascript";

    $objResponse->includeScript('scripts/jquery-1.3.2.min.js', $sType);
    $objResponse->includeScript('scripts/popup.js', $sType);

    return $objResponse;
}

function click()
{
    $objResponse = new xajaxResponse();

    $objResponse->Assign("click", "innerHTML", '
    <div id="button">click</div>
    <div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1>Title of our cool popup, yay!</h1>
        <p id="contactArea">
            Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
            <br/><br/>
            We can use it for popup-forms and more... just experiment!
            <br/><br/>
            Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
            <br/><br/>
            <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
        </p>
    </div>
    <div id="backgroundPopup"></div>');
    $objResponse->script('afterinclude()');
    return $objResponse;
}


$xajax = new xajax();
$xajax->configure('javascript URI','xajax/');
//$xajax->configure("debug", true);
$xajax->register(XAJAX_FUNCTION, "includeScript");
$xajax->register(XAJAX_FUNCTION, "click");
$xajax->processRequest();




?>

<!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>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
  <?php $xajax->printJavascript(); ?>

<script>
//Called from includeScript() to setup the popup.
//Needs to be called AFTER the elements have been written.
function afterinclude(){
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();})
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});

}
</script>
</head>
<body onload="xajax_includeScript();">

<form id="testForm1" onsubmit="return false;">
<input type="submit" value="Include" onclick="xajax_click(); return false;" />
</form>

<div id="click"></div>

</body>
</html>

I removed the document ready from popup.js but included its code in my afterinclude function. This makes all of the popup setup be performed AFTER the popup has been added to the page. Before xajax_includeScript is called, all of the elements you are trying to initialize do not exist with the exception if the click div.

I changed the paths to fit my environment.

Ed

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

Re: Inlcuding JavaScript in xajax

edrobinson,

Thanks a lot

Re: Inlcuding JavaScript in xajax

Hi there,

Please, tell me what to do by calling a javascript function from within a <SELECT> tag in a XAJAX function.... as indicated in the following code:

function lMetas($formulario)
    {
        require('../Connections/activ.php');
       
        mysql_select_db($database_activ, $activ);
        $query_listaMetas = sprintf("SELECT * FROM metas WHERE co_proceso = '%s' AND co_estado = 'A' and LEFT(co_meta,4)='%s' ORDER BY desc_meta ASC", $_SESSION['Equipo'], $formulario['anio']);
        $listaMetas = mysql_query($query_listaMetas, $activ) or die(mysql_error());
        $row_listaMetas = mysql_fetch_assoc($listaMetas);
        $totalRows_listaMetas = mysql_num_rows($listaMetas);
       
        $salida=new xajaxResponse();
        $tipo = "text/javascript";
        $opcion.="<select name=\"meta\" id=\"meta\" style=\"font-family:Verdana; font-size:11px; max-width:730px; color:#FF2000\">";
        do {
            $opcion.="<option value=\"".$row_listaMetas['co_meta']."\" selected onmouseover=\"showmeta(event,'".$row_listaMetas['desc_meta']."')\" onmouseout=\"hiddenDiv()\">".substr($row_listaMetas['desc_meta'],0,100)."</option>";
            //$newtext = wordwrap($text, 20, "<br />\n");
            //substr($row_listaMetas['desc_meta'],0,180)
        } while ($row_listaMetas = mysql_fetch_assoc($listaMetas));
        $rows = mysql_num_rows($listaMetas);
        if($rows > 0)
        {
            mysql_data_seek($listaMetas, 0);
            $row_listaMetas = mysql_fetch_assoc($listaMetas);
        }
        $opcion.="</select>";
       
        $btnCont="<input name=\"Continuar\" type=\"button\" value=\"Continuar\" style=\"color:#006600; font-size:12px; font-weight:bold; font-style:oblique; cursor:pointer\" />";
       
        $btnRegr="<input name=\"Cancelar\" type=\"button\" value=\"Regresar\" style=\"color:#FF0000; font-size:12px; font-weight:bold; font-style:oblique; cursor:pointer\" onclick=\"top.location.href='activ_mainscreen.php'\" />";
       
        $salida->assign("lista","innerHTML",$opcion);
        $salida->assign("btnContinuar_1","innerHTML","");
        $salida->assign("btnRegresar_1","innerHTML","");
        $salida->assign("btnContinuar_2","innerHTML",$btnCont);
        $salida->assign("btnRegresar_2","innerHTML",$btnRegr);
       
        return $salida;
    }

Re: Inlcuding JavaScript in xajax

Hi there,

Please, tell me what to do by calling a javascript function from within a <SELECT> tag in a XAJAX function.... as indicated in the following code:

function lMetas($formulario)
    {
        require('../Connections/activ.php');
       
        mysql_select_db($database_activ, $activ);
        $query_listaMetas = sprintf("SELECT * FROM metas WHERE co_proceso = '%s' AND co_estado = 'A' and LEFT(co_meta,4)='%s' ORDER BY desc_meta ASC", $_SESSION['Equipo'], $formulario['anio']);
        $listaMetas = mysql_query($query_listaMetas, $activ) or die(mysql_error());
        $row_listaMetas = mysql_fetch_assoc($listaMetas);
        $totalRows_listaMetas = mysql_num_rows($listaMetas);
       
        $salida=new xajaxResponse();
        $tipo = "text/javascript";
        $opcion.="<select name=\"meta\" id=\"meta\" style=\"font-family:Verdana; font-size:11px; max-width:730px; color:#FF2000\">";
        do {
            $opcion.="<option value=\"".$row_listaMetas['co_meta']."\" selected onmouseover=\"showmeta(event,'".$row_listaMetas['desc_meta']."')\" onmouseout=\"hiddenDiv()\">".substr($row_listaMetas['desc_meta'],0,100)."</option>";
            //$newtext = wordwrap($text, 20, "<br />\n");
            //substr($row_listaMetas['desc_meta'],0,180)
        } while ($row_listaMetas = mysql_fetch_assoc($listaMetas));
        $rows = mysql_num_rows($listaMetas);
        if($rows > 0)
        {
            mysql_data_seek($listaMetas, 0);
            $row_listaMetas = mysql_fetch_assoc($listaMetas);
        }
        $opcion.="</select>";
       
        $btnCont="<input name=\"Continuar\" type=\"button\" value=\"Continuar\" style=\"color:#006600; font-size:12px; font-weight:bold; font-style:oblique; cursor:pointer\" />";
       
        $btnRegr="<input name=\"Cancelar\" type=\"button\" value=\"Regresar\" style=\"color:#FF0000; font-size:12px; font-weight:bold; font-style:oblique; cursor:pointer\" onclick=\"top.location.href='activ_mainscreen.php'\" />";
       
        $salida->assign("lista","innerHTML",$opcion);
        $salida->assign("btnContinuar_1","innerHTML","");
        $salida->assign("btnRegresar_1","innerHTML","");
        $salida->assign("btnContinuar_2","innerHTML",$btnCont);
        $salida->assign("btnRegresar_2","innerHTML",$btnRegr);
       
        return $salida;
    }

Re: Inlcuding JavaScript in xajax

Hi,

I may misunderstand. If so, please tell me...

If you want to call an xajax function from a select, use an onchange handler in the select tag.

You can also call a js function in the page in the same way and call the xajax function from there.

Ed

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