We Keep Coding

Grabbing data from a specific element from a list in jQuery

I'm trying to write some javascript/jQuery that will grab a link from reddit after clicking the upvote button.
As of right now, if I upvoted multiple things, it will only grab the link from the first specified class name in the returned jQuery list. Example:
document.addEventListener('click', function(e) {
if (e.target.matches('.arrow.upmod')) {
var url = $(e).parent().parent().data('url');
alert(url);
}
});
So if I have 2 posts upvoted, it will only return the link comes first in the list. I'm trying to figure out how to grab ONLY the link that was most recently upvoted (so an eventListener that will ONLY grab the information on the post that was just upvoted).
Any help/direction would be greatly appreciated.

Figured it out. This does exactly what I needed:
document.addEventListener('click', function(e) {
if (e.target.matches('.arrow.upmod')) {
var url = $(e.target).parent().parent().attr('data-url');
alert(url);
}
});

Can I use multiple intro.js with more than 2 pages?

I want to use intro.js with more than two pages.
Is it a simple way to do it?

Yes, you can. If you look at code for intro.js example with multiple pages https://github.com/usablica/intro.js/tree/master/example/multi-page you can see that first page has code that redirects to second page after user click the button:
<script type="text/javascript">
document.getElementById('startButton').onclick = function() {
introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
window.location.href = 'second.html?multipage=true';
});
};
</script>
And on the second page we use regex to check if user is going through intro. You will need to add code like that to each page, with url address to the page that should be shown next.
If you want to have more than one "intro flows" (since the question title said multiple), you can give them names or numbers. Then, instead of adding multipage=true you can use multipage=beta_version or multipage=1 and use reqex to check if user should see intro, and if yes, which one.
<script type="text/javascript">
if (RegExp('multipage', 'gi').test(window.location.search)) {
document.getElementById('startButton').onclick = function() {
introJs().setOption('doneLabel', 'Next page')
.start().oncomplete(function() {
if (RegExp('multipage=2', 'gi').test(window.location.search)) {
window.location.href = 'third.html?multipage=2';
}
else {
window.location.href = 'unicorn.html?multipage=3';
}
});
};
}
</script>
That might be not the nicest code ever :), but ( like Rich said ) without more information I can only guess this is what you want to do? But hopefully, it will give a general idea.

if (RegExp('multipage', 'gi').test(window.location.search)) {
introJs().setOption('doneLabel', 'Next Page →').start().oncomplete(function() {
window.location.href = 'nextpage?multipage=true';
});
}

I was able to use intro.js for a complex multipage use (more complete than their official multipage example). See the issue I opened about it associated to my React solution on Codesandbox.

jQuery Dialogue Box Not Closing

I have a javascript/jQuery cookie confirmation box on my site as shown here: http://jsfiddle.net/x7rAk/1/
var checkCookies = document.cookie;
var cookieNotice = '<div id="continue_box" class="cookie_box"><p>This website uses cookies to improve the user experience. For more information on cookies please see this link. By clicking continue, you agree to the use of cookies.</p><p class="cookies_accept"><span class="cookie_button" id="continue"><img src="/images/tick.png"/><span> Continue</span></span></p></div>';
$('body').ready(function() {
$('body').prepend($(cookieNotice).fadeIn(2000));
});
var continueButton = 'span#continue.cookie_button';
var closeButton = 'span#close.cookie_button';
var closeNotice = '<div id="close_box" class="cookie_box" style="display:none"><p>You have agreed to the use of cookies. This allows us to bring you a better service by remembering your preferences.</p><p class="cookies_accept"><span class="cookie_button" id="close"><img src="/images/cross.png"/><span> Close</span></span></p></div>';
$('#continue_box.cookie_box').ready(function() {
$(continueButton).click(function() {
$('#continue_box.cookie_box').fadeOut(1000, function() {
$('body').prepend($(closeNotice).fadeIn(1000));
});
});
});
$(closeButton).click(function() {
$('#close_box.cookie_box').fadeOut(2000);
});
This is missing images and fonts etc. but it works exactly the same as on my site.
If you run the code, you will see that the box doesn't disappear when you click close.
First of all, how do I fix it, and secondly why does mine not work (I like to know why so I don't have to waste your time again :) ).
Thank you,
Connor
P.S. On my site it checks whether you have a cookie called cookiesAgree before showing it so the code is normally more sophisticated.

This should work
$(document).on("click", closeButton, function() {
$('#close_box.cookie_box').fadeOut(2000);
});
The content is being added dynamically, so you need to register the event handler.

Is there a way to just create a link that is only used for its onClick event?

I’m trying to create a link that could be used by my jquery to append another ActionLink somewhere on the page. I don’t want to call a controller or navigate to somewhere on the page. I want my jquery to create the link using append.
I’ve tried different overloads and the only one I found that did not navigate away from the page was this:
#Ajax.ActionLink(stdFName,"Action","Controller",null,new { teacher = "Teacher Name", #class = "className", id = stdNum });
It doesn’t call a controller and it appends the link as I want. I’m just not sure that this is the best way to do it.
Here’s the script that executes when the link is clicked:
$("#174").on("click", function () {
var newElems = $("<div class='studentInfo'></div")
.append('#Html.ActionLink("Student Name", "StudentInformation","TeacherStudent", new { rope="said" },null)')
$("#redAlertRow").append(newElems);
});
Is there a way to just create a link that is only used for its onClick event?
Thanks for helping!

Probably this
var routeurl = '#Url.Action("YourAction", "YourController")';
window.location.href = routeurl;
cheers.

Append bannercode from a webpage

I've got a problem I'm having trying to append a bannercode to the end of an URL. The customer journey is as follows:
Person receives an email which contains a link to a site (SITE1), the URL will contain a banner code e.g. www.site1.com?banner=helloworld
Once the person is on this site, there are 2 buttons which take the customer to a second site:
Button 1 goes to https://www.site2.com/page1
Button 2 goes to same URL/page2
$(document).ready( function () {
var banner = String($.query.get('banner'));
if(banner){
href = $('a[href^="https://"]').attr("href") + "?banner=" + banner;
$('a[href^="https://"]').attr("href", href);
}
});
Basically what happens is, the piece of code I have makes both buttons go to the same URL for example button 1. How can I get the script to not change the URL for all buttons? Thanks in advance.

Do I understand you right: you want to add banner part for every link, but keep the original part unchanged?
$(document).ready(function(){
var banner=String($.query.get('banner'));
if(banner){
$('a[href^="https://"]').attr('href',function(){
return this+'?banner='+banner;
});
}
});
or in shorter:
$(document).ready(function(){
(banner=$.query.get('banner'))?$('[href^=https]').attr('href',function(){
return this+'?banner='+banner}):null;
})