jQuery Data Change Data one button was click

Question

I am trying to change my last name once the button was click.

I am currently using jQuery.data to do this. Although I understand that these can be done using other form but I need to use jQuery.data here for my application.

Here's my markup code so far:

<div id="container">
 My complete name is <span></span> D. <span></span>
</div>

<button type="button" id="btnID" onclick="changebtn()">Set Last Name to Smith </button>

Here's my jQuery codes:

var holder = $( "#container" )[0];

    jQuery.data( holder, "data", {
      firstname: "Sam",
      lastname: "Norton"
    });

    $( "span:first" ).text( jQuery.data( holder, "data" ).firstname );
    $( "span:last" ).text( jQuery.data( holder, "data" ).lastname );

    function changebtn(){

    }

Here's my jSFIDDLE: http://jsfiddle.net/vzzscnmr/1/

Any ideas?

NOTE: We need to use jQuery.data specifically on this part NOT A SIMPLE JQUERY SOLUTION.

Could you explain why you feel you need to use the .data() method? — Sverri M. Olsen
– Sverri M. Olsen, Commented Jan 11, 2015 at 10:12
You are setting the data, only to retrieve it right away. Why? — Lg102
– Lg102, Commented Jan 11, 2015 at 10:14

alquist42 · Accepted Answer · 2015-01-11 10:25:00Z

2

Try this:

var holder = $( "#container" )[0];

jQuery.data( holder, "data", {
  firstname: "Sam",
  lastname: "Norton"
});
setNames();

$('#btnID').click(function(event){

   event.preventDefault() ;
   jQuery.data( holder, "data", {firstname: "Smith"});
   setNames();

});

function setNames() {
    $( "span:first" ).text( jQuery.data( holder, "data" ).firstname );
    $( "span:last" ).text( jQuery.data( holder, "data" ).lastname );
}

also changed html onclick to jQuery handler...

JSFiddle here

answered Jan 11, 2015 at 10:25

alquist42

7491 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sverri M. Olsen · Accepted Answer · 2015-01-11 10:26:32Z

I have commented the code quite well, instead of explaining it in prose here. Your question does not explain very well exactly what you want to achieve, so if my answer is off base then please let me know.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="nameContainer">My complete name is <span></span> D. <span></span></div>
<button id="theButton">Set Last Name to Smith</button>
<script>
$(function () {

    // Instead of grabbing the first element using [0]
    // you can just use the :first selector
    var nameCont = $("#nameContainer:first");

    // You can attach data directly to selections
    // I am assuming you need the data to be attached
    // to something because you want to use it
    // later... otherwise there would not be much
    // reason to save it like this.
    nameCont.data({
        firstname: "Sam",
        lastname: "Norton"
    });

    // Simply find the span and then set the text
    nameCont.find("span:first").text(nameCont.data("firstname"));
    nameCont.find("span:last").text(nameCont.data("lastname"));

    // Using the `onclick` HTML attribute is something
    // people used to do "in the old days". Putting your
    // events in your Javascript is a neater way of doing
    // it. jQuery has a host of events you can use, such
    // as this click event:
    $("#theButton").click(function () {

        var newLastname = "Smith";

        // Set the new name
        nameCont.find("span:last").text(newLastname);

        // You are using the .data() method so I assume
        // you want to reflect the change there as well:
        nameCont.data("lastname", newLastname);
    });

});
</script>

Lg102 · Accepted Answer · 2015-01-11 10:01:39Z

0

You don't need data to do this. Pass the string containing the name to the .text() method.

var holder = $( "#container" ),
    firstnameElement = holder.find('span:first'),
    lastnameElement = holder.find('span:last');

firstnameElement.text('Sam');
lastnameElement.text('Norton');

function changebtn(){
   lastnameElement.text('Smith');
}

$('#btnID').click(changebtn);

Secondly, so can clean up your html by binding the event in code, instead of setting an onclick attribute.

Have a look at your updated fiddle to see it in action.

answered Jan 11, 2015 at 10:01

Lg102

4,9483 gold badges41 silver badges64 bronze badges

1 Comment

Kimberly Wright Over a year ago

Hi log not what I am looking for I need to use data() here to do that. I am working in a data attribute driven program here that's why I use the data attribute here.

Collectives™ on Stack Overflow

jQuery Data Change Data one button was click

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related