Add attribute to an object - javascript

How can I change the attribute of a tag in some HTML code given as an object?
Currently, if I do:
console.log(gallery.currItem);
I get:
So I then did:
console.log(gallery.currItem.html);
And I get the HTML in console (not as an object, I believe it's just as texy):
<video width="500" height="250" controls><source src="" type=""></video>
But I'm not sure how I would edit the video tag by adding the attribute muted="muted".
I tried:
console.log($(gallery.currItem.html).find('video'));
But this returned an object again. :/

I assume you are using PhotoSwipe. gallery.currItem.html is not a string but an actual html element.
You can just directly edit the attributes of it:
gallery.currItem.html.setAttribute("muted", "muted");
To make sure it's an actual element, if in question, do this:
if(gallery.currItem.html.tagname) {
gallery.currItem.html.setAttribute("muted", "muted");
} else {
// append it to the dom or wrap it into jquery and then set the attributes
gallery.currItem.html = $(gallery.currItem.html).attr("muted", "muted")[0];
}

try this.
$(gallery.currItem.html).attr("muted", "muted");

Answer:
$(gallery.currItem.container.lastChild).attr('muted', 'muted');

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

Jquery how do we add custom attribute to <img>

I just want to add custom attribute to <img> tag which is created inside Jquery plugin....
this._image = L.DomUtil.create('img', 'leaflet-image-layer custom_image_class');
Above line creates <img> tag with the class name
`leaflet-image-layer custom_image_class`
I was able to add id attribute by adding
this._image.id = "my_image_id";
result is shown as,
<img src="" class="leaflet-image-layer custom_image_class" id="my_image_id">
everything works fine till above....
But now i want to add custom attribute "my_image" so that result should look like....
<img src="" class="leaflet-image-layer custom_image_class" id="my_image_id" my_image = "something">
how do we achive this?
I have already tried with attr , but no luck...
Note that inventing your own non-standard attributes (such as my_image) will mean that your HTML is invalid. Instead you should use data-* attributes. Try this:
this._image.dataset.my_image = "something";
Or if you want to use jQuery instead:
$(this.image).data('my_image', 'something');
use jquery attr
this._image = L.DomUtil.create('img', 'leaflet-image-layer custom_image_class');
this._image.id = "my_image_id";
$('#my_image_id').attr("my_image","something"); // add this line

Can get templateInstance value but can't use it for another function?

I just recently figured out how to get the id of an element from one of my template instances and am trying to use it in another function, but although the console log returns the correct IDs, when I try to use them, like in my .play() function, it says that "undefined is not a function". This occurs no matter what function I try to do, be it eventlistener, or anything! I figured that the problem was something to do with how javascript sees elements in the shadowDOM maybe? I'm not entirely sure. Here's my function:
//plays an audio file by it's id specified in a repeating template
playAudio: function () {
var audioId = event.target.templateInstance.model.s.soundId;
console.log(audioId);
//^ that is correct in the console log for every ID
var image = event.target.templateInstance.model.s.imgId;
console.log(image);
//^ further tests, this is correct for every img ID
audioId.play();
//"undefined is not a function"
}
and then my repeating template, which has the on-click:{{playAudio}} on the img element.
<template>
<div layout horizontal wrap center center-justified class="asdf">
<template repeat="{{s in carddata}}">
<sound-card>
<img src="{{s.imgurl}}" id="{{s.imgId}}" on-click="{{playAudio}}">
<span>{{s.quote}}</span>
<audio id="{{s.soundId}}" src="{{s.soundurl}}" controls preload="auto"></audio>
</sound-card>
</template>
</div>
</template>
Is there something I'm missing in regards to how javascript handles elements that I got from a repeating template?
You can't play a string. Instead, you'll need to get the actual DOM element first, like so:
document.getElementById(audioId).play();

Pass an id to anchor tag

I am trying to pass an id that I get by parsing from the url to an anchor tag. Below is my code which will get the id by parsing it from the url.
Let's take an example, suppose if if id is 123 then my anchor tag should look like this-
something here
But somehow with the below code it is not working. Can anyone explain me what wrong I am doing.
<body>
<script>
var id = getUrlParameters()["ID"];
id = unescape(id);
</script>
// Below things doesn't work with the way I am doing.
</body>
I am not able to pass the id to anchor tag successfully. What wrong I am doing here?
Updated Code:-
The actual anchor tag is something like this-
Now I need to replace id withing the anchor tag with 123 basis on whatever the value of id is.
Updated Question:-
I am trying to pass the variable value to an anchor tag. I have a script in Javascript that will get the value from the url. So suppose in the below code,
value of variable id is 54321
Then my anchor tag should look like this-
<img src="url" style="border:none" onmouseover="this.src='url'" onmouseout="this.src='url'"/>
But suppose the value of variable id is 2612, then my anchor tag should look like this-
<img src="url" style="border:none" onmouseover="this.src='url'" onmouseout="this.src='url'"/>
With the below code, I have, its not working for me. I am not able to pass the id variable value to an anchor tag successfully.
<body>
<script>
function getParameters() {
// some code
}
var id = getParameters()["ID"];
id = unescape(id);
// some code
</script>
<img src="url" style="border:none" onmouseover="this.src='url'" onmouseout="this.src='url'"/>
</body>
You are trying to use & instead of ? which will cause an error.
Try this:
something here
Explanation
All i did was change the & to a ?.
Remember these two rules:
You should use the ? symbol to connect GET values to a url
You should use the & symbol to connect GET values to each other
I hope this helped you out, and feel free to ask for further help!
The parameter you are sending is called userId and the one you try to retrieve is ID. You should use var id = getUrlParameters()["userId"] instead.
EDIT:
If your problem is just passing id as an argument to the href, try this:
First, add a tag id to you link tag:
...
Then, add the href with JQuery, using your id variable:
$('a_tag_id_here').attr('href','https://sox.host.net:7020/ps/sox/HRS_HRAM.JN_HRS_CE.GBL&userId='+id);
It's up to you to decide what should trigger this command. If you want it to be set right after the loading of the page, just put this code inside this:
$(document).ready(function() {
// code here
});
Try this,
var getid= /*your id*/
then get the url from anchor tag using .attr('href') method replace the part after = ,using split('=') method.
forex:
var temp=$('a').attr('href').split('=')[0];
$('a').attr('href',temp+'='+getid);

getting the contents of a function in an `onclick` attribute in my html with jQuery

What?! I know, what a bad idea.
Firstly I have no control over the html that was output, its from a vendor and it is produced via their crazy system that our company has an agreement with. (let's not talk about the situation, I know it's not optimal)
In the html I have:
<a id="notify" onclick="location.href='index.php?foo=bar';return false;" href="javascript:;">Notify!</a>
In my JS If I do:
console.log($("#notify").attr("onclick"))
I recive:
onclick(event)
Which makes sense, but I need to change the onclick's attribute, so it reads to something like:
onclick="location.href='index.php?foo=bar&zoobazz=moo';return false;"
better yet, if I could remove the onclick and replace the href attributes value with location.href.
This will give you the function in a string
$("#notify").attr("onclick").toString()
Grep the URL after that
If I understand your question correctly, you want to actually see what the onclick event is doing and append to it, not just replace it. I tried this in chrome and it works, but it's pretty much a hack. Basically, when you get a reference to the "click" or "onclick" event function (using either jQuery or pure JS), then you can to a ".toString()" on it to convert the function into a string. Then you just strip off the "function" definition using some trickery and you're left with what you need - "location.href='.......".
Then just append your additional parameters. Hopefully this leads you in the right direction.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $target = $("#notify");
var funcBody = $target.attr("onclick").toString().split("\n")[1].split(";")[0];
$target.attr("onclick","").attr("href", funcBody);
});
</script>
</head>
<body>
<a id="notify" onclick="location.href='index.php?foo=bar';return false;" href="javascript:;">Notify!</a>
</body>
</html>
document.getElementById('notify').onclick = function() {location.href='index.php?foo=bar&zoobazz=moo';return false;};
Does
$("#notify").click(function() { $("#notify").attr("onclick", "location.href='index.php?foo=bar&zoobazz=moo';"); return false;})
not do what you need it to do?
You can set onclick by using $("#foo").click = '';
You can change href by changing the attribute, using .attr(key, value);
http://docs.jquery.com/Attributes, and http://docs.jquery.com/Tutorials:Edit_in_Place_with_Ajax
so
$('#foo').click = '';
$('#foo').attr('href', 'whateveryousetitto');
I may be reading too much into the question, but I think OP is asking how to get the event code so that it can be manipulated, not just replaced. When specifying "index.php?foo=bar", I don't think the value of bar is known. If this was a known value, then why read the onclick value at all?
alert($('#notify').click);
?

Categories

Resources