Execute Javascript and Ajax on Static pages

	Forum Index > General > General Support
Execute Javascript and Ajax on Static pages

Printable Version

By: john (offline) Aug 10 2009 08:28 am (Read 2005 times)

john

Hello,

I was searching here in the forum for something that could help me in a problem that I have when I try to execute javascript and ajax... I found some replies were is saying that by default is not possible to execute javascript... I think the same would happend with ajax..

I can explain what I need to do, I want to show in a select option all records form a table (Institutions) and when I select one item (institution) it should fill another select option with the (departments) related with the institution selected.

I already have the code for that, I tested and it working outside de the glFusion, but when I try to put the code inside the static page it don´t work, and sometimes I guess the glFusion modified some lines....

This is the code for the static page:

PHP Formatted Code

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

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

<title>Registo de novo data logger</title>

</head>

<body onload="buscaInstituicoes()">

<div class="story-body">

<div class="glfform">

<form id="form1" enctype="multipart/form-data" method="post" action="http://localhost/public_html/staticpages/index.php?page=procedimentos_programados">

    <div class="required"><label for="uf">Institui&ccedil;&atilde;o/Organiza&ccedil;&atilde;o:</label><select id="uf" name="uf" onchange="buscaDepartamentos(this.value)></select></div>

    <div class="required"><label for="departamento">Departamento/Sec&ccedil;&atilde;o:</label><select id="departamento" name="departamento">

    <option value="">selecione primeiro a institui&ccedil;&atilde;o</option>

    </select></div>

    <div class="required"><label for="name">Nome data logger:</label><input type="text" maxlength="40" id="name" name="name" />

        </div>

    <div class="required"><label for="email">Modelo:</label><input type="text" maxlength="30" id="modelo" name="modelo" /></div>

    <div class="required"><label for="message">Mensagem:</label><textarea cols="28" rows="5" id="message" name="message"></textarea></div>

    <p style="text-align: center;"><input type="submit" value="Enviar" id="submit" /></p>

</form>

</div>

</div>

</body>

</html>

the files ajax.js and funcoes_inst_dep.js are located in the same directory, "staticpages", and I put in the "root/public_html" too...

What should I do?

Tkanks in advance! I know I have a lot of questions but I know too this forum is great! And its because of this when I finnish these project I will donate

----------------------------------------
John Rivers
www.joserioswebdesign.com

Chatty

Group Comfort
Level:: +3

Registered: 08/04/09
Posts: 37
Location: Porto, Portugal

By: Mark (offline) Aug 10 2009 08:38 am

Mark

John, I can't really think of a reason why JavaScript or AJAX would not work in a static page, we use JavaScript all the time with the MooTools widgets, which all use static pages.

A couple of thoughts....

1. Keep in mind, glFusion will put all the HTML header data when displaying the static page, so no reason to to include <html...> or <head>...

2. When referencing your javascript scripts, I would use absolute URLs like http://www.yoursitehere.com/javascript/ajax.js, this removes any issues about finding them using relative urls.

3. You are using a body onload statement, again, glFusion has already put a <body> statement on the page. Static pages are considered the 'content' of the page, it is wrapped by glFusion's header / footer. Maybe using something like this:

PHP Formatted Code

<script type="text/javascript">

  window.onload = functionname();

</script>

4. I would not recommend using a form action that calls the static page index.php. Instead, I would write a separate .php file that handles the form's submit and then do a echo COM_refresh('url goes here'; when done.

Let me know if this helps get you a little further along....

Thanks!
Mark

glFusion - Enhanced Content Management

Admin

Group Comfort
Level:: +104

Registered: 10/21/05
Posts: 5904
Location: The Great State of
Texas

By: john (offline) Aug 10 2009 08:52 am

john

I know it´s not necessary put html tags, but when i´m not getting anything I put for see some diference... but it was the same...

Ok, I´m going to try your steps, really thanks... I guess I need to work much more on this to get what I need...

I come back later to show the evolution...

Thanks Mark!

john

----------------------------------------
John Rivers
www.joserioswebdesign.com

Chatty

Group Comfort
Level:: +3

Registered: 08/04/09
Posts: 37
Location: Porto, Portugal

By: john (offline) Aug 10 2009 09:20 am

john

No, it´s not working... I put the code like this:

PHP Formatted Code

<script type="text/javascript" src="http://localhost/public_html/ajax.js"></script>

<script type="text/javascript" src="http://localhost/public_html/funcoes_inst_dep.js"></script>

<script type="text/javascript">

  window.onload = buscaInstituicoes();

</script>

<div class="story-body">

<div class="glfform">

<form id="form1" enctype="multipart/form-data" method="post" action="">

<div class="required">

<label for="uf">Institui&ccedil;&atilde;o/Organiza&ccedil;&atilde;o:</label>

<select id="uf" name="uf" onchange="buscaDepartamentos(this.value)></select></div>

<div class="required">

<label for="departamento">Departamento/Sec&ccedil;&atilde;o:</label>

<select id="departamento" name="departamento">

    <option value="">selecione primeiro a institui&ccedil;&atilde;o</option>

</select>

</div>

<div class="required">

<label for="name">Nome data logger:</label>

<input type="text" maxlength="40" id="name" name="name" />

</div>

<div class="required">

<label for="email">Modelo:</label>

<input type="text" maxlength="30" id="modelo" name="modelo" />

</div>

<div class="required">

<label for="message">Mensagem:</label>

<textarea cols="28" rows="5" id="message" name="message"></textarea>

</div>

<p style="text-align: center;"><input type="submit" value="Enviar" id="submit" /></p>

</form>

</div>

</div>

I take off the action in the form, its not important for now, I just need to see those two selects working...

do you want I put here the code of the other files? I think it´s not necessary because I know they are working outside of glFusion... if you want I can post a link.

Thanks for the help!

john

----------------------------------------
John Rivers
www.joserioswebdesign.com

Chatty

Group Comfort
Level:: +3

Registered: 08/04/09
Posts: 37
Location: Porto, Portugal

By: Mark (offline) Aug 10 2009 09:26 am

Mark

If you can provide all the files I'll do a little testing later this morning. A couple of other thoughts:

- glFusion uses the MooTools library, could it be there is a conflict between it an your scripts?
- Do you have any JS debugging tools (I use FireFox with the FireBug extension) to see if there are any errors that might give a clue?

Thanks!
Mark

glFusion - Enhanced Content Management

Admin

Group Comfort
Level:: +104

Registered: 10/21/05
Posts: 5904
Location: The Great State of
Texas

By: john (offline) Aug 10 2009 09:43 am

john

ok, this is the link for a zip file containing my files,
http://www.2shared.com/file/7106064/514fee4f/test.html

you do not be able to execute directly because you don´t have my database and tables, but I can give you the original files witch I use, and it´s writed in portuguese, I hope you can understand, "estados" means "states", and "cidades" means "citys".
http://www.2shared.com/file/7105979/2b8 ... tados.html

Really Thanks for the help!

cheers,

john

----------------------------------------
John Rivers
www.joserioswebdesign.com

Chatty

Group Comfort
Level:: +3

Registered: 08/04/09
Posts: 37
Location: Porto, Portugal

By: john (offline) Aug 10 2009 10:14 am

john

I know it´s not a good way to do, but when I put these code:

PHP Formatted Code

<body onload="buscaInstituicoes()">

(...)

</body>

The function "buscaInstituicoes()" executes and fills the first select, the problem is when I select some item, did not fills the second one... it´s strange, it seems like the call "onchange" doesn´t work

PHP Formatted Code

(...)

<select name="uf" id="uf" onchange="buscaDepartamentos(this.value)">

(...)

I already install FireBug, is quite interesting... I see that the script for call the files of my functions are not located in head tag, like it should be right?

I will see MooTools now... but I dont know what should look at...

Thanks...

jonh

----------------------------------------
John Rivers
www.joserioswebdesign.com

Chatty

Group Comfort
Level:: +3

Registered: 08/04/09
Posts: 37
Location: Porto, Portugal

By: john (offline) Aug 10 2009 11:52 am

john

Well... I´m feeling like stupid... I don´t know how and It´s seems hardly do belive but it working now and the only thing I need to put it was ";" at the end of function call like this:

PHP Formatted Code

(...)

//N o w

<select id="uf" name="uf" onchange="buscaDepartamentos(this.value);"> </select>

(...)

PHP Formatted Code

(...)

//B e f o r e

<select id="uf" name="uf" onchange="buscaDepartamentos(this.value)"> </select>

(...)

... Thanks Mark anyway, it was helpful your advices too.

john

----------------------------------------
John Rivers
www.joserioswebdesign.com

Chatty

Group Comfort
Level:: +3

Registered: 08/04/09
Posts: 37
Location: Porto, Portugal

By: Mark (offline) Aug 10 2009 12:01 pm

Mark

If I had a dollar for every missing semi-colon I've forgotten, I would be a very rich man Glad you got it working and thanks for sharing the solution with the rest of us.

Thanks!
Mark

glFusion - Enhanced Content Management

Admin

Group Comfort
Level:: +104

Registered: 10/21/05
Posts: 5904
Location: The Great State of
Texas