Editing titles

[MySQL_Narb]

Summary of my question: How do I add a listener to each <tr> (which has the ID of the thread in question) that holds a thread title.

 

I'm looking to implement a feature into my forum software like that of vBulletin's. This feature simply goes like this: When a moderator is viewing a forum, they can click on an image (which has the HTML id attribute of the thread's ID) which then changes the thread title to a little box where they can then edit the title of the thread.

 

I'm not asking you guys how I would do all of that stuff, I just don't know how to get past this problem holding me back:

 

Say each <tr> within a table has this attribute: id="id_of_thread" (id_of_thread being the id of that thread)

 

So, here would be the page source if you looked:

<table>
<tr>
<td>Posts</th>
<td>Last Reply</th>
</tr>
<tr id="1"><img src="image.png"><a href="viewthread.php?id=1">Thread Title</a></tr>
<tr id="2"><a href="viewthread.php?id=2">Thread Title</a></tr>
<tr id="3"><a href="viewthread.php?id=3">Thread Title</a></tr>
<tr id="4"><a href="viewthread.php?id=4">Thread Title</a></tr>
</table>

 

How exactly could I manage to add a listener to each of the tr's with a thread ID? Would I get all the child nodes of table element subtracted by one (since the first <tr> is not a thread)?

 

I tried to word this the best I can. I'm sorry if I managed to confuse you while describing my problem.

[MySQL_Narb]

I'm currently trying:

 

    var parent = document.getElementById('t_holder');
    
    for(var i = 0; i < parent.childNodes.length; i++) { 
        //...
    }
    
    alert(i);

 

Yet, the code isn't working. Any suggestions/hints to get myself on the right track regarding this snippet of code?

[scootstah]

Your table code doesn't really make a lot of sense, and it is malformed. You really shouldn't be using tables for layout anyway.

 

You will find that jQuery solves a lot of your problems. I have put together a quick demo for you. I used 4 div's instead of tables, but it will work regardless what you use for a parent element.

 

http://jsfiddle.net/p8BX2/

 

It could probably be improved, but it does the job. When you click the anchor, it gets replaced with a text field. You type in the new name, and click off the text field. When you click off the text field (or otherwise trigger the blur event) it will run some AJAX to save the title, and then replace the text field with an anchor once again.

[MySQL_Narb]

Your table code doesn't really make a lot of sense, and it is malformed. You really shouldn't be using tables for layout anyway.

 

You will find that jQuery solves a lot of your problems. I have put together a quick demo for you. I used 4 div's instead of tables, but it will work regardless what you use for a parent element.

 

http://jsfiddle.net/p8BX2/

 

It could probably be improved, but it does the job. When you click the anchor, it gets replaced with a text field. You type in the new name, and click off the text field. When you click off the text field (or otherwise trigger the blur event) it will run some AJAX to save the title, and then replace the text field with an anchor once again.

 

Yes, but I feel like I should learn JavaScript before moving onto jQuery.

 

Thanks for the example, though!

[scootstah]

That is a good idea. But, at the same time, jQuery cuts out a lot of code. For things like AJAX, you should be using some sort of library, IMO. Not only does it knock out a ton of code, but it also helps to ensure cross-browser compatibility, as well as compatibility with mobile devices.

 

Anyway, you should still be able to get an idea how the code works even if you want to use native JS. The big kicker here is that I have added a prefix to the thread ID. So instead of just a number, you get thread-1. Then you can loop over elements with ID's which are prefixed with thread.

[MySQL_Narb]

I've decided to move into jQuery. I worked with some of it's functions and read a tiny bit of the documentary, and boy...what can I say: it's a life saver!

 

The only questions I have regarding your code, is:

 

$('div[id|="thread"] a')

 

Is this some sort of regular expression? o.O

 

~~~~~~~~~~~~~~~~~~~~~

 

And why did you surround all your code with an anonymous function?

 

$(function(){
    //the code
})

 

I'm assuming it's something along the lines of:

 

$(document).ready(function(){
    
    //the code
    
});

[scootstah]

$('div[id|="thread"] a')

 

Is this some sort of regular expression? o.O

 

No, it is one of jQuery's selectors which selects elements with ID's that are prefixed. So it would match any div's with ID's that start with "thread-".

 

And why did you surround all your code with an anonymous function?

 

$(function(){
    //the code
})

 

I'm assuming it's something along the lines of:

 

$(document).ready(function(){
    
    //the code
    
});

 

Yes, $(function(){}); is shorthand for $(document).ready(function(){});

[MySQL_Narb]

Wow, I appreciate the help you've gave me here. This is definitely putting me on the right track. The selectors is horribly long, so I'm going to have to study those over the course of a few days.

 

Thanks!

[MySQL_Narb]

Is this possible with TDs?

 

<td id="thread-<?php echo $thread['id']; ?>" width="63%">

 

$(document).ready(function(event){
    event.preventDefault();
    
    $('td[id|="thread"]').click(function(){
        $(this).live('click', function(){
            alert('test');
        });
    });
});

 

When I click on the td element, nothing comes up. :/

[scootstah]

Two things. event.preventDefault(); doesn't go there. And, you don't need the .live() method inside the .click() method.

[MySQL_Narb]

Two things. event.preventDefault(); doesn't go there. And, you don't need the .live() method inside the .click() method.

 

Thanks, I've got the whole thing working now besides just one little thing:

 

How can I use an AJAX request to retrieve the thread title? I have a PHP file that extracts the title, but I'm not sure how I pass it off to the AJAX request.

 

Or do I simply put: title="<?php echo $title; ?>" into the element.

[MySQL_Narb]

PLEASE IGNORE THE ABOVE POST.

 

My current script:

 

$(document).ready(function(){
    
    $('img[id|="thread"]').dblclick(function (){

        parent = $(this).parent();
        data = parent.html();
        id = $(this).attr('id').split('-')[1];

        //editing mode is true
        isEditing = true;

        parent.html(
            '<input type="text" id="'+ id +'" value="'+ parent.attr('title') +'" size="40">  <img src="../img/forum/cancel.png" id="deny-'+ id +'"> <img src="../img/forum/ok.png" id="accept-'+ id +'">'
        );

    });
    
    //accept
    $(document).on('click', 'img[id|="accept"]', function (){
         document.write($('td[title="title-'+id+'"] a').attr('href'));
    });

    //cancel
    $(document).on('click', 'img[id|="deny"]', function(){
        parent.html(data);
    });
    
});

 

How would I go about, after clicking accept, would I change the href attribute of the anchor tag?

[scootstah]

To change the href, just pass the new value to the second parameter of .attr().

 

var new_href = 'http://google.com';

$('a').attr('href', new_href);

 

Something like that.

[MySQL_Narb]

To change the href, just pass the new value to the second parameter of .attr().

 

var new_href = 'http://google.com';

$('a').attr('href', new_href);

 

Something like that.

 

Gah, I'm asking quite a lot of questions, sorry about that. I think I know how to do what I want to do.

 

$('td[title="title-'+id+'"] a').html()

 

Will this work? Will it get the first anchor element within the element: [tt]<td id="title-406"></td>

[scootstah]

No, that would get all the anchors within the element. By the way, if you already know the ID, you can use a more specific selector. $('td#title-' + id)

 

However, if you use the .eq() method you can target a specific match. So, say we have this:

<div id="test">
    <a href="#">one</a>
    <a href="#">two</a>
    <a href="#">three</a>
</div>

 

Let's say you want to change the color of the second anchor to yellow. If you just did $('div#test a').css('color', 'yellow'); it would change all of them. But if you add .eq(), we can target the second one. $('div#test a').eq(1).css('color', 'yellow');

[MySQL_Narb]

No, that would get all the anchors within the element. By the way, if you already know the ID, you can use a more specific selector. $('td#title-' + id)

 

However, if you use the .eq() method you can target a specific match. So, say we have this:

<div id="test">
    <a href="#">one</a>
    <a href="#">two</a>
    <a href="#">three</a>
</div>

 

Let's say you want to change the color of the second anchor to yellow. If you just did $('div#test a').css('color', 'yellow'); it would change all of them. But if you add .eq(), we can target the second one. $('div#test a').eq(1).css('color', 'yellow');

 

Aha, that's a neat trick. Thank you for sharing that with me.

 

And the text node of the element selected, that's considered one of it's children, correct? So I can just modify the text node to the new title.

 

Uuugh...

 

//accept
    $(document).on('click', 'img[id|="accept"]', function (){
        $('td#title-'+ id +' a').eq(0).css('color', 'white');
    });

 

Doesn't seem to work for me. I've already tested the id variable, and it returns the correct one.

[scootstah]

I would change it to the following:

$('img#accept').click(function(){
        $('td#title-'+ id +' a').eq(0).css('color', 'white');
});

 

If that doesn't work, please include the markup in your next post.

[MySQL_Narb]

I would change it to the following:

$('img#accept').click(function(){
        $('td#title-'+ id +' a').eq(0).css('color', 'white');
});

 

If that doesn't work, please include the markup in your next post.

 

//accept
    $(document).on('click', 'img#accept', function (){
        parent.html(data);
        $('td#td-'+ id +' a').eq(0).css('color', 'red');
        isEditing = false;
    });

 

Updates the parent to the correct HTML, but just doesn't change the font color to red.

 

Markup:

 

http://paste2.org/p/2069727

[MySQL_Narb]

Ignore the above, it's now solved.

 

Thus another question! How would I retrieve the newly created title?

 

$(document).ready(function(){
    isEditing = false;
    
    $(document).on('dblclick', 'img[id|="thread"]', function (){
        
        if(isEditing == false){
            //set editing mode to true, so they can't use this feature until they finish the edit they're on
            isEditing = true;

            parent = $(this).parent();
            data = parent.html();
            id = $(this).attr('id').split('-')[1];

            //editing mode is true
            isEditing = true;

            parent.html(
                '<input type="text" id="'+ id +'" value="'+ parent.attr('title') +'" size="40">  <img src="../img/forum/cancel.png" id="deny"> <img src="../img/forum/ok.png" id="accept">'
            );
        }
        
    });
    
    //accept
    $(document).on('click', 'img#accept', function (){
        parent.html(data);
        $('td#td-'+ id +' a').eq(0).html('<a href="">'+ $('input#'+ id).attr('value') +'</a> <b>Thread updated!</b>');
        isEditing = false;
    });

    //cancel
    $(document).on('click', 'img#deny', function(){
        parent.html(data);
        isEditing = false;
    });
    
});