Set paragraph text with javascript on page load - javascript

Basically all I want to do is set the text of a paragraph using JavaScript/jQuery on page load. This is for a simple Kendo UI app.
Can anyone please give me a method of doing this?
I know this is probably a noob question, but I'm semi inexperienced with JavaScript/jQuery.
This is what I've already tried, but it doesn't seem to be working...
<script type="">
$(document).ready(function () {
$("#mac001OEE").val("0%");
});
This code has been placed in the head of the HTML page.
Thanks :)

Please try .text() good read here: http://api.jquery.com/text/
demo http://jsfiddle.net/FyVzF/13/ or for your specific example using id please see here http://jsfiddle.net/FyVzF/14/
hope this helps!
code
$(document).ready(function() {
$("p").text('test test Rambo');
});
HTML
<p> </p>

Try this only for a particular paragraph with the id "idname":
$(document).ready(function() {
$("p#idname").text('test test Rambo');
});

$(document).ready(function () {
$("#mac001OEE").html("0%");
});
OR
$(document).ready(function () {
$("#mac001OEE").text("0%");
});

Instead of .val() use .text() or .html():
$(document).ready(function() {
$("p").text('saeed');
});
or
$(document).ready(function() {
$("p").html('saeed');
});

For non-input elements you should use html or text methods:
$(document).ready(function () {
$("#mac001OEE").html("0%");
});

Assuming you are trying to set the text of a p element, use text():
$("#mac001OEE").text("0%");
val() is used on elements which have a value attribute, such as input, select and textarea.

Related

clear dom cache of jquery element?

I have an jQuery element $foo
it contain html with a textarea. But if I change the value of textarea and use $foo.html() after this change, the html result is not actualized...
(bad) exemple : http://jsfiddle.net/sNYYD/781/
var $foo = $('#foo'); console.log($foo.html());
$foo.on('keyup', function(){console.log($foo.html());});
how remove or disabled jquery dom cache?
EDIT EXEMPLE ======================================================
I do a simple exemple, but the answer go on bad way, sry about that, my use case is more specefic and looks like this :
http://jsfiddle.net/sNYYD/790/
I need know how found good key to delete in $.cache for my element, to actualise html of element in my global var.
You need to access the actual textarea's value:
var $foo = $('#foo');
console.log($foo.html());
$foo.on('keyup', function(){console.log($foo.find('textarea').val());});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<textarea>testing 123</textarea>
</div>
See the updated fiddle: http://jsfiddle.net/sNYYD/782/
Changing the text in the text-area doesn't affect the actual html, that is why you are always getting the same value. If you need only the text you can use one of the other solutions if however you need the whole html you have to take the value and put it into the actual html like this:
var $foo = $('#foo');
console.log($foo.html());
$foo.on('keyup', function()
{
$("#textArea").html($("#textArea").val());
console.log($foo.html());
});
UPDATE
This is the solution for your new example.
JSFiddle: http://jsfiddle.net/sNYYD/792/
Because textarea only display data via val() not ah html() . You are calling the only HTML But Textarea does not support to display the typed text content via html() function call
var $foo = $('#foo');
console.log($foo.html());
$foo.on('keyup', function() {
console.log($foo.html());
console.log($foo.find('textarea').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- By http://jquery4u.com / Sam Deering -->
<div id="foo">
<textarea>test</textarea>
</div>
Duplicate answers i would say How to get form html() via jQuery including updated value attributes?
and removing or disabling DOM cache using jQuery is not possible i feel.
$(document).ready(function(){
$("textarea").keyup(function(){
$(this).html(console.log($(this).val()))
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<textarea>testing 123</textarea>
</div>

Php simple html dom remove div with specific class

I am using the code bellow to get some content. My problem is that i don't know how to avoid/bypass/remove a specific div.
html Structure:
<div class="post-single-content box mark-links">
<div class="sharebar-wrap">dfdfdfd</div>
</div>
And i an using the code bellow to get the content:
foreach($html->find('div[class=post-single-content box mark-links]') as $table)
{
$arr44[]= $table->innertext ;
}
How can avoid or remove or bypass to grab the div with class sharebar-wrap?
I don't need it!
Cheers!!
You can indeed use jQuery as Héctor E mentioned, otherwise you can use raw javascript :
document.querySelector('.sharebar-wrap').remove();
With javascript:
var aux = document.getElementByClass('sharebar-wrap');
aux.parentNode.removeChild(aux);
With jQuery:
$( ".sharebar-wrap" ).remove()

Setting title attribute with Javascript function

I am trying to find, if I can pass a value on the title attribute of a label element using Javascript?
I have tried the following Javascript code:
function myFunction()
{
return "Hello!";
}
And a piece of HTML code:
<label title="myFunction()">TEST</label>
But, this isn't working. It just show the 'myFunction()' as a text.
Is it possible, what I am trying to do? If yes, what is the correct syntax?
<label id='mylabel'>TEST</label>
<script>
function myFunction() {
return "Hello!";
}
document.getElementById('mylabel').setAttribute('title', myFunction());
</script>
Should do the job. It first selects the label and then sets the attribute.
You can't inline javascript like this.
What you may do is
1) give an id to your label and put this at the end of your body
<script>
document.getElementById('myId').title = myFunction();
</script>
Demonstration
2) if you really want to inline the call, write this at the point where you want your label :
<script>
document.write('<label title="'+myFunction()+'">TEST</label>');
</script>
(this is really not recommended)
Try this way:-
HTML:
<label id="lab">TEST</label>​
JS:
window.onload = function() {
document.getElementById('lab').setAttribute('title','mytitle');
alert(document.getElementById('lab').title);
}​
Refer LIVE DEMO
I got this! If you are using angular you can use this data Binding and call the function
<label title="{{myFunction()}}">TEST</label>

Get a value from an attribute and add it as another attribute?

How can I use jQuery to get a string of text from the onclick attribute and set it as the href attribute.
Here's the fiddle I'm working with: http://jsfiddle.net/MBmt5/
I want to take only TrackPackage.asp?track=95213&ship=OTHER&ShippingMethod=3 from the onclick attribute and prop it to an href attribute
So that it would end up looking like this: http://jsfiddle.net/52Nha/
Unfortunately, I have no idea how to accomplish this. Can anybody help me? Must be compatible with jQuery 1.4.2. Thanks.
Update
Of course I'd begin with:
$(document).ready(function(){
$('span.trackpackagebutton').closest('a').removeAttr('href');
});
​
Ugly but I hope this will help you.
$('a').attr('href',
$('a')[0].getAttribute('onclick')
.replace("window.open('", '').split(',')[0].replace("'", ''))
.removeAttr('onclick');​​​​​​​​​​​​​​​
Working demo - http://jsfiddle.net/MBmt5/5/
Note: Based on your markup structure you can use the right selector and reuse the above code.
E.g: The below code will execute this logic for all the anchors on the page which have onclick attribute which has window.open.
$('a[onclick^="window.open"]').each(function(){
$(this).attr('href',
this.getAttribute('onclick')
.replace("window.open('", '').split(',')[0].replace("'", ''))
.removeAttr('onclick');​​​​​​​​​​​​​​​
});
Here's one way:
http://jsfiddle.net/MBmt5/2/
http://jsfiddle.net/GaZGv/1
var $a = $('span.trackpackagebutton').closest('a');
var href = $a.attr('onclick').split('(')[1].split(',')[0].replace(/'/g, '');
$a.attr('href', href).removeAttr('onclick');
alert(href)​

Using jquery to display value

I have a form with a select currently in use and an empty div (#price) below the form . I was wondering if anyone knew how (using jquery), to make it so that if I chose something in the select, to output it to the box. Or is the best solution to have the prices already loaded into the empty div, and just hide them using css?
$('#selectID').change(function() {
$('#divID').text($(this).find(':selected').text());
});
Or, if you want the value...
$('#selectID').change(function() {
$('#divID').text($(this).val());
});
You could do something like this:
$('#select').change(function() {
$('#price').text($(this).val());
});
Example
What about this:
$("#select-id").change(function() {
$("#price").text($("#select-id").val());
});

Categories