Develop Reference

Get value upon click event while using AmCharts Map

The Issue:
I have a map made with AmCharts. With some help I was able to make it so upon hover I can display info for each state. I want to make it so that when I click on a state, it displays some of that state info below in a div.
My Jumbled Thoughts:
At first I thought this would require managing the 'state', but I am pretty sure that using 'state' would be overkill. With that said, it seems like it should be a simple issue to have a click event display the same value that I am getting upon hover...but it is apparently too hard for me right now (or too late).
Some Code:
$("#chartdiv").click(function() { // line 641
document.getElementById('tempInfo').innerHTML = event.mapObject.infoTitle;
});
Then I thought maybe this would work:
map.addListener("click", function(event){ // line 637
document.getElementById('tempInfo').innerHTML = event.mapObject.infoTitle;
});
Link to Full Code:
http://codepen.io/anon/pen/PGYQxX?editors=0011
Apologies for my Ignorance and Preemptive Expression of Gratitude:
I am working on getting better at basic JS, but at the same time I'm trying to power through things I have a poorer understanding of.
Any help is greatly appreciated, thanks!

There's a event called clickMapObject which you can listen for. It will give you the map object you clicked on as part of the event object you get as parameter.
As it seems like you don't bother to use jQuery, I changed the DOM manipulation to use it. (better readabilty in my opinion)
map.addListener("clickMapObject", function(event){
$('#tempInfo').html(event.mapObject.infoTitle); // Changes with clicking
});
Here's the new codepen.

kicking off ajax query to php mysql DB by use of onblur

I'm trying (and failing) to make an ajax process work when people leave a form input field. I need it to happen for each input field, of any type, on the form.
I'm trying to modify the following (which does work):
$("document").ready(function() {
$("#getcontent").click(getContent);
});
function getContent() {
$("#example").load("sampletextcontent.txt");
}
(there would be a button with id="getcontent" in the html, and a div with id="example" also in the html. When button clicked, contents of external file sampletextcontent.txt is displayed within said div)
jquery IS being used, version 2.0.3 jquery.min.js
So I am trying (and this is where I am failing) is to convert the above to become:
$("document").ready(function() {
$("#input_1_1").onblur(doSend);
$("#input_1_2").onblur(doSend);
$("#input_1_3").onblur(doSend);
$("#input_1_4").onblur(doSend);
$("#input_1_5").onblur(doSend); // etc for as many fields there are
})
function doSend() {
// Do some ajax stuff to send the entire value of all form fields in here
}
But it does not seem to like the concept of using the replacement of the ".click" to ".onblur" here. Why is this? Isn't onblur a valid JS function/item?
Sorry I'm not a JS guru, I have great problems understanding JS.
C
Edit - sorry I was not clear about the code I am trying to get working. There is no button in the version I want to work, it's just wanting to trigger by when a user clicks/tabs away from each input field. Sorry about not making that clear before.

For dynamic jQuery event binding, I would try switching out the .click and .blur functions with the .on function.
As an example, I would try the following:
$('body').on('click', '#getcontent', function(){
DoSomething();
});
and
$('body').on('blur', '#input_1_1', function(){
DoSomething();
});
The documentation for the on function can be found http://api.jquery.com/on/.
Here is another Stack Overflow article that also explains this: Event binding on dynamically created elements?.

Thanks to the comments and answer attempts. However the answer that I'm using, that actually does answer the specific question is the following. Simply change:
$("document").ready(function() {
$("#input_1_1").onblur(doSend);
$("#input_1_2").onblur(doSend);
$("#input_1_3").onblur(doSend);
$("#input_1_4").onblur(doSend);
$("#input_1_5").onblur(doSend); // etc for as many fields there are
})
To become:
$("document").ready(function() {
$("#input_1_1").blur(doSend);
$("#input_1_2").blur(doSend);
$("#input_1_3").blur(doSend);
$("#input_1_4").blur(doSend);
$("#input_1_5").blur(doSend); // etc for as many fields there are
})
And it works. This retains the ability to call different functions per field if I so wish, and is very straightforward for a JS novice like me to work with.
A better cleaner solution may be implemented later, but for now this will do and directly answers the original question.

Tooltips not working

OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!

I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});

Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)

jQuery .attr Not Working Properly, Miss-Retrieving Links

This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.

Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.

jqModal/JQuery problem, div not updating with new content?

I'm hoping someone can point a relative jQuery/jqModal newbie in the right direction for debugging this error. I'm loading an html fragment into a div and then use jqModal to display that div as a modal dialog. The problem is that the div is displayed but not with my updated html.
I'm showing my jqModal dialog in the response from a jquery call, function foo is called from an onclick event:
function foo(url)
{
$.ajax({
type: "GET",
url: url,
success: function(msg)
{
$('#ajaxmodal').html(msg);
$('#ajaxmodal').jqmShow();
}
});
}
ajaxmodal is a simple div.
Initially I thought the problem must be in the html snippet (msg) I'm passing to the callback, but I don't think that's it, I get the err (see below) even when I comment out the $('#ajaxmodal').html(msg) line or pass it hardcode html. I think I have jqModal configured correctly, other calls using our ajaxmodal div work correctly, I'm able to display the modal, update the content based the server response, etc.
When I try to debug in firebug, I get the following error following the call to .jqmShow(). I have seen the err on occasion in other places when it seemed maybe the page hadn't loaded yet, and I confess I'm confused about that, since we've wrapped our jqModal selectors in a $(document).ready() call, so maybe I have a larger issue that this call just happens to trigger?
From the jquery.jqModal.js file, line 64: js err is $(':input:visible',h.w)[0] is undefined in the line:
f=function(h){try{$(':input:visible',h.w)[0].focus();}catch(_){}}
When I step through this in firefox, h.w[0] seems ok, it references our '#ajaxmodal' div.
Thanks in advance for any suggestions in tracking this down?

If you have no inputs that need focus, you can change in the jqModal.js from:
f=function(h){try{$(':input:visible',h.w)[0].focus();}catch(_){}},
to:
f=function(h){try{}catch(_){}},
That's what I did anyway ;)

I'm not familiar with jqModal, but you might want to try
append()
Rather than
html()
I'm not sure if that will help, but it's worth a shot

This question is a little on the old side, but this was one of the only results I could find on google for a similar situation so I thought I'd share my experience.
The line in question in jqModal is attempting to focus the first input element it finds within your pop-up form, and if there is none, an exception is thrown. This is why it is in the exception block - nothing bad happens if you disable firebug.
However, if you are like me and find errors bubbling up to be a bit on the annoying side, a workaround is to add a dummy input element to the element you are executing jqmShow on.

Found a soln to my problem, posting the result in case it helps someone else, though I don't quite understand it.
The issue (I think) has something to do with ajaxmodal not quite being initializel as a jqModal element when I make .html() call. Calling .jqmShow initializes the div with our default text. I had thought putting this in document ready function was sufficient to initialize the dialog:
$('#ajaxmodal').jqm({ajax: '#href', trigger: 'a[rel*=modal]', ajaxText: 'Loading...'});
but to solve my problem I had to reverse the calls:
$('#ajaxmodal').jqmShow();
$('#ajaxmodal').html(msg);