CODEWITHSUNDEEP
javascriptjquerycustom-data-attribute
Kimberly Wright
Kimberly Wright

Reputation: 531

jQuery Data Change Data one button was click

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.

Upvotes: 2

Views: 1406

Answers (3)

Sverri M. Olsen
Sverri M. Olsen

Reputation: 13283

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>

Upvotes: 1

alquist42
alquist42

Reputation: 749

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

Upvotes: 2

Lg102
Lg102

Reputation: 4898

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.

Upvotes: 0

Related Questions