Modifying HTML Text with jQuery or AJAX

Question

Is it possible to use jQuery to modify HTML plaintext?

For example, in this specific case, if I have a time of 18:00 showing in plan HTML text, is it possible to have a drop down list with options for +1, +2, +3 and so forth, or -1, -2, -3 and so forth so that when one of these options is selected, the time changes to 17:00 or 19:00 or whatever depending on the option selected?

If this is possible, what kind of jQuery code would I use, and would there is any limitation? A demonstation on jsFiddle would be appreciated so I can see the code in action, if possible.

The time will be getting pulled from a database using PHP, but it would be displayed in plain HTML text with, perhaps, some CSS styling on it.

Is the text wrapped in an element of any kind? Will it have an id attribute, or class? — David Thomas
– David Thomas, Commented Dec 6, 2011 at 15:32
The text would be in a DIV, either with an ID, a class, or both if needed. — Zach Nicodemous
– Zach Nicodemous, Commented Dec 6, 2011 at 15:36

David Thomas · Accepted Answer · 2011-12-06 16:36:27Z

2

So far as I can tell PHP has no part to play in this solution, since it'll be client-side (given the JavaScript requirement), however one method, using jQuery with the following HTML snippet:

<span id="time">18:00</span>
<select name="modTime" id="modTime">
    <option value="-3">-3</option>
    <option value="-2">-2</option>
    <option value="-1">-1</option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

jQuery:

var curTime = $('#time').text(),
    curTimeHH = parseInt(curTime.split(':')[0],10);
$('#modTime').change(
    function(){
        var modifyBy = parseInt($(this).val(),10);
        curTimeHH = curTimeHH + modifyBy;
        $('#time').text(curTimeHH + ':00');
    });

JS Fiddle demo.

Edited in response to question from OP (in comments, below):

...but it should always add or subtract relative to the original value, if that makes sense. And when you select "0" it should go back to what it originally was. Is that possible?

Yeah, that's possible; it's all about making sure the original time is stored somewhere accessible (you could use just a regular JavaScript variable, but I'm choosing instead to store it in a HTML5 data-* attribute:

var curTime = $('#time').text(),
    curTimeHH = parseInt(curTime.split(':')[0],10);
$('#modTime').change(
    function(){
        $(this).attr('data-originalTime',curTime);
        var modifyBy = parseInt($(this).val(),10);
        curTimeHH = parseInt($(this).attr('data-originalTime'),10) + modifyBy;
        $('#time').text(curTimeHH + ':00');
    });

JS Fiddle demo.

References:

jQuery, from the jQuery API:
- .attr().
- .change().
- .text().
JavaScript, from the Mozilla Developer Network's JavaScript resource:
- parseInt().
- split().

edited Dec 6, 2011 at 16:36

answered Dec 6, 2011 at 16:00

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

2 Comments

Zach Nicodemous Over a year ago

This works quite well, but it should always add or subtract relative to the original value, if that makes sense. And when you select "0" it should go back to what it originally was. Is that possible?

Zach Nicodemous Over a year ago

sorry to ressurrect this, but is there any way to detect when the time is going to go past midnight? This is for a clock, so for example, if its 19:00 and you add 6 hours, it should take it to 01:00 but instead it changes to 25:00, which by the logic of the code is right. Is there any way to modify it to detect when its going to go past 24:00 and reset to 00:00, and vice versa if you are deducting time?

Gabriel Gartz · Accepted Answer · 2011-12-06 15:46:45Z

1

You can use jQuery.html() function or I think in this case the best choise would be jQuery.text() to stripe string from an element. Then you can parse it however you want to manipulate.

Something like this:

var elTime = $(".myTime"); //My element that contains time string
var originalTime = elTime.text();
function setNewValue(diff) {
    var splitStr = originalTime.split(':');
    elTime.text(splitStr[0]+diff + ":" splitStr[1]);
}
// observe your drodownlist for changes and call new value function
$(".dropDownList").change(function() { setNewValue($(this).value()); });

You can go advanced using Date manipulation: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date

answered Dec 6, 2011 at 15:46

Gabriel Gartz

2,87024 silver badges24 bronze badges

1 Comment

cwhelms Over a year ago

You might need to add a %24 on the hour if this is time of day and not a timer.

Filip · Accepted Answer · 2011-12-06 15:41:23Z

0

Rather than using html() I think you should use .text() if it's only text you will modify. http://api.jquery.com/text/

jQuery have a very nice example that should point you in the right direction.

<!DOCTYPE html>
<html>
<head>
  <style>

  p { color:blue; margin:8px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Test Paragraph.</p>
<script>$("p").text("<b>Some</b> new text.");</script>

</body>
</html>

answered Dec 6, 2011 at 15:41

Filip

2,52217 silver badges29 bronze badges

Comments

Viruzzo · Accepted Answer · 2011-12-06 15:32:38Z

-1

http://api.jquery.com/html/ is what you need. It replaces the content of an element with other HTML.

answered Dec 6, 2011 at 15:32

Viruzzo

3,02516 silver badges13 bronze badges

Collectives™ on Stack Overflow

Modifying HTML Text with jQuery or AJAX

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related