www.webdeveloper.com
Results 1 to 9 of 9

Thread: Save and Cancel buttons should display

  1. #1
    Join Date
    Nov 2007
    Posts
    25

    Save and Cancel buttons should display

    I have some javascript code that is being moved from one site to another. In my original site when I am in a page profile.php when I click on an edit button all my form fields are made editable when I click on a Edit text and a two new buttons save and cancel appear.

    First the html around the section I am having a problem with
    Code:
    <form name="editProfile" id="editProfile">
         <tr bgcolor="#E4E9ED" class="mid">
            <td bgcolor="#E4E9ED" class="BOT"><div align="left"><strong>
               <?=$first_name." ".$last_name?>  </strong></div>
            </td>
            <td align="right" bgcolor="#E4E9ED" class="BOT"><strong> <span                      class="mid" id="editProfLink" style="cursor:pointer;cursor:hand ; font-weight:bold" onclick="makeEditableProfile()">Edit profile</span> <span id="savingProfile" style="display:none">Saving...</span> </strong> <span id="editProfileBut" style="display:none">
    
         <input name="save" type="button" onclick="editProfileProc()" id="save"       value="Save" class="mid" />
         <input name="cancel" type="button" id="cancel" value="Cancel" onclick="makeReadonlyProfile()" class="mid" />
         </span> </td>
    </tr>
    When I click on Edit profile it calls the javascript makeEditableProfile() show below

    Code:
    function makeEditableProfile() {
    	var ob = document.editProfile;
    	for (i = 0; i < ob.elements.length; i++) {
    		if (ob.elements[i].type == "text") {
    			ob.elements[i].className = 'edit';
    			ob.elements[i].readOnly = false;
    
    		}
    	}
    	$('editProfLink').style.display='none';
    	$('editProfileBut').style.display = '';
    }

    If I understand correctly this javascript should chang the style editProfileBut to be displayed which will then have it display the buttons.

    I've verified this is css related by turning off css in firefox and all the various buttons appear. I'm just not sure what is going wrong in the actually site. I am especially wondering what would stop working as I move from one site to another.

    Thanks for any help

  2. #2
    Join Date
    Jan 2008
    Posts
    28
    $('editProfLink').style.display='none';
    pretty sure the actual code should be
    Code:
    style.display = 'hidden';

  3. #3
    Join Date
    Nov 2007
    Posts
    25
    Quote Originally Posted by jake_d
    pretty sure the actual code should be
    Code:
    style.display = 'hidden';
    The site I am workin one essentially is moving working code from one site to a new one with a different look and feel. So this code actually worked on an old site so I am trying to think what could be changing between the sites that I am missing

  4. #4
    Join Date
    Jan 2008
    Posts
    28
    not sure, but maybe since you last used your site, you downloaded a more modern browser. I just checked to make sure, 'none' is not a valid css attribute for visibility.

    EDIT: just realized you are using display as opposed to visibility (sorry I only use visibility, so I automatically see it instead of display). None is a valid css property for display, so I have no idea why that doesn't work. Sorry.
    Last edited by jake_d; 03-30-2008 at 10:23 PM.

  5. #5
    Join Date
    Nov 2007
    Posts
    25

    Same browser for both sites

    The old site is still active and works in the same browsers I am having the problem with the new site. IE 7 and Firefox. I did check the standards


    CSS properties can also be dynamically changed with a JavaScript.
    Scripting Syntax: object.style.display="none"


    http://www.w3schools.com/css/pr_class_display.asp

    So it appears the syntax is correct. My problem isn't buttons disappearing but that they are not appearing.

  6. #6
    Join Date
    Jan 2008
    Posts
    28
    do you change the display style back to "block"?

  7. #7
    Join Date
    Nov 2007
    Posts
    25

    Back?

    I am not sure what you mean by back. It never was set to block on the old or new platform

  8. #8
    Join Date
    Jan 2008
    Posts
    28
    well, if you want something to reappear after setting it's display to none, the traditional way of doing this is to change it's display attribute to block. You know what might be the the problem? Maybe your old style sheet had all <p> tags or even the body display set to "block" so that when you set those button's display to null, it automatically went back to block. However, in you new style sheet there is no default display to block. Maybe that's it.

  9. #9
    Join Date
    Nov 2007
    Posts
    25
    I tried this change but did not resolve the problem

    function makeEditableProfile() {
    var ob = document.editProfile;
    for (i = 0; i < ob.elements.length; i++) {
    if (ob.elements[i].type == "text") {
    ob.elements[i].className = 'edit';
    ob.elements[i].readOnly = false;

    }
    }
    $('editProfLink').style.display='none';
    $('editProfileBut').style.display = 'block';

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles