By: Anonymous: john ()  Aug 10 2009 08:28 am (Read 3207 times)  

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

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 Wink

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

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


Join me on the glFusion Gitter Channel

   

Mark



Group Comfort
Level:
: +113
Registered:: 10/21/05

Posts: 7071
By: Anonymous: john ()  Aug 10 2009 08:52 am  

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

I come back later to show the evolution...

Thanks Mark!


john

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

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

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

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


Join me on the glFusion Gitter Channel

   

Mark



Group Comfort
Level:
: +113
Registered:: 10/21/05

Posts: 7071
By: Anonymous: john ()  Aug 10 2009 09:43 am  

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/2b8137d2/cidades-estados.html

Really Thanks for the help!

cheers,

john

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

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

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

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

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

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

Thanks!
Mark


Join me on the glFusion Gitter Channel

   

Mark



Group Comfort
Level:
: +113
Registered:: 10/21/05

Posts: 7071
9 posts :: Page 1 of 1