Jump to content

Cannot Call Specific Element


jimfog
 Share

Recommended Posts

I will begin the opposite, by demonstrating the code first. [COD<a onclick="jason()" style="display:block;" class="testMenuItem1" title="element1" name="1">08:00</a> <?php echo $form?> <a "class="testMenuItem2" title="element1" name="1">09:00</a> <?php echo $form?> [/code] In element1 i have attached an onclick event that executes this function here:

function jason(){$("#whole").slideToggle("slow"); };

@whole is the div's name given to the form:

<form action="Proccess.php" method="post"><div id="whole">	    <table border="0">  <tr>	    <td >Name</td>	    <td><input type="text" name="name" maxlength="45" size="35" /></td>	    </tr>	    <tr>	    <td>Phone</td>	    <td><input type="text" name="phone" maxlength="45" size="35" /></td>	    </tr>		 <tr>   <tr class="time">	    <td>Time</td>	    <td><input type="text" name="time" maxlength="45" size="35" /></td>	    </tr>		 <tr>	   	    <td><input class="submit" type="submit"  value="submit" maxlength="25" size="15" /></td>	    </tr>	    </table>  </div>	    </form>

The problem is that if i attach an onclick event(calling the same function as testmenuitem1) also in "testMenuItem2", the form code that will open is that below "testMenuItem1. The forms are identical in both items, i just want, the form appearing below its corresponding element. Now, the only form that appears is the one under "testMenuItem1, even if i click "testMenuItem2. I hope you understand the nature of the problem. Of course the items are many more, i am just using this 2 for example only. I

Link to comment
Share on other sites

you can use 1 class name for link and target class name for the toggle

 <!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>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/ $(document).ready(function(){ $(".testMenuItem1").click(function (){$(this).next("form").children("div.show_hide").slideToggle("slow");});});/*--*//*]]>*/</script>  <style type="text/css"></style></head><body><a onclick="jason()" style="display:block;" class="testMenuItem1" title="element1" name="1">08:00</a><form action="Proccess.php" method="post"><div class="show_hide">            <table border="0">  <tr>            <td >Name</td>            <td><input type="text" name="name" maxlength="45" size="35" /></td>            </tr>            <tr>            <td>Phone</td>            <td><input type="text" name="phone" maxlength="45" size="35" /></td>            </tr>                 <tr>   <tr class="time">            <td>Time</td>            <td><input type="text" name="time" maxlength="45" size="35" /></td>            </tr>                 <tr>                       <td><input class="submit" type="submit"  value="submit" maxlength="25" size="15" /></td>            </tr>            </table>  </div>            </form><a onclick="jason()" style="display:block;" class="testMenuItem1" title="element1" name="1">09:00</a> <form action="Proccess.php" method="post"><div class="show_hide">            <table border="0">  <tr>            <td >Name</td>            <td><input type="text" name="name" maxlength="45" size="35" /></td>            </tr>            <tr>            <td>Phone</td>            <td><input type="text" name="phone" maxlength="45" size="35" /></td>            </tr>                 <tr>   <tr class="time">            <td>Time</td>            <td><input type="text" name="time" maxlength="45" size="35" /></td>            </tr>                 <tr>                       <td><input class="submit" type="submit"  value="submit" maxlength="25" size="15" /></td>            </tr>            </table>  </div>            </form> </body></html> 

Link to comment
Share on other sites

Hi and sorry for coming late. 2 questions dsonesuk. I see you have a link here-in relation to jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

I am novice in jQuery. Where exatcly the above file is needed, the UI component of jQuery? The other question has to do with the form. I see that in each a element(the one upon which clicking will "slidetoggle" the form) you write all the form code. Why not pass the form to a variable(contained in another file) and call it using an echo statement? This is what i originally did:

<a onclick="jason()" style="display:block;" class="testMenuItem1"  title="08:00" name="1">08:00</a>    <?php echo $form?>

Thanks.

Link to comment
Share on other sites

I use a direct link to jquery libray from http://ajax.googleapis.com, which save me downloading and installing this library on my server, and if i require updated version, just look up latest version links and add that. the reason I added the form code directly, I wanted to show an simple example, and not go through rigmarole creating php code to show the form that may require different form names, input names and other different atributes instead.

Edited by dsonesuk
Link to comment
Share on other sites

I use a direct link to jquery libray from http://ajax.googleapis.com, which save me downloading and installing this library on my server, and if i require updated version, just look up latest version links and add that.
Nor exactly what i meant. In many jQuery scripts i see 2 links:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

Why both are needed? What is the purpose of the one what is the purpose of the other? Am i clear now?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...