Jquery change <p> text programmatically

49

EDIT: The solution was to add this to the profile page instead of the gender page.

$('#profile').live( 'pageinit',function(event){
$('p#pTest').text(localStorage.getItem('gender'));

});

I have a paragraph with som text in a listview that I want to change programatically from another page after clikcing save.

EDIT: This is my listview in profile.html. When you click on the item you get to another page where you can save your gender. I want to change the paragraph in this listview to the gender that was changed from the other page.

<ul data-role="listview"   >
    <li><a href="gender.html">
        <img src="images/gender2.jpg" />
        <h3>Gender</h3>
        <p id="pTest">Male</p>
    </a></li> </ul>

The gender html page is just basic stuff with two radio buttons and a save button. Here is my javascript code(in a seperate file):

$('#gender').live('pageinit', function(event) {

    var gender = localStorage.getItem('gender');
    var boolMale = true;
    if (gender == "female") boolMale = false;
    $('#radio-choice-male').attr("checked",boolMale).checkboxradio("refresh");
    $('#radio-choice-female').attr("checked",!boolMale).checkboxradio("refresh");

    $('#saveGenderButton').click(function() {
        if ($('#radio-choice-male').is(':checked'))
            localStorage.setItem('gender', "male");
        else localStorage.setItem('gender', "female");

        $('#pTest').html('test'); //does not work
         //$('p#pTest').text('test'); //does not work
         //$('#pTest').text('test'); //does not work
        $.mobile.changePage("profile.html");
    });
});

I have tried this with javascript: $('p#pTest').text('test');

The text does not change however. (I know that the save button works). Is this possible?

This question is tagged with javascript jquery html jquery-mobile

~ Asked on 2012-05-07 17:00:03

The Best Answer is


83

Try the following, note that when user refreshes the page, the value is "Male" again, data should be stored on database.

<p id="pTest">Male</p>
<button>change</button>

<script>
$('button').click(function(){
     $('#pTest').text('test')
})
</script>

http://jsfiddle.net/CA5Cs/

~ Answered on 2012-05-07 17:02:42


0

It seems you have the click event wrapped around a custom event name "pageinit", are you sure you're triggered the event before you click the button?

something like this:

$("#gender").trigger("pageinit");

~ Answered on 2012-05-07 17:26:03


Most Viewed Questions: