Forum Index >  General >  General Support New Topic Post Reply
 Execute Javascript and Ajax on Static pages
   |  Printable Version
By: john (offline)  Aug 10 2009 08:28 am (Read 2840 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.... 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

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


Forum Chatty
Chatty


Group Comfort
Level:
: +3

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

Profile Email Website  
  Quote
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'Wink; when done.

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

Thanks!
Mark

Forum Admin
Admin

Group Comfort
Level:
: +111

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

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

I come back later to show the evolution...

Thanks Mark!


john

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


Forum Chatty
Chatty

Group Comfort
Level:
: +3

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

Profile Email Website  
  Quote
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


Forum Chatty
Chatty

Group Comfort
Level:
: +3

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

Profile Email Website  
  Quote
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

Forum Admin
Admin

Group Comfort
Level:
: +111

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

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


Forum Chatty
Chatty

Group Comfort
Level:
: +3

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

Profile Email Website  
  Quote
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


Forum Chatty
Chatty

Group Comfort
Level:
: +3

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

Profile Email Website  
  Quote
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


Forum Chatty
Chatty


Group Comfort
Level:
: +3

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

Profile Email Website  
  Quote
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 Smile Glad you got it working and thanks for sharing the solution with the rest of us.

Thanks!
Mark

Forum Admin
Admin

Group Comfort
Level:
: +111

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

Profile      
  Quote
New Topic Post Reply


 All times are CST. The time is now 08:48 am.
Normal Topic Normal Topic
Locked Topic Locked Topic
Sticky Topic Sticky Topic
New Post New Post
Sticky Topic w/ New Post Sticky Topic w/ New Post
Locked Topic w/ New Post Locked Topic w/ New Post
View Anonymous Posts 
Able to Post 
HTML Allowed 
Censored Content