CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
oivindth
oivindth

Reputation: 870

Jquery change <p> text programmatically

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?

Upvotes: 71

Views: 201460

Answers (3)

Ram
Ram

Reputation: 144689

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

$('button').click(function(){
     $('#pTest').text('test')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

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

Upvotes: 127

Juan Leung
Juan Leung

Reputation: 356

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");

Upvotes: 0

Sinetheta
Sinetheta

Reputation: 9429

"saving" is something wholly different from changing paragraph content with jquery.

If you need to save changes you will have to write them to your server somehow (likely form submission along with all the security and input sanitizing that entails). If you have information that is saved on the server then you are no longer changing the content of a paragraph, you are drawing a paragraph with dynamic content (either from a database or a file which your server altered when you did the "saving").

Judging by your question, this is a topic on which you will have to do MUCH more research.

Input page (input.html):

<form action="/saveMyParagraph.php">
    <input name="pContent" type="text"></input>
</form>

Saving page (saveMyParagraph.php) and Ouput page (output.php):

Inserting Data Into a MySQL Database using PHP

Upvotes: 0

Related Questions