Trying to replace a html attribute using a click function - javascript

I'm trying to take an a element and take the information from the data-id attribute and store it into a variable. I want to then splice this variable so I get the part that I need and implement it into another variable with some text. From that I then want to replace the src attribute of an iframe with the variable. Unfortunately, this doesn't seem to be working at all and I can't find the issue.
Here is the code:
$('.watchvideo').click(function(){
var idu = $(this).attr('data-id');
var id = "//www.youtube.com/embed/"idu.substr(27,37);
$('.videofeatem').setAttribute("src", id);
});

You have 2 issues in code:
1) concatenating substring
2) setting attribute via jquery
var id = "//www.youtube.com/embed/"+idu.substr(27,37);
$('.videofeatem').attr("src", id);

Without seeing the HTML, it's tough to be sure, but a + fixes the obvious problem:
$('.watchvideo').click(function(){
var idu = $(this).data('id');
var id = "//www.youtube.com/embed/" + idu.substr(27,37);
$('.videofeatem').attr("src", id);
});
Also, note that data-xxx attributes can be read by jQuery as .data('xxx')

Simply.
var id = "//www.youtube.com/embed/" + idu.substr(27,37);

Since you're using jQuery, use the .attr() method instead of the .setAttribute().

Related

Pass ID of an element to jquery function

I want to fetch the id of an element and pass it in jquery function -
$('#fetchedID').fadeOut;
Till now I have tried -
1. $("#$('.delete_status').attr('id')").fadeOut(400);
2. var e = $('.delete_status').attr('id');
$(e).fadeOut(400);
I am sure I am stuck because of the wrong syntax of passing javascript variable in jQuery function. Please help.
Try with concating the Id that you have got with the Id selector(#) like
var e = $('.delete_status').attr('id');
$("#" + e).fadeOut(400);
You have to concatenate the selector, like this:
$("#" + $('.delete_status').prop('id')).fadeOut(400);
If you're going to be using the ID more than once, it is a good idea to cache it:
var delete_status_id = $('.delete_status').prop('id');
$("#" + delete_status_id ).fadeOut(400);
// do something else with delete_status_id...
$("#" + $('.delete_status').attr('id')).fadeOut(400);
Do you really need to pick the ID to then reselect the element and do the fade? If you want to pick only the first occurence of your class, you can use :eq(0) instead.
$('.delete_status:eq(0)').fadeOut(400);

Jquery:How to use variable as a selector

I trying to figure out how can I use a variable inside a selector. If I use the actual value of the ID in the selector, it works very well.
$(document).on("click",'.tag', function(){
var data-id = $(this).attr('data-id');
if($('div[data-id="540"]').hasClass("tag_current")) {
$('div[data-id="540"]').removeClass("tag_current").addClass("tag");
}
$(this).toggleClass('tag tag_current');
});
I checked many answers and try it in different ways, but I still didn't solve it.
Basic string concatenation:
$('div[data-id=' + data-id + ']')

How to call ID through local Variable

if am having html
<TableView id=img1></TableView>
<TableView id=img2></TableView>
normally
$.img1.backgroundImage = "/Picture1.jpeg"
but I want to know how to store the id in local variable and call the same function, in place of img1 I have to use local variable. is any possibility of this.
Normally $.img1.backgroundImage = "/Picture1.jpeg" would be nonsense since jQuery doesn't populate itself with properties referencing all elements with ids on a page.
Converting that to use a variable instead of an identifier (let's say var foo = 'img1'; for the benefit of all the following examples) would be
$[foo].backgroundImage = "/Picture1.jpeg";
(That's equivalent to the original code, but since I wouldn't expect the original to work, this won't either).
To actually set the backgroundImage property in JS you would:
document.getElementById(foo).style.backgroundImage = "url(/Picture1.jpeg)";
or if you are being a jQuery junkie:
jQuery('#' + foo).css('background-image', 'url(/Picture1.jpeg)');
Yes Sure but need to adjust the code accordingly to set the background image
var img1 = $("#img1")
img1.css("background-image","/Picture1.jpeg");
var images = $("#img1");
or also you can use
var images_obj=form_name.element_name;
var yourVar= $("#img1").attr("id");
I think you want to change the background image css property of an element selected by id, who is in a local variable?
var yourid = "img1";
$('#' + yourid ).css('background-image', '/Picture1.jpeg');
You better save the object instead of id as you would need to get element by id again and again.
var img1Obj1 = $('#img1'); //jQuery object
var img1Obj2 = $('#img1')[0]; // DOM javascript object

Replace element with text with javascript (no jquery)

I'm trying to create a link which has a dynamic value in it
http://my.link/index.php?action=huh&id=X
The X is what i want to replace dynamically with javascript variable.
I don't want to use jquery for it.
AND, i do not want to replace the whole url(href) because some part of URL needs to parsed by the template engine.
I think it'd be better if i inserted an element in place of X and replaced it with JS
only replace id
var elLink = document.getElementById("link");
elLink.href = elLink.href.replace(/id=(.*)/, function(){return "id=2"});
if id=X is constant
elLink.href = elLink.href.replace("id=X", "id=2");
You can use something like
document.getElementById("YourAnchorId").href= document.getElementById("YourAnchorId").href + id;
or
document.getElementById("YourAnchorId").href= document.getElementById("YourAnchorId").href +"?id" + id;
And that id variable get it from a textbox or however you need it.
And whats its the reason for not using jquery?

Variable as jQuery selector focus

I'm using JavaScript to copy a specific div from a page into a new page. I need to remove the ID attributes for each table in the new page.
It seems that since I'm copying content from the first page, I can filter out the IDs from the string before it is written to the second page. Can jQuery take a variable as its 'focus'? Instead of manipulating the entire DOM, manipulate a particular string?
I have a non-working version of what I'm talking about:
var currentContent = window.open('','currentContentWindow');
var htmlToCopy = '<html><head><title></title></head><body>' + window.frames[0].document.getElementById('PageContentPane').innerHTML + '</body></html>';
$("table", htmlToCopy).removeAttr('id');
currentContent.document.open();
currentContent.document.write(htmlToCopy);
currentContent.document.close();
You need to create a jQuery object by calling $(html), manipulate it, then get the HTML back by calling html().
For example:
var currentContent = window.open('','currentContentWindow');
var htmlToCopy = '<html><head><title></title></head><body>' + window.frames[0].document.getElementById('PageContentPane').innerHTML + '</body></html>';
var newStructure = $("<div>" + htmlToCopy + "</div>");
newStructure.find("table").removeAttr('id');
currentContent.document.open();
currentContent.document.write(newElements.html());
The <div> element allows me to get its inner HTML and get the HTML you're looking for.
Who not just remove ID= as a string and forget DOM manipulation all together?
First make the string a jQuery object, then work with it:
htmlToCopy = $(htmlToCopy).find("table").removeAttr('id').end().html();

Categories

Resources