[javascript] 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?

This question is related to javascript jquery html jquery-mobile

The answer is


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/


"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


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

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to jquery-mobile

How to auto adjust the div size for all mobile / tablet display formats? how to get value of selected item in autocomplete jQuery Cross Domain Ajax How to set cookie value with AJAX request? Disable scrolling when touch moving certain element disable past dates on datepicker Custom Input[type="submit"] style not working with jquerymobile button jQuery Mobile: document ready vs. page events How to redirect on another page and pass parameter in url from table? Remove attribute "checked" of checkbox