link id for every result

[doddsey_65]

i am using jquery so that when someone clicks on the quote button next to a post the quick reply field is populated with the content of the post.

 

I have gotten it to work but the problem is multiple posts. here is the code now:

 

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
    
    jQuery(".quick_quote").click(function()
    {
        jQuery("#message_qr").html(jQuery("#content").html());
        animatedcollapse.toggle('quick_reply');
    });
});
</script>

 

<img class="quick_quote" src="img" />

 

but that image is at the end of every post so i want it to be img class="quick_quote{post_id}

 

but how would i work the jquery that way because it would no longer be ".quick_quote as it has the post id at the end aswell to differenciate.

[trq]

jQuery('img[class^="quick_quote"]').click(function()

 

See http://api.jquery.com/category/selectors/

[doddsey_65]

even when i add that and click the image button it only adds the content of the first post to the quick reply box and not the content of the post i am clicking. since that is just looking for a td that has an id that starts with content. they all start with content and then have their post id after it.

[trq]

Your going to need to show more code and try and explain your problem better. Some of the markup wouldn't hurt either.

[doddsey_65]

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery('div.nav a').smoothScroll();
    
    var pid = "{P_ID}";
    var npid = ({P_ID} + 10);
    
    for (var i=pid; i<=nid; i++)
    {
        jQuery("img.quick_quote"+[i]).click(function()
        {
        jQuery("#message_qr").html(jQuery("#content"+).text());
        animatedcollapse.show('quick_reply');
        });
    }
    
});
</script>[/i]

 

a page displays 5 posts. theres a button next to each post with a class of quick_reply123 where 123 is the id of the post. When this button is clicked it sends the text content of the post td with the id of content123 into the quick reply box at the bottom.

 

Thanks

[doddsey_65]

note: {P_ID} is replaced with $pid when the script is called by the php file. for ease just think of it as "1"

[trq]

That code has syntax error and shouldn't even run. can we see the actual code, and some of the markup?

[doddsey_65]

post_display.html

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
   
    var pid = "339";
    var npid = (339 + 10);
    
    for (var i=pid; i<=nid; i++)
    {
        jQuery("img.quick_quote"+[i]).click(function()
        {
        jQuery("#message_qr").html(jQuery("#content"+[i]).text());
        animatedcollapse.show('quick_reply');
        });
    }
    
});
</script>

<div class="post_header" id="{P_ID}">
    <span style="float:left;">
        {P_TITLE}
    </span>
    <span style="float:right;">
        {P_AUTHOR}
    </span>
</div>    
<table class="posts" id="post_display">
    <tr>
        <td class="post_info">
            <span class="post_avatar">
                {P_AVATAR}
            </span>
            <span class="post_sig">
                {P_SIG}
            </span>
            <span class="post_options">
                {P_OPTIONS}
            </span>
            <span title="{P_ABS_DATE}" class="post_date">
            {P_DATE}
            </span>
        </td>
    </tr>
    <tr>
        <td class="post_content" id="content{P_ID}">
            {P_CONTENT}
            {P_ATTACHMENT}
            <div class="ind_post_stats">
                <span class="like">{LIKE_LIST}</span>
            </div>
        </td>
    </tr>
</table>

 

as i said before {P_ID} is replaced as this is just the html file which is called by the php file to display the page contents.

 

view_post.php

$post_options .= "<img class=\"quick_quote$post_id\" style=\"margin-right:10px;\" src=\"{$config['asf_root']}template/default/icons/quick_quote.png\" alt=\"Quote Post\" title=\"Quote This Post\">";

$rep = array(
                "{P_AVATAR}",
                "{P_SIG}",
                "{P_OPTIONS}",
                "{P_CONTENT}",
                "{P_TITLE}",
                "{P_AUTHOR}",
                "{P_DATE}",
                "{P_ATTACHMENT}",
                "{P_ID}",
                "{P_ABS_DATE}",
                "{SITE_ROOT}",
                "{LIKE_LIST}");
                
            $disp = array(
                "<img class=\"avatar_icon\" src=\"{$config['asf_root']}avatars/{$post_info['user_avatar']}\" alt=\"avatar\" />",
                asf_bb_parser($post_info['user_sig']),
                $post_options,
                asf_bb_parser(htmlspecialchars(stripslashes($post_content))),
                $post_title,
                $post_author,
                $post_date,
                $attachment_list,
                $post_id,
                $p_abs_date,
                $config['asf_root'],
                $like_list);
                
            echo str_replace($rep, $disp, file_get_contents("html/post_display.html"));    

 

any better?

[trq]

You you know what marklup is? We need to see the html output that goes with this Javascript.

[doddsey_65]

the button:

 

[pre]<img class="quick_quote339" style="margin-right:10px;" src="[url=http://www.phpfreaks.com/forums/view-source:http://localhost/ASF/template/default/icons/quick_quote.png]http://localhost/ASF/template/default/icons/quick_quote.png[/url]" alt="Quote Post" title="Quote This Post">[/pre]

 

the td:

 

[pre]		<td class="post_content" id="content339">
		It is now possible to add attachments to your posts. At the very bottom of the post reply page you can choose to add them. You can add a max of 5 attachments to any one post.<br />
<br />
The attachments are not queued. They will upload at the same time as each other.<br />
<br />
You can also add descriptions for every attachment you upload.<br />
<br />
At the present time attachments will always appear at the bottom of your posts. I am working on a way to make a button so you can place them inline with the content of your post.<br />
<br />
Thanks <br />
[/pre][pre]Carl

		<div class="ind_post_stats">
			<span class="like">0 People Like This</span>
		</div>
	</td>
[/pre]

 

the quick reply box:

 

[pre]<div id="quick_reply">
<form name="quick_reply_form" method="post" id="quick_reply_form">
<input type="hidden" id="user_name" name="username" value="" />
<input type="hidden" id="subject" name="subject" value="Post Attachments" />
<input type="hidden" id="method" name="method" value="quick_reply" />
<input type="hidden" id="pid" name="pid" value="341" />
<input type="hidden" id="tid" name="tid" value="123" />
<input type="hidden" id="fid" name="fid" value="3" />
<input type="hidden" name="avatar" id="avatar" value="" />
[/pre][pre]	<input type="hidden" name="sig" id="sig" value="" />
<input type="hidden" name="color" id="color" value="00f" />
<input type="hidden" name="time" id="time" value="2011-01-20 10:11:25" />
<input type="hidden" name="time_abs" id="time_abs" value="{TIME_ABS}" />
<textarea id="message_qr" name="message_qr"></textarea>
<label for="new_post_btn" id="new_post_btn_img" style="display:none;">
</label>
<input id="new_post_btn" type="submit" name="new_post_btn" value="Add Reply" />
[/pre][pre]	<input id="clear_btn" type="reset" name="" value="Clear" />
<input id="close_btn" onClick="javascript:animatedcollapse.toggle('quick_reply')" type="button" name="" value="Close" />
</form>
</div>
[/pre]

[trq]

Can you please just post the markup as is, don't bother putting [pre][/pre] tags in wherever, and don't separate the content from the quick_reply.

 

Your making this pretty difficult.

[trq]

Better still, have you a live page I could look at?

[doddsey_65]

i didnt put the pre tags, i copied it from the source so i dont know what happened there.

 

here is the live example: http://www.thevault.cz.cc/f/new_features/t/post_attachments/p/339

[trq]

$(document).ready(function() {  
  $('img[class^="quick_quote"]').click(function() {
    $("#message_qr").html($(this).nextAll('tr td').html());
    animatedcollapse.toggle('quick_reply');
  });
});

[doddsey_65]

no luck. it opens the quick reply div as it should but no content is going into the textarea

[trq]

Ok, Ive had a bit of a play around. Your markup is terrible, and doesn't really make the job easy. This should work for you, buts its not the most elegant approach. If your markup was more organized I;'m sure it could be simplified.

 

$(document).ready(function() {
  $('img[class^="quick_quote"]').click(function() {
    var parts = $(this).attr('class').split(/\-/);
    $("#message_qr").html($('content-'+parts[1]);
    animatedcollapse.toggle('quick_reply');
  });
});

 

You'll need to change quick_quote339 to quick_quote-339 & content339 to content-339 in your markup.

[doddsey_65]

sorry but theres no text going into the quick reply textarea. I changed the ids and classes to include the hyphen but nothing changed. Thanks for all of your help so fay btw. I appreciate it.

[trq]

Typo.

 

$("#message_qr").html($('content-'+parts[1]).html());

[doddsey_65]

sorry i forgot to mention i noticed the typo.

 

heres what i have:

 

jQuery(document).ready(function() {

    jQuery('img[class^="quick_quote"]').click(function() 
    {
    var parts = jQuery(this).attr('class').split("/\-/");
    jQuery("#message_qr").html(jQuery('content-'+parts[1]).html());
    animatedcollapse.show('quick_reply');
    });
});

 

it just isnt inserting the contents of the td into the textarea for some reason.

[trq]

Is #message_qr a textarea? Try....

 

jQuery("#message_qr").val(jQuery('content-'+parts[1]).html());

 

I am sure that jQuery('content-'+parts[1]).html() is returning the data, you should check it in firebug.

[doddsey_65]

yes its a textarea so i tried .val() before but no luck. where abouts in firebug would i need to look? im not getting any errors.

[trq]

Put....

 

console.log(jQuery('content-'+parts[1]).html());

 

In your code then look at the console.

[trq]

Doh, it should also be.....

 

jQuery('#content-'+parts[1]).html();

[doddsey_65]

firebug returns null. but when i add the actual id myself:

 

console.log(jQuery('td#content-369').html());

 

the contents are returned in firebug.

 

so it has to do with the parts array. a simple alert of parts[1] throws an undefined.

 

however an alert of parts[0] throws quick_quote-369

[doddsey_65]

this works:

 

jQuery(document).ready(function() {

    jQuery('img[class^="quick_quote"]').click(function() 
    {
    var parts = jQuery(this).attr('class').split("|\-|")[0];
    jQuery("#message_qr").val(jQuery('#content-'+parts[12]+parts[13]+parts[14]).html());
    animatedcollapse.show('quick_reply');
    console.log(jQuery('td#content-'+parts[12]+parts[13]+parts[14]).html());
    });
});

 

but thats just assuming the id will be 3 chars long