We Keep Coding

How do I obtain the info from a link in a jsp with javascript?

I have a requirement that states I print out a list of users to the screen. These users are all hyperlinks. When I click on one, I don't know how to determine which one got clicked and my request has nothing in it.
Here is the particular link in the jsp:
<td><a style="color:red;text-align:left" href="/sponsor/manageuser.htm" target="_self">NAME</a></td>
How can I, with javascript, which I have little experience with, determine which NAME is clicked. There is a whole list and I have to get this one that was clicked to my controller class. When a name is clicked, it does go to my controller method, but the request has nothing in it. This is a POST method. Please help and thanks in advance. I have to give a demo on this tomorrow.
Using Spring MVC. What I'm trying to do is get this value NAME into the implicit JSP request object so I can grab it when the form is submitted in my controller class.

In Javascript you can add an event listener and on its handler you can access that event target and get the text content of it (in your case NAME).
So something like this will get your started
<td><a id="myLink" style="color:red;text-align:left" href="/sponsor/manageuser.htm" target="_self">LINK NAME</a></td>
<script>
window.onload = function() {
document.getElementById("myLink").addEventListener("click", (event) => {
alert(event.target.textContent);
});
};
</script>
plunker link: https://plnkr.co/edit/dt71QKRNUf0cSA8XKIur?p=preview

You can pass this on an onClick handler to get the target and then you can get any data you want about the target such as the innerText attribute
<script>
function send(target) {
console.log(target.innerText);
}
</script>
<table>
<td><a onClick="send(this)" style="color:red;text-align:left" href="#" target="_self">NAME1</a></td>
<td><a onClick="send(this)" style="color:red;text-align:left" href="#" target="_self">NAME2</a></td>
<td><a onClick="send(this)" style="color:red;text-align:left" href="#" target="_self">NAME3</a></td>
</table>

How to use dynamic element ID with Javascript onClick event for JPlayer

I've tried to figure this out myself and I usually wont stop until I figure something out. However, this has got me stumped.
Our unique situation involves using a WooCommerce product loop that displays a number of products on our homepage. When a user mouses over a product image, an overlay then displays with a play button, and a few other useful icons.
Upon clicking this play button, our JPlayer should simply play the associated mp3 file. I've figured out how to get it to play the mp3 file, based on the product that is displayed. However, I soon realized that I have to specify a unique ID for each product that is displayed, otherwise the player will not play more than one song on the same page. Hope I haven't lost anyone yet.
So I figured, why not use the post id as the unique identifier? Below is the link tag that I'm using for the play button overlay.
<a id="myPlayButton-<?php the_id(); ?>" data-mp3file="<?php echo $file; ?>" data-mp3title="<?php the_title(); ?>" href="#">
<i class="icon-control-play i-2x"></i>
</a>
As you can see, I'm uniquely identifying this button (and each one in the loop), which generates an ID such as: "myPlayButton-1234"
My issue is that once I have this new ID, I cannot figure out how to use this unique ID in my javascript code. If I simply define a normal ID (something like "myPlayButton"), the code works fine. But it will only play the first song in the loop. I can't figure out how to use that ID above in my code.
Here's the jplayer code that works, but only plays the first song in the loop (because the ID isn't unique for each element):
<script type="text/javascript">
$("#myPlayButton").click(function () {
var playbutton = document.getElementById("myPlayButton");
var mp3id = playbutton.getAttribute('data-mp3file');
var songtitle = playbutton.getAttribute('data-mp3title');
$("#jplayer_N").jPlayer("setMedia", {mp3: mp3id, title: songtitle}).jPlayer("play");
});
</script>
And here's the jplayer code we're trying to use:
<script type="text/javascript">
$("<?php echo '#myPlayButton-'.the_id(); ?>").click(function () {
var playbutton = document.getElementById("<?php echo 'myPlayButton-'.the_id(); ?>");
var mp3id = playbutton.getAttribute('data-mp3file');
var songtitle = playbutton.getAttribute('data-mp3title');
$("#jplayer_N").jPlayer("setMedia", {mp3: mp3id, title: songtitle}).jPlayer("play");
});
</script>
I read somewhere that I can input php code inside of my javascript in the way that I did above. However, the play button simply does not work. I have tried many different methods to get that unique ID into my JS, but nothing works.
I need a way to pass the unique ID to the script so that I can get the play button to work on each post/product in the loop. Also, if it helps to know, I am including this small script in right before the closing BODY tag in my footer. If I put it anywhere else, it doesn't work. Perhaps I'm not using it in the right place?
Can anyone guide me in the right direction? If I haven't included enough info, I apologize. I'm new to this site. I've been a lurker for quite a while.
Thanks so much!

Use a class instead of id. See if this works:
<a class="mybutton" data-mp3file="<?php echo $file; ?>" data-mp3title="<?php the_title(); ?>" href="#">
<i class="icon-control-play i-2x"></i>
</a>
<script type="text/javascript">
$(".mybutton").click(function () {
// Using $(this) targets the specific clicked element
var playbutton = $(this);
// Append your object and use .data()
var mp3id = playbutton.data('mp3file');
// Append your object and use .data()
var songtitle = playbutton.data('mp3title');
// Should need no change to this line
$("#jplayer_N").jPlayer("setMedia", { mp3: mp3id, title: songtitle }).jPlayer("play");
});
</script>

Passing images and stylish text to Bootstrap modal

I think my problem is a little complicated . I use Laravel as my framework and have a HTML table that shows the posts list and has some TD (like post_title , post_content ,post_author ,...) . each post_title is an <a> tag that when clicked, a modal is opened and has some text field (to show title, authorName, publishedDate ...) and a textarea (to show the post content) .
My first problem was passing these elements to modal (after Many searches I finally found the solution) and my current problem is that with this way of passing variables I just can show the post content as long as it is just simple text . If the text has some style (bold ,italic ..) I can't pass it to modal . It's because for some quotation marks for tags like <b>ggg</b>...any idea about that?
This is the way I pass elements :
<td class="td4"> <!--the td that shows title and is a link to open modal-->
<!--===================================================modal-->
{{$article->title}}
and my javascript:
$('a.saha').click(function(e){
var essay_id = $(this).attr('id');
var title= $(this).data('title');
var body = $(this).data('body');
$("#article_id").val(essay_id);
$("#onvan").val(title);
tinymce.editors[0].setContent(body);///my textarea
});
when I have just simple text as body, it shows title (the tag) something like this : post1
but when I have styled text or image in my body it shows some thing like :
an article the name <b "id="18" data-toggle="modal"..
any help? thanks a lot

You need to encode the HTML so it doesn't mess with things using the htmlspecialchars function.
So
<a title="{{ htmlspecialchars($article->title) }}">

ok it works finally ... :)
I should just write :
data-body="<?php echo htmlspecialchars($article->body) ;?>"
instesd of :
data-body="<?php echo $article->body; ?>"

JQUERY appending a button with onClick event and passing javascript variable in it

parameters=eval([[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]);
<input type="submit" value="Pie Chart" onClick="showChart('<?php echo $title;?>',parameters,'#container','chart','Pie Chart')"/>
this works fine when I'm just including this into my html code.
but I want to append this into a specific div using javascript or jquery. like this.
<script>
parameter=eval("[[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]");
myButton="<input type="submit" value="Pie Chart" onClick="showChart('<?php echo $title;?>',parameters,'#container','chart','Pie Chart')"/>";
$('#content').append(myButton);
</script>
My problem is, it does not perform the function whenever I click the button. Maybe because of the variable parameter that I passed and my question is how can I do this correctly? And I'm avoiding using ajax cause it will affect a big portion of my codes.

Try this : use escape characters and add parameter variable using plus operator
<script>
parameter=eval("[[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]");
myButton="<input type=\"submit\" value=\"Pie Chart\" onClick=\"showChart('<?php echo $title;?>',"+parameters+",'#container','chart','Pie Chart')\"/>";
$('#content').append(myButton);
</script>

jQuery('#yourbutton').on('click', function() {
}); // your on click event
//to add content to innerhtml of div:
jQuery('#divelementorother').html(jQuery('#divelementorother').html() + YourDataToInside);
First, you see the .on function of jQuery to get an event handler on click to execute function. You can append that as JavaScript to the html of div, so you doesn`t have to use the button itselfs onclick
Second, to extend the innerhtml or html of an elemnt like , you've to use .html(data) . Or, i see above my post: you can use append.
Greetings

Popup in new window opens in new tab instead

I have a calendar created with php. In this calendar I have load_id's listed by date. I made a popup to show more data for each load. I want it to show as a popup not in a new tab. I have tried doing it as a function but as I don't know javascript I could not figure out how to pass the load_id to the url. If I replace "this.href" with the url in a function it works like a charm. But again I don't know how to pass the load id as a variable so that won't work for me. If someone could point out where I made my mistake passing the variable I would be much obliged!
This is what I have now:
echo "<span class='load_shipped'>
<a href='cal_popup.php?load_id=".$load_id."'
onclick='window.open(this.href, '_blank','left=100,top=100,width=500,height=500,toolbar=1,resizable=0');'>
".$load_id."
</a>
<br>
</span>\n";
I tried this as well to no avail:
echo "<span class='load_shipped'>
<a onclick='popup(".$load_id.");'>".$load_id."</a><br>
</span>\n";
Javascript:
<script>
function popup(id){
window.open('cal_popup.php?load_id=id', '_blank','left=100, top=100,width=500,height=500,toolbar=1,resizable=0');
}
</script>
All this did though was pass 'id' instead of the real load_id.

Seems like you're having trouble because you're using the same quotes to wrap the attribute onclick and to define the parameters of the window.open call. Try using double quotes on the attribute. You'll also need to return false; at the end of the onclick to prevent the link working as normal.
echo "<span class='load_shipped'>
<a href='cal_popup.php?load_id=".$load_id."'
onclick=\"window.open(this.href, '_blank','left=100,top=100,width=500,height=500,toolbar=1,resizable=0');return false;\">
".$load_id."
</a>
<br>
</span>\n";
In your last example where you have the function popup - please note that you need to concatenate the id variable into the string like 'cal_popup.php?load_id=' + id.