.  

 

 

.
.

26 / 04 / 2017

Usuarios conectados: 3

Cargando documento...

Buscar:

.

Este Sitio:

Principal

Dreamweaver

Fireworks

JavaScript

CSS

Sonido

Artículos

Links

E-ufemismos

Descargas

Historial

 

Mailing List:

Suscríbete a la lista de correo, No practico spamming y ofrece algunas ventajas.

Pulsa aquí para saber más y suscribirte.

 

Recomendados:

Tecnorama >Tutoriales Dreamweaver

 

Retrieving data using AHAH (3)

Versión para imprimir | Translate this page

In chapter 1, we built the detail page that retrieves the description from the database and pulls it to list_items.php

In chapter 2, we built list_items.php and left it almost finished: It already had the required div's for presentation and the repeat region to list the items. However, it needs some more code to make it dynamic and connect to item_details.php.

In this Final chapter, we'll concentrate on the javascript part that links everything we've done so far: We'll add a 'show/hide layers' behavior, we shall learn how to call the functions in jah.js and will use 'Find and Replace' to get the final touch.

Remember something we talked about in chapter 2:

  • We used divDynamicID as id for the hidden layer: We'll use it again here
  • The name of the parameter required by item_details.php to get the detailed desciption: 'id_item'

OK let's start.
  1. The first step is linking to jah.js, the file that will make the ahah connection to item_details.php. Add this code inside your document's head:
    <script type="text/javascript" src="jah.js"></script>
    (You should modify the path to jah.js if the file is not in the same folder as your document)
  2. Add a fake link (like 'JavaScript:;')to the dynamic text displaying item names. In the future, you can change it to link to a detail page without problems:


  3. Select the whole link (you can click on the <a> tag on the status bar), open the Behaviors panel and Select 'Show/Hide Layers'. Select the div that you will see named 'divDynamicID' and press the "Show" button:


  4. Click ok and make sure that in the behaviors panel it is attached to the onMouseOver event:


  5. Repeat steps 3 and 4 but, this time, select 'hide' instead of 'show' and check that the behavior is attached to the onmouseout event:


In the next steps, we'll make the call to jah.js function (this is the part you've been waiting for!)

The method is quite simple, the function calls have this structure:
jah('urlToGetData','targetDiv')
Where 'urlToGetData' is the file that will return the data (it will be item_details.php, that we created in chapter 1) and 'targetDiv' is the id of the div where the retrieved data will be shown (our hidden layers).

Select the fake link again and open the Behaviors Panel. Select the option 'Call JavaScript'

in the dialog window, type this:
jah('item_details.php?id_item=DynamicID','divDynamicID')

This way, we have written an url to our item_details.php document and add the provisional code to pass a param value.

Make sure the onMouseOver is selected for this behavior:

At this point, we've got almost everything we need. However, it won't work. Why?

If you execute the document and check the html, you'll see that all the links point to the same url (item_details.php?id_item=DynamicID) and all the hidden divs have the same name (divDynamicID).

How can make all the divs have a different id?. Well, we have a field in our database that can help: id_item.

So it's time for some search and replace: We shall replace de text 'DynamicID' with server side code to display the id of each field. Since it is a dynamic value, the divs will have different id's when the code is parsed. Besides, the URL param will also point to the item_details.php file passing the correct value:

(Dirty trick: If you don't want to write the server code by hand, drag the id_item field from the Data Bindings panel into an empty place on your document, cut the code written by Dreamweaver and paste it into the 'Replace' textarea in the dialog window).

That is: All the dynamic values are parsed to point to the correct div for each block (div1, div2, div3 and so on). At the same time, the first parameter in jah() points to the url passing the item id.

Click here to download the sample files. You will find:

  • ahah_list_items.php: The php version of the file (it won't work because of DB connection, but it will let you see the original code)
  • ahah_list_items.html: A working version of previous file, you can use it to see the code at work.
  • ahah_item_details.php: a modified version of the file explained in chapter 1: it uses some predefined values, so you can test it without a database.
  • jah.js: the script file

To test them, place them into your server root folder and run http://localhost/ahah_list_items.html

Also, you can click here to see a running demo

¿Comentarios? 5, de momento. Mostrando 1 ->5

1.- agree out this [url=http://onlinecasinos-x.com/]casino online[/url] where you can collect legitimate money with the avoid of this guidePlaying [url=http://onlinecasinos-x.com/bitcoin-casino.html]bitcoin casino bonus[/url] , check this [url=http://onlinecasino-b.com/ru/]casino[/url]

2.- major website! mandate of up the cyclopean work. visit my website only if you are overwhelming 21 check this [url=http://avi.vg]online sextoys[/url] portal, [url=http://randomsend.com/]email server[/url] , buy [url=http://esextoyfun.com/c.html?c=22/]Buy Dildo[/url]

3.- thanks for this colossal illuminating website, living up the skilled jobless check out this [url=http://onlinecasinos-x.com]casino[/url] offers , buy [url=http://esextoyfun.com]sex toys[/url]

4.- block doused this [url=http://onlinecasino-xx.com]casino[/url] where you can collect real funds with the serve of this lightPlaying [url=http://onlinecasinos-x.com/online-blackjack.html]online blackjack[/url] , buy [url=http://adultsrus.us]sex toys[/url]

5.- Classic script!

| |

Añade tu comentario



Escribe el código de la imagen superior:

:

Tutoriales Dreamweaver

-El muy buscado Menú desplegable

-¿Qué $%&$% es 'SSI'?

-Utilizar tablas de excel para actualizar tablas en html.

-Plantillas en DW MX: Regiones opcionales.

-Adaptar tablas a la ventana.

-Vista diseño para formatos no reconocidos

-Carga de imagenes en orden

-Mi primera Extensión

-Rollover remoto ('Disjointed Rollover')

-Iframes vs. Frames

-Contenido dinámico en celdas

-DW MX: Repeating Tables

-DW MX: Practica el Cloaking

-DW MX: CSS en tiempo Diseño

-Buscar y Reemplazar en Dreamweaver

-Menú dinámico

-Collaborative Dreamweaver: Design Notes and Files Panel

-Using PHP Server Formats and MySQL Dates

-Creando un Newsticker

-Generate Excel files with DWMX/PHP/MySQL (part 1)

-Manejo de fechas en PHP y MySQL

-Generate Excel files with DWMX/PHP/MySQL (part 2)

-Manejo de Fechas en consultas a MySQL

-Showing all records by default in a results page (PHP)

-Retrieving data using AHAH (1)

-Retrieving data using AHAH (2)

-Retrieving data using AHAH (3)

TECNORAMA es simplemente una página personal. No sirve ni de promoción del autor ni cosas por el estilo.
Todos los códigos, textos y tutoriales son de libre uso mientras se mencione al autor (no es mucho pedir)
Este sitio es compatible con IE6/NS6/Mozilla1.0
Para contactar, puedes enviarme un e-mail a tecnorama@hotmail.com