jQuery: Using Selectors on HTML from an Attribute - javascript

I have some HTML that is stored as an attribute on a tag. I can access it in jQuery using
$("input[id$='_myField_hiddenSpanData']").attr("value")
This looks like this:
"<span id='spantest\user' tabindex='-1' contentEditable='false' class='ms-entity-resolved' title='test\user'><div style='display:none;' id='divEntityData' key='test\user' displaytext='Test User' isresolved='True' description='test\user'><div data=''></div></div><span id='content' tabindex='-1' contenteditable onMouseDown='onMouseDownRw();' onContextMenu='onContextMenuSpnRw();' >Test User</span></span>"
I would need the value of the key attribute (test\user). Can I somehow tell jQuery to parse a block of HTML and apply selectors to it? I found I can wrap it into a new jQuery object by wrapping it into another $(): $($("input[id$='_myField_hiddenSpanData']").attr("value")) but I still did not manage to apply a selector on it.
Any hints? And no, sadly I do not control the markup that generates the hidden field.

Wrap your crappy markup with a jQuery object, and then use the find function to apply a selector to it...
var crappyHtml = $("input[id$='_myField_hiddenSpanData']").attr("value");
var key = $(crappyHtml).find("div[key]").attr("key");
alert(key);

Try this:
var html = $("input[id$='_myField_hiddenSpanData']").attr("value");
var user = $(html).find("#divEntityData").attr("key");
alert("user=" + user);

You should be able to pass it as a context. Does this work?:
$('#divEntityData', $($("input[id$='_myField_hiddenSpanData']").attr("value"))).attr('key');

Related

Setting content of an element in tinymce textarea

I have a tinymce textarea (TinyMCE 3.5.11) that contains an element like
<span id="lastreplytimeee">...</span>
I need to access and change the content of this element using the span id as selector.
I have tried things like
tinyMCE.DOM.setHTML('lastreplytime', $input.val());
None worked.
Any suggestions?
this line is within .ready:
$().ready(function() {
jQuery('.flexy_datepicker_input').datetimepicker({
lang:'tr',
format:'Y-m-d H:i:s',
dayOfWeekStart:1,
onChangeDateTime:function(dp,$input){
document.getElementById("lastreplytimeee").innerHTML = $input.val();
}
});
});
1.Maybe try it,this code gets TinyMCE content and then replace some elements (TinyMCE 5)
tinymce.get('TinyMceID').setContent(
tinymce.get('TinyMceID').getContent().replace(
$(tinymce.get('TinyMceID').dom.doc.getElementById('lastreplytimeee')).get(0).outerHTML,
`<span id="lastreplytimeee">` + newValue + `</span>`)
)
2.or use this
tinymce.get('TinyMceID').dom.setHTML("lastreplytimeee", "newValue");
document.getElementById("id") gets the reference to that particular tag.
.innerHTML is to say assign value or display values in the HTML at that particular div you are referring to above.
Try to use-
document.getElementById("lastreplytimeee").innerHTML = $input.val();
If you are using jQuery, try this-
$("#lastreplytimeee").html = $input.val();
Hope it helps :) Happy Coding!
Found the solution, tinymce requires its dom utility to access and play with an element inside it, like:
tinyMCE.activeEditor.dom.setHTML(tinyMCE.activeEditor.dom.select('selector'), 'some inner html');

Extract div data from HTML raw DIV text via JS

I'm trying to extract data from a JS function that only renders an element's HTML - and I need the element's ID or class.
Example:
JS Element Value:
x = '<div class="active introjs-showElement introjs-relativePosition" id="myId">Toate (75)</div>';
I need to do get the element's id or class (in this case the id would be myId).
Is there any way to do this? Strip the tags or extract the text via strstr?
Thank you
The easiest thing to do would be to grab the jQuery object of the string you have:
$(x);
Now you have access to all the jQuery extensions on it to allow you to get/set what you need:
$(x).attr('id'); // == 'myId'
NOTE: This is obviously based on the assumption you have jQuery to use. If you don't, then the second part of my answer is - get jQuery, it's designed to make operations like these very easy and tackle compatibility issues where it can too
You may want to take a look at this:
var div = document.createElement('div');
div.innerHTML = '<div class="active introjs-showElement introjs-relativePosition" id="myId">Toate (75)</div>';
console.log(div.firstChild.className);
console.log(div.firstChild.id);

Grabbing text from a span tag

I have some code for Javascript using jQuery, and I've been wondering how to fix an element of it.
var dataGiven = +$("span.cost-in-usd:first-child").text();
However, the span tag is:
<span class="cost-in-usd" data-se="product-usd-value">42</span>
Is there a way of modifying my code in order for it to recognise data-se?
Yes, use data.
var datase = $('.cost-in-usd').data('se');
Some links;
http://api.jquery.com/jquery.data/
Here's a jsfiddle
The following will return the value of attribute
$('.cost-in-usd').attr('data-se');

Save data in html tag attribute

How save some data as html tag atribute? For example, given data asd/45.33/blah, I need save this data in html and after using jquery get this data so:
$("#my_tag").attr("special_attribute");
its possible?
Using custom attributes makes your document invalid, you can use HTML5 data-* attributes and for getting/setting values using jQuery, you can use data method, for example if you have a data attribute called data-special you can get the value of it in this way:
var value = $("#my_tag").data("special");
and set/change the value in this way:
$("#my_tag").data("special", "value");
http://api.jquery.com/data/
If you need to use it with jQuery then a better way to do it is to use data- attibutes.
Declaring a html tag will look like:
<div id="myDiv" data-url="asd/45.33/blah"></div>
Using data is as simple as:
var url = $('#myDiv').data('url')
More about jQuery data.
Question about attr vs data.
USE attr() it is used for getting the value as well as for setting the attribute value.
$("#my_tag").attr("special_attribute",'asd/45.33/blah');
Details http://api.jquery.com/attr/
Yes it is possible. However it won't validate.
Yes you can. I think you should use an hidden field for this purpose:
<input type="hidden" id="my_tag" />
and then access it via jquery :
$("#my_tag").attr("value", "myvalue");
$("#my_tag").attr("value");
You can save value in html element as :
$("htmlelement").data("key","value");
in your case it would be :
$("#my_tag").data("special_attribute","asd/45.33/blah");
var html = "<p>HTML</p>";
$("#my_tag").attr("special_attribute", function() {
return html;
});
Now retrieve it with:
var s = $("#my_tag").attr("special_attribute");
alert(s)

How to read the contents of text area by jQuery?

<textarea id="metaSourceText" name='key' style="width:100%" class="text ui-widget-content ui-corner-all" rows="1"></textarea>
I tried
$metaSourceValue = $('metaSourceText').val();
alert($metaSourceValue);
But it shows "undefined"
Your code just needs to be tweaked, to something like this:
var metaSourceValue = $('#metaSourceText').val();
alert(metaSourceValue);
you were missing the hash before metaSourceText, signaling an ID to jQuery. And you typically don't want to start variables with $
You missed the # character in $('#metaSourceText')
.text() method will also give you value of textarea. In ready() state you can either get object of textarea using class selector or id selector.
$(document).ready(function () {
$("#submitbtn").click(function () {
var textAreaValue = $("#txtMessage").text();
alert(textAreaValue);
});
});
Check sample here: http://www.codegateway.com/2012/03/get-textarea-value-in-jquery.html
Please define the selector with '#' prefix as it is an ID you are referring.
In your case, it refers a DOM element of type metaSourceText which really does not exists..
To get a value of this text area:
you can use .text() or val();
$(function(){
var textareaContent = $('#metaSourceText').text();
alert(textareaContent);
​}​);​
fiddle link:http://jsfiddle.net/Ds4HC/1/
Javascript variables don't start with $. EDIT: They can, but usually do not. See
Why would a JavaScript variable start with a dollar sign?)
You want to try:
var metaSourceValue = $('#metaSourceText').val();
alert(metaSourceValue);
The $(...) used by jQuery is a shortcut to the jQuery function.
Also, as others mentioned, you need $('#metaSourceText') if you're trying to reference the textarea by id - you were missing the #.

Categories

Resources