I recently started learning JavaScript and I've been a frequent user of jsfiddle since then. Although it's pretty simple, I still have one problem understanding its events. ex: no wrap (head), onDomReady
What are these events for and what are the differences between them? Can someone please do a decent explanation?
Thank you very much and happy new year!
This dropdown specifies where jsFiddle should put your Javascript code in the generated HTML.
The first two options put it in a raw <script> block in the <head> or <body>.
The last two options put it in a Javascript event handler.
You can see how this works by viewing the source of the generated page.
(or without jQuery)
Related
I have a code that clicks an html element but it doesn't fire its java script code, in VBA I used to call "initEvent" in order to invoke a java script event.
I have searched the web and haven't found a suitable solution.
There's a working solution, but it's not quite useful in most cases, placing a java script code in the url and navigating to it, however there's a need for the location of the html element which is a problem sometimes.
The code I use in order to do a click in the html element :
el.InvokeMember("onclick");
Also tried :
el.InvokeMember("click");
The code that I place in the url and find not too much useful :
wb.Navigate("javascript: document.getElementsByClassName('something')[0].click();void(0);");
I hope to receive a working solution, thanks in advance.
I've solved it, a very original solve I'd say.
So basically, I've thought about it this way.
Finding an element that I already have is not comfortable at all, so the java script navigate didn't seem useful, however, I thought of changing it to fit any element, the question was how.
The answer I came up with, what if I'd focus the specific element and then use a javascript to click on the focused element, and it worked.
So the fixed code :
el.Focus();
wb.Navigate("javascript: document.activeElement.click();void(0);");
I hope it'll be useful to some of you.
I am alien to javascript so pardon me for any naive mistake you find (though that's what I am looking for).
I tried to replicate the code provided for testing the button click event for plotly, but it's not getting fired.
Link from which code is imported:
https://plot.ly/javascript/custom-buttons/#bind-button-events-to-plotlyjs-charts
The way I used it in my html file to test it is shown in the image attached. It works well in code snippet, but due to some mistake of mine in using the javascript in the same page, I am not able to get in work.
Assistance highly appreciated.
the cdn link to jquery wasn't working.
Never rely on the external, keep a local copy of all libraries and call them
EDITED: New information: When I inspect the field, and the code is highligted (in the inspector), then the statements all work as they should, but when the field isn't highlighted anymore, the statements do not appear to work. Hopefully this helps diagnose the issue.
I have a wufoo form (a hosted form that you can embedd, send to spefic email on submit etc). I have a field on that form that I am trying to populate with a certain piece of data once I click a button. I believe I have the correct code to make this happen, and it should work:
$('#my-button').click(function() {
$('#Field3').val("something");
});
I have tried many different ways:
$('input[id="Field3"]').val("something");
$('input[name="Field3"]').val("something");
and a few reaches which I didn't really think would work..
$('#Field3').append("something");
$('#Field3').text("something");
There are a few things that confuse me here, and I will post screens below showing what I mean. I can type all of these commands in the console once the page is loaded and nothing will happen to the field (with the id of Field3)...most of the time. But on several occasions, I would reload the page, try a few statements again, yes the same ones, and then it would work. No idea why or how, but it is sort of an intermittent thing. Obviously that's probably not the case, but I am pretty confused as to why this is happening;
Below are three screens of my console. For the first two, the field finally populated after about 10 or more tries in the console, and then continued to work while using commands that didn't work before. The last screen is an attempt that did not work at all:
[![Eventually Works After Last Command][1]][1]
[![Eventually Works After Last Command][2]][2]
[![Did Not Work][3]][3]
[1]: http://i.stack.imgur.com/JKVxY.jpg
[2]: http://i.stack.imgur.com/MLca8.jpg
[3]: http://i.stack.imgur.com/0viRA.jpg
(Apologies for the way I had to post these images, I keep getting formatting errors that will not let me continue to save the post unless I cmd+k them)
I try everything in the console first, but I can not find any patterns here. Any ideas or input would be greatly appreciated, and thank you for your time.
At this point I'm pretty sure the problem has to do with the form-code switching or adding certain classes under certain conditions, so I downloaded the code from my Wufoo account rather than embedding it. Then I only added the code for the view (not css or JS), and it works now.
My original statements (not the reachers) all work fine now when I try them. Thanks for the time everyone.
I know you solved your issue, but figured I'd chime in in case you or others have this issue again in the future. It sounds like your issue was related to execution order. Wufoo's embed scripts are asynchronous, so it's very likely that the input fields in question didn't yet exist on your page at the time your jQuery click handler was evaluated. Changing your original code to jQuery's "on" method instead of "click" would likely have solved your problem, as "on" provides a delegated event listener. At any rate, glad you got everything sorted out!
In the console I assume there is no jQuery loaded.
I usually write:
document.getElementById('Field3').value = "something";
Updated your Jsfiddle. The only thing I changes, I added the reference of the
Jquery. Might be that's the problem.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
I have a button on my cover page and I need to assign to it 1 line of javascript code (namely javascript:languageClicked(0); to work with this neat addon: Multilingualizer) .
So the button should execute that line of code and do its usual job, namely to send the user to my main webpage.
thx in advance
Is the languageClicked function code from Multilingualizer? If so, maybe that addon isn't enabled correctly on your page or something and the js files for it are not being loaded.
But, once they are loaded. You can replace your button with this code:
ENTER
Screenshot
Since you want the user to be redirected to /expnew after activating languageClicked.
Hope this helps! Also, there is one catch though; don't change this unless you know for sure you have those JS libraries loaded. ^_^
Without some HTML snippets and the name of the button you are working with, it is hard to know exactly how to help. However, I can share some general knowledge that may provide the answer for you.
The two most common ways that JavaScript triggers are implemented are:
1. <a> "link buttons":
Your code might look something like:
Click me!
2. <input>/<button>/any element onclick events:
Your code might look something like:
<button onclick="javascript:languageClicked(0)">Click me!</button>
What is my goal: When I click on a certain word (not in paragraph), I want a speech bubble full of info to appear.
So, I already have this bubble, I've made it using a "class" and CSS 3.
Can I, using some basic JavaScript, make my dream come true? I have no knowledge of JavaScript at all.
Is there a way of somehow putting my "bubble class" into "onclick"?
Thanks in advance.
Everything is an option as long as it works on IE =)
There are many plugings for fulfill your requrement. This is a only a one solution.
download bubbletip
You can see a demo here and some instruciton too
you really no need to click the word instead just hover is enough.
Check out JQuery Tools. Their page on tooltips has some samples: http://jquerytools.org/demos/tooltip/dynamic.html
Disclaimer: I am not affiliated with JQuery Tools in any way, just found this doing some quick searching based on user's needs.
First, if you have several bubbles, you should give each of them a separate id attribute. The following javascript will make the bubble appear:
document.getElementById("id_of_the_bubble").style.display = "none";
The following will make a bubble reappear:
document.getElementById("id_of_the_bubble").style.display = "block";
Note: if you have the bubbles be by default with a different display other than block, then you should put it as that display instead of block.
Twitter Bootstrap framework
http://twitter.github.com/bootstrap/javascript.html#popovers