SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    reveal content on click

    Hello.

    I understand how to reveal content within a div using hover, but how would I reveal content on click.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jaynesh View Post
    I understand how to reveal content within a div using hover, but how would I reveal content on click.
    By using scripting to assign an onclick event to a suitable element, which would trigger a function to reveal the appropriate content.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I originally posted this in CSS but it got moved to JS.

    I don't know much about JS.

    This is what I am trying to do.
    I have some data in mysql which is being outputted via php.
    When a user clicks 'edit'. the text will be replaced by a form.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jaynesh View Post
    I don't know much about JS.
    Do you want to learn how to do it yourself, or would you prefer to employ someone else to do it for you?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would love to learn javascript but my main focus right now is PHP. I'm also using some jQuery in my code, so a jQuery method is preferred.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jaynesh View Post
    I would love to learn javascript but my main focus right now is PHP. I'm also using some jQuery in my code, so a jQuery method is preferred.
    Then may I suggest that you continue along the PHP path, as that is the way that normally such edit field things are performed.

    The edit button (or link) is clicked, which submits as the action and a line number.
    The PHP script then creates a new version of the page where the appropriate line number uses a form input instead.

    Once you have that side of things working, only then would JavaScript become involved to perform a small improvement to the user experience. The difference being to still send the action and line number to a PHP script, but instead to receive only the HTML that needs to be updated.

    So get the editing side of things working first in PHP, and after that other things can be looked in to.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Then may I suggest that you continue along the PHP path, as that is the way that normally such edit field things are performed.

    The edit button (or link) is clicked, which submits as the action and a line number.
    The PHP script then creates a new version of the page where the appropriate line number uses a form input instead.

    Once you have that side of things working, only then would JavaScript become involved to perform a small improvement to the user experience. The difference being to still send the action and line number to a PHP script, but instead to receive only the HTML that needs to be updated.

    So get the editing side of things working first in PHP, and after that other things can be looked in to.
    Hi, thank you for your response.

    I have already created a form which updates the data.
    What I want to do is replace the text with the form when a user clicks edit.
    (similar to the way it works on this forum. when you want to edit your post it replaces the text with the form.)

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jaynesh View Post
    Hi, thank you for your response.

    I have already created a form which updates the data.
    What I want to do is replace the text with the form when a user clicks edit.
    (similar to the way it works on this forum. when you want to edit your post it replaces the text with the form.)
    When you click the edit button, the web page sends a request to a php script to retrieve the edit panel for that particular message.

    Here's the URL that the request is sent to.
    Code:
    [http://www.sitepoint.com/forums/ajax.php?do=quickedit&p=4920153
    What happens though when scripting is not available? You instead go along to this link, where the edit can also be performed.
    Code:
    http://www.sitepoint.com/forums/editpost.php?do=editpost&p=4920153
    It is that fundamental basis which underlies the technique that you want to achieve. Start with PHP scripting to perform the base actions that you wish to perform, and only once the you have those fundamental basics working do you use scripting to request the parts that you require from your working base.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thank you for your response.

    As mentioned earlier, I have already created a query and a form that allows me to edit the data.

    What I want to do is when I click the "edit" button the data is replaced with the form, without having to move to another page.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jaynesh View Post
    What I want to do is when I click the "edit" button the data is replaced with the form, without having to move to another page.
    You will need a PHP script that provides the HTML content for the edit section, so that the web page can request that content for the appropriate line.
    Once the Ajax request receives that data, you can then place that data in the page where you need it.

    The best way that I've found for people to learn how to use Ajax in safe and effective ways is via the book Bulletproof Ajax
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I've managed to replace the text with a form when a link clicked but when I implement this into my output loop in php it replaces the first row, not the row that I clicked edit on.

    Code:
    $(document).ready(function() {
      $("#editbutton").click(function() {
        $("#postcontainer").replaceWith(
        
        
        '<form name="form1" method="post" action=""><p><label for="textarea"></label><textarea name="editpost" id="textarea" cols="45" rows="5"></textarea></p><p><input type="submit" name="editpost_submit" id="button2" value="Submit"></p></form>'
    
    ); 
      });
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •