www.webdeveloper.com
Results 1 to 11 of 11

Thread: How to change backgroundcolor after click

  1. #1
    Join Date
    Jul 2010
    Posts
    135

    How to change backgroundcolor after click

    Hello,
    I have such code

    Working:
    Code:
    <a href='localhost' onclick='$.post("index.php?action=ax&save=1", { tname: "basic", rid: "3", col:"id", val:$(this).prev().val() } );$(this).next().html(" Saved!"); return false;'>Save!</a><span></span>
    I would like to do things. 1) to change text in span to "" and 2) to change background of it.

    When I click on anchor, so "Saved!" with green backround will appear. And it would disappear after 1500 ms.

    Not working try:
    Code:
    <a href='localhost' onclick='$.post("index.php?action=ax&save=1", { tname: "basic", rid: "3", col:"id", val:$(this).prev().val() } );$(this).next().html(" Saved!"); $(this).delay(1500).next().text("");;return false;'>Save!</a><span></span>
    Last edited by crazy boy; 08-31-2011 at 04:56 AM.

  2. #2
    Join Date
    Jul 2010
    Posts
    135
    I tryied few things:

    Code:
    <a href='localhost' onclick='$.post("index.php?action=ax&save=1", { tname: "me", rid: "3", col:"id", val:$(this).prev().val() }, function(data) {}, "html");;$(this).next().html("Saved!").addClass("on"); $(this).next().fadeout(1500);;return false;'>Save!</a><span></span>
    This fails with report that fnc fadeout doesn't exist...
    When I try to debug

    Code:
    <a href='localhost' onclick='$.post("index.php?action=ax&save=1", { tname: "me", rid: "3", col:"id", val:$(this).prev().val() }, function(data) {}, "html");;$(this).next().html("Saved!").addClass("on"); console.log($(this).next());;return false;'>Save!</a><span></span>
    I got this span object (that should be ok):
    [span.on]

    So why I got the report?

  3. #3
    Join Date
    Sep 2009
    Posts
    159
    I tried below and it worked.
    Code:
    <html>
    <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
    		$(document).ready(function()
    		{
    			$('#link').click(function()
    			{
    				$.ajax(
    				{
    					url: 'dummy.php',
    					type: 'POST',
    					data: {action: '1'},
    					error: function(obj, status, error)
    					{
    						alert(error)
    					},
    					success: function()
    					{
    						$('#change').text("Saved!");
    						$('#change').css("background-color", "green");
    					}
    				});		
    			});
    		});
        </script>
    </head>
    <body>
    	<div id="link"><span id="change">Save!</span></div>
    </body>
    </html>
    The dummy.php resides on the same folder as this script and has only <html></html> in it.
    Last edited by pactor21; 08-31-2011 at 05:46 PM.

  4. #4
    Join Date
    Jul 2010
    Posts
    135
    Quote Originally Posted by pactor21 View Post
    I tried below and it worked.
    Thanks for your code.

    I have no problem to change background when I click on anchor. The problem was that is does not turn back after some time. I also think about skipping the delay or fadeout and to try do it as follows: If I edit a element and click on Save, then it is displayed "Saved!" with green background. If I would focus the form element again, to edit it again, then the default class would be added and "" text will display. This sound pretty simple.

    I tried to find some simpler solution using "this" and referring to next sibling. I use 27 anchors that can save up to 27 elements. Also 27 spans to display action status. So I think it would be good to find more relative way rather than absolute way using 2x27 id's.

    To the delay command.
    Code:
    $(this).next().fadeout(1500)
    Do you have an idea why the fadeout doesn't work?
    Last edited by crazy boy; 08-31-2011 at 06:39 PM.

  5. #5
    Join Date
    Sep 2009
    Posts
    159
    Which part of the a tag are you trying to include in the call-back function? As the code is at the moment, your call-back function isn't supposed to do anything.

    Code:
    $.post("index.php?action=ax&save=1", { tname: "me", rid: "3", col:"id", val:$(this).prev().val() }, function(data) {}...}
    Do you see the curly braces after function(data) without anything in them? That's where I can tell your function isn't meant do anything. Besides, you might have some syntactical error there. I don't think .post() API can have more than 3 parameters, and you have more after your call back function.

    One more thing, your lateral way of coding kills my eye to read all those in the parentheses. When you want to something to happen as a function, try to define a function in your script and call it where needed in any tag you want.

  6. #6
    Join Date
    Jul 2010
    Posts
    135
    Thanx for reply.

    To the .post() arguments:

    http://api.jquery.com/jQuery.post/

    This is a shorthand Ajax function, which is equivalent to:

    $.ajax({
    type: 'POST',
    url: url,
    data: data,
    success: success,
    dataType: dataType
    });
    jQuery.post( url, [data], [success(data, textStatus, jqXHR)], [dataType] )

    urlA string containing the URL to which the request is sent.

    dataA map or string that is sent to the server with the request.

    success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.

    dataTypeThe type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).
    --------------

    To the code of mine:

    Yesterday I placed some code in the anonymous function. No I do know know why it is empty now, maybe I wanted to simplify the code or forgot to insert the code in. I tried something like onclick"that=this;.post(...,...,function (data,that){console.log(that)})"

    Which part of the a tag are you trying to include in the call-back function? As the code is at the moment, your call-back function isn't supposed to do anything.
    If I did not write it here, then something like this
    Code:
    $(that).next().text("Saved!");
    should be in the call-back function, where "that" is the anchor object. I will add condition later to it.

  7. #7
    Join Date
    Jul 2010
    Posts
    135
    I'm little confused because I have two threads that concerns same script
    This is the code to adjust class

    Code:
    $(that).next().remove("off").append("on");

  8. #8
    Join Date
    Sep 2009
    Posts
    159
    I'm sorry, but I lost track of what you intend to do with the call-back function. Would you write the function in a cleaner way so I can see your point better?

  9. #9
    Join Date
    Aug 2011
    Posts
    3
    fadeout doesn't work.. You have write "O" capital.

    Code:
    $(selector).fadeOut(1500);

  10. #10
    Join Date
    Jul 2010
    Posts
    135
    I tried to do it with callback function. Nevertheless, a problem with that occurred:

    error:
    $(that).delay is not a function
    on line 27: [Break On This Error] $(that).delay(1500).queue(



    Code:
    <script type="text/javascript" >
      var callBackFnc = function(result){
      that = this; 
      return function(result)
        {
        if (result=="Data succesfuly updated.") <!-- this is reply from server to AJAX -->
          {
          $(that).next().text("Saved");<!-- that refers on anchor; this is OK, span set! -->
          $(that).delay(1500).queue( <!-- error -->
            function()
              { $(that).next().text("").removeClass("off");
                $(that).dequeue();
              }
            );
          }
        }
      }
       
    </script>
    
    <body>
    <textarea id=id cols="1" rows="1" >Some text here</textarea>
    
    <a class=save href='localhost' onclick='var myfnc = callBackFnc.call(this);$.post("ax.php?action=post&save=1", { tabName: "basic", rid: $("textarea#id").val(), col:"id", val:$(this).prev().val() }, function (result){ myfnc(result);}, "html");return false;'>Save!</a>
    
    <span></span> 
    
    </body>
    I also pasted the code on Jquery official site, where it is with colors (that helps much!):
    colored code here

    The code above should change text in span to Saved! and then this text should disappear after 1.5 s. The Saved! text will appear only if "Data succesfuly updated." comes from server.
    Last edited by crazy boy; 09-02-2011 at 03:52 AM.

  11. #11
    Join Date
    Sep 2009
    Posts
    159
    I don't really understand how .queue API works on jQuery, but according to the official page, it can have 1 or 2 parameters.

    When it has a parameter only, the parameter SHOULD be queue name, not a call back function.

    When it has 2 parameters, then the first one is the queue name and the second one is the call back function.

    Your code has only one parameter, so that parameter is assumed to be the queue name by the jQuery. However you're passing a function as the sole parameter. I don't think that logic should work.

    Here is the official page link for the .queue API:
    http://api.jquery.com/queue/

    [EDIT] I was totally wrong. It CAN have a call back function as the sole parameter. This whole thing is way over my head now. sorry.
    Last edited by pactor21; 09-02-2011 at 04:09 AM.

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