How to access hyperlink attributes in jquery when clicking - javascript

I'm trying to customize a confirmation dialog with a custom message embedded in the hyperlink tag, something like this:
<a class="confirmation" href="whatever.html" data-message="Are you sure?">the text</a>
and the js:
$('.confirm-delete').click(function(){
return confirm('the content of the data-message attribute');
});
So my question is how can I access the data-message attribute? Thanks!

Well you are using jQuery, so use the .data() function to get data-* attributes.
Also using simple JS this.dataset.message will work on most of the new browsers, but going back to primitive browsers, use this.getAttribute('data-message'). But in the case which you are using jQuery, .data() is preferred.
$('.confirmation').click(function(){
return confirm($(this).data('message'));
});
function message(element){
return confirm(element.dataset.message);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a class="confirmation" href="whatever.html" data-message="Are you sure?">Use jquery</a>
<br/>
Use simple JS

You can use below code:
alert($(".confirm-delete").attr("data-message"));

Here how:
$('.confirmation').click(function(){
return confirm($(this).attr('data-message'));
});

Try this code, will show the attribute "data-message" when clicking the link.
$('.confirmation').click(function(e){
e.preventDefault();
alert($(this).attr('data-message'));
return confirm('the content of the data-message attribute');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="confirmation" href="whatever.html" data-message="Are you sure?">the text</a>

HTML Code :
<a class="confirmation" id="confirmlink" href="whatever.html" data-message="Are you sure?" onclick="callConfirm()">the text</a>
Javascript Code:
<script>
function callConfirm() {
var linkval=document.getElementById("confirmlink");
var attribval=linkval.getAttribute("data-message");
alert(attribval);
}
</script>

use the attr method
$('.confirm-delete').click(function(){
return confirm( $( ".confirmation" ).attr( "data-message" ) ); //return the message fetched from the data-message attribute
});

Related

How to Bind Jquery Value to an HTML Element

How can i bind the url result from the jquery to the href ? as you can see on the html below. Thank you.
JQUERY CODE
<script>
$(document).ready(function(){
$("#btnSearch").click(function(){
var yearArray = [];
$("input:checkbox[name=Year]:checked").each(function(){
yearArray.push($(this).val());
});
var makeArray = [];
$("input:checkbox[name=Make]:checked").each(function(){
makeArray.push($(this).val());
});
var url="http://example.com/results?Year="+yearArray.join()+"&Model="+makeArray.join();
alert(url);
});
});
</script>
HTML
<a href="/searchnew/{{ url }}"><button id="btnSearch" class="btn btn-cta margin-bottom-1x search-button cssBase"
type="button""
style="width: 262.5px;">Search</button></a>
You can simpy add href attribute after creating link. What i mean by this is
if your href tag is look like this
<a href="#" id="myurl">
$("#myurl").prop("href",url);
This will simply render your html like this
<a href="http://example.com/results?Year="......(your dynamic values here)">
You don't have to add tag on to button click. Instead, on click of button, within the function after you have prepared url, call
location.href = "searchnew/" + url;
In case you have the base url for the app, you can prepend as well to have the complete url with you.
Use id attribute for your a tag like this-
<a href="....." id="myLink" > ... </a>
And at the end of your jQuery code add the following:
var a = $('#myLink');
var href = a.attr('href');
a.attr('href', href + url);

how to find string in html tag and replace using javascript/jquery

I do not know how to find a string in the html tag and replace it with another one.
I will show it on an example.
I have something like that
<a class="test" data-value="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>
And I would like to get such an effect
<a class="test"> <img-src="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>
Does anyone have any idea? I'm sorry for my level of English.
You can first append the img and then remove the attribute data-value.
See the code below:
$("a").append(function(){
return '<img src="'+$(this).attr("data-value")+'">';
}).removeAttr("data-value")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="test" data-value="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>
Assuming that you are new in JavaScript and/or jQuery, I've made a step-by-step example of a solution:
// create a pointer to your anchor
var $yourAnchor = $('.test')
// copy data attribute
var $hdata = $yourAnchor.data('value');
// remove attribute
$yourAnchor.removeAttr('data-value');
// insert html
$yourAnchor.html('<img src="' + $hdata + '">');
// If It has multiple hyperlink tag then
$('a').each(function(){
if($(this).data('value')!=undefined){
$(this).append(function(){
return '<img src="'+$(this).attr("data-value")+'">';
}).removeAttr("data-value");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="test" data-value="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>

Paste id into href

I have a lot of streams.
<a id="stream1" href="http://server/stream1/parameters">name_1</a>
<a id="stream2" href="http://server/stream2/parameters">name_2</a>
...
<a id="stream99" href="http://server/stream99/parameters">name_99</a>
I want to hide "http://server/stream99/parameters"
How to do a function to paste "id" into href
eg:
<a id="stream1" href="#">name_1</a>
using something like
function somefunction(a) {
document.getElementById('a').innerHTML = '<a href="http://server/'+id+'/parameters">';
}
Javascript or jquery will make the link and paste the "id".
Or perhaps I can somehow use a different method to hide links?
Like this - do note that this is easy to decipher by inspecting the code.
Alternatively use a server redirect and just send some encrypted ID
$(function() {
$(".stream").on("click", function(e) {
e.preventDefault();
location = "http://server/" + this.id + "/parameters";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a id="stream1" class="stream" href="#">name_1</a><br>
<a id="stream2" class="stream" href="#">name_2</a><br>
<a id="stream3" class="stream" href="#">name_3</a><br>
<a id="stream4" class="stream" href="#">name_4</a><br>

appending elements in jquery

i am trying to append a div to other div here :
<script>if($(window).width()>500){
$("body").append("<?php include('includes/middle.php') ?>");
}
</script>
Which becomes:
<script>if($(window).width()>500){
$("body").append("<div class='middle'>
<div class='middleOne'>
<a href='http://localhost/jhandwa/story/11-illustrations-that-perfectly-capture-how-life-changes-when-we-grow-up'>
<img src='https://files.brightside.me/files/news/part_31/310360/12086810-10111660-1-0-1487765591-1487765607-0-1488442321-0-1488458395-1488458410-650-1-1488458410-650-0c369e17e2-1488484030.jpg'>
<div class='miniTitle'>11 Illustrations That Perfectly Capture How Life Changes When We Grow Up<br /><span>2017-03-17 17:12:36</span></div>
</a>
</div>
<div class='middleOne'>
<a href='http://localhost/jhandwa/story/10-things-you-didnt-know-about-the-us-secret-service'>
<img src='https://www.whitehouse.gov/sites/whitehouse.gov/files/images/first-family/44_barack_obama%5B1%5D.jpg'>
<div class='miniTitle'>10 Things You Didn't Know About<br /><span>2017-03-17 15:15:29</span></div>
</a>
</div>
<div class='middleOne'>
<a href='http://localhost/jhandwa/story/who-is-actually-dumb-and-dumber-after-watching-these-crime-serials'>
<img src='https://s-media-cache-ak0.pinimg.com/originals/36/45/e6/3645e66b26b611a30fabf923f7247d23.jpg'>
<div class='miniTitle'>Who is Actually 'dumb' and 'dumber' after this? <br /><span>2017-02-28 00:00:00</span></div>
</a>
</div>
</div>");
}
</script>
what am i doing wrong here? i feel its something wrong because of double or single quotes.why isn't it working?
Updating my original answer:
First, you need to wrap your code in document.ready(). It should append when the dom is ready.
Second, it is not working because your outputted HTML is on multiple lines. If you look at your console, you would see the following errors:
Uncaught SyntaxError: Invalid or unexpected token
There are many ways to solve this issue, the simplest would be to use template literals, this means you should wrap your code within backtick.
$(document).ready(function () {
if ($(window).width() > 500) {
$("body").append(`<?php include('includes/middle.php') ?>`);
}
});
However, this solution may not be compatible with all browsers as this feature has been introduced in ES6.
A much better way would be to call the sidebar.php via ajax.
$(document).ready(function () {
if ($(window).width() > 500) {
$.get("includes/middle.php", function (data, status) {
$("body").append(data);
})
}
});
This script can not execute because your PHP file have multiple line. And multiple line will make your JS syntax wrong.
You need include this php file in a hidden script, and use jQuery to get this div content and append into body.
And as #Hyder B say, you need put this script execute when document has been ready.
You can try this way:
<div id="included_content" style="display:none">
<?php include('includes/middle.php') ?>
</div>
<script>
$(document).ready(function() {
if($(window).width() > 500){
$("body").append($("#included_content").html());
}
});
</script>
Try this:
if($(window).width()>500){
$.ajax({
url: 'includes/middle.php',
success: function(html) {
$("body").append(html);
}
});
}
Based on this answer and as you directly echo inside the included page, you can use backtick (`) to wrap multiline string in js properly.
<script>
$(document).ready(function() {
if($(window).width()>500){
$("body").append(`<?php include('includes/middle.php'); ?>`);
}
});
</script>

How to access JavaScript variable in HTML tags?

I am trying to access JavaScript variable in the href attribute of anchor tag.
JavaScript Function:
<script type="text/javascript">
function fun(ReqTextbox)
{
var queueData =document.getElementById(ResTextbox).value;
//some more code
}
</script>
HTML code:
<body>
<input type="text" value="<%=dynamicValue%>" id="<%=dynamicId%>"/>
<a href="servlet?variablename="<%Eval(queueData)%>" onclick=fun('<%=dynamicvalue%>');>LINK</a>
</body>
I know that I am going to wrong at variablename="<%Eval(queueData)%>".
Can someone please help me how to access and pass JavaScript variable as a query string parameter?
First, I think you made a typo :
function fun(ReqTextbox) {
var queueData = document.getElementById(ResTextbox).value;
//some more code
}
You get ReqTextbox parameter but you use ResTextbox. Then, since Javascript is client-sided, you have to manually update the href tag using href attribute. So your function would be like :
function fun(ReqTextbox) {
var queueData = document.getElementById(ReqTextbox).value;
document.getElementById('myAnchor').href = "servlet?variablename=" + queueData;
//some more code
}
And give your anchor tag an id, myAnchor in my example.
Modify HTML code as given below -
<body>
<input type="text" value="<%=dynamicValue%>" id="<%=dynamicId%>"/>
<div id="example2">
<a href="servlet?variablename="<%Eval(queueData)%>" onclick=fun('<%=dynamicvalue%>');>LINK</a> </div>
</body>
Use this to pass query string -
$("#example2 a").attr("href", url + "?variablename=" + queueData);
If I understand you correctly inside fun() function try to use:
var queueData = this.getAttribute('id');
That way you will get id value when runnning onclick() function.

Categories

Resources