jquery help

[jordanste]

hey guys

im just starting to fool around with jquery and discover its insane-ness. if any of you are familiar with it, please help me out with this.

I have a bunch of divs with the same class but a different id, each div contains a form that is styled to "display:none;" on load. on click of a link i need to display the form.

problem is onclick all of the forms for every div with this class is displayed. I dont understand how variables work with jquery, i never really understood javascript. i imagine ill have to use a variable to hold the id of the form where the link was clicked then use that variable to match it with the id on the form i want to display. but how do i actually write the code for this...

this is what im looking at now...

	$("div.delete a").click(function(){
		$("div.imgeditform").slideToggle();
		return false;
	});

thanks!

 

[SrWebDeveloper]

Target which div and anchor tag you want to uniquely identify, change it from a class named "delete" to an ID named "special_delete" and adjust your CSS accordingly. Then use this (for example):

$("div#special_delete a").click(function(){
        $("div.imgeditform").slideToggle();
        return false;
    });

What I did was change the first selector in your JQuery statement.

If that doesn't do it for ya, I was confused when you said "same class but a different id" so I would next need to see your HTML please or even better a link to the page so I can debug it fully. All you need to know in this situation is how to identify and change a selector, but if you want to know how to easily do this yourself in 10 minutes:

First, read this page to learn about JavaScript Functions.
Then read this page to see how JQuery invokes functions, selectors, events and actions.

Generic syntax of most JQuery statements for transitional effects: $("selector_name").event_name(function(){action;});

In English this means I modified the first selector passed to JQuery's click function which when a click event for the hyperlink is detected JQuery will then invoke the action which in this case calls the slideToggle function with it's own selector passed to it, then false is returned upon exit.

Please don't hesitate to ask if you need further help.

-jim

 

[jordanste]

the html is spit out by a while loop, it comes out like

<style tyoe="text/css">
div.imgeditform {
     display:none;
}
</style>
<div class="delete">
     <a href="#">edit</a> | <a href="#">delete</a>
</div>
<div class="imgeditform" id=" ($n) ">
     <form>...etc...</form>
</div>

**NOTE: in the second div id i put ($n), this whole thing is really output via php and i didnt want to write everything out like that and escape characters and all that so i just wanted to indicate that the id is incremented each time by placing ($n)...


so i need a way for jquery to get the id of the div that holds the particular link that was clicked and only apply the "show" effect for the form within that div. does that make more sense now?

 

[bootedbear]

You can specify a second parameter to the $() function that limits jQuery's searching to the subtree specified by that element. Find the parent element of the link (.parent() or .parents() might help) and pass it as the second param to limit jQuery to only search in the subtree containing the link.

 

[SrWebDeveloper]

@OP

Now that you've explained and I see coding is involved, please revert to your original CSS class and ID names and simply follow these steps (tested/works):

1) Into your head section add this new Javascript function:

<script language="javascript" type="text/javascript">
<!--//

function ChangeMe(string) {

$("div.delete a[name='"+string+"']").click(function(){
        $("div.imgeditform[id='"+string+"']").slideToggle();
        return false;
    });
}

//-->
</script>

Notice the changes to the JQuery selectors. Similar to the comment made by bootedbear, I found out any HTML attribute (i.e. "name") can be used as a contraint in the selector. I took advantage of that! (JQuery really is powerful and well written, many ways to get things done easily.)

2) PHP changes:

Modify your PHP loop by adding two new attributes to your edit/delete anchor tags -- First, add a name attribute with its value set to your counter ($n) Second, add onClick="return ChangeMe(this.name);" as well. Note: Set the ID for the imgeditform div's to the same counter value.

If you ran your loop 3 iterations starting at 1, example output (yours will be differently displayed, this is just to demonstrate the concept):

<a href="#" name="1" onClick="return ChangeMe(this.name);">edit</a> | <a href="#" name="1" onClick="return ChangeMe(this.name);">delete</a>
<a href="#" name="2" onClick="return ChangeMe(this.name);">edit</a> | <a href="#" name="2" onClick="return ChangeMe(this.name);">delete</a>
<a href="#" name="3" onClick="return ChangeMe(this.name);">edit</a> | <a href="#" name="3" onClick="return ChangeMe(this.name);">delete</a>

<div class="imgeditform" id="1">
     //form code here
</div>
<div class="imgeditform" id="2">
     //form code here
</div>
<div class="imgeditform" id="3">
     //form code here
</div>

HOW DOES IT WORK?

The user clicks on any edit or delete link, the onClick event passes the name attribute value for that link to a Javascript function called ChangeMe which in turn passes the name value to JQuery as the variable called "string" I added to both selectors. Pretty cool, eh?

Note: Normally people use ONE SINGLE form used to handle all edit/delete links, not one for each. In your PHP you could add a hidden form field set to name="id" and value="$n" for later reference. I base this on the fact you included the PHP counter in the div wrapping your form.

-jim

 

[jordanste]

hey jim,

thanks alot for your detailed response i took a second to browse over it but am not at a place to work with my code right now. ill get back to you on how it works. thanks again