I'm relatively new to HTML so please bear with me. I'm trying to add a simple javascript function that was already provided to me that grabs images from Flickr to a button. When I click the button, nothing happens. I'm not sure where the error is occuring but I think it has something to do with the function not executing correctly.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>getJSON</title>
<meta charset="utf-8" />
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction()
{ //Functions don't need names. This function will simply run when the page loads
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI,
{ // The "$" simply refers to jQuery. This calls the getJSON function that is found inside jquery-3.1.1.min.js
tags: "Baruch College", //Some filter information in the format set by Flickr, who owns the JSON
tagmode: "any",
format: "json"
})
.done(function( data )
{ //Here, a an unnamed function is created made into the event handler for the "done" event... in other words, this is the code that will manifest itself when the getJSON is done.
$.each( data.items, function( i, item )
{
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
if ( i === 5 )
{
return false;
}
});
});
}
</script>
</body>
</html>
I uploaded the jquery script mentioned in the HTML: http://pastebin.com/2CfRNkvq
You need to specify where the images will be placed after they are retrieved. In the JavaScript code, you can see that for each image, it creates an <img> tag and appends it to the element with id="images".
Just add id="images" to the button element like this:
<button onclick="myFunction()" id="images">Click me</button>
When you click the button, the images will be placed inside the button.
Related
I use the below code to destroy the editor instance.
editor.destroy();
After this, I try to initialize CKEditor and set content using the below code.
CKEDITOR.replace('editor1');
CKEDITOR.instances['editor1'].setData("MY HTML DATA");
But when I am doing like this only the empty HTML page is Shown.
How can I do this in a Correct Way?
If i understand you correctly, following fiddle will help you in initializing and destroying ckeditor.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
</head>
<body>
<div name="editor1">TEST CONTENT</div>
<button id="toogleEditor">
TOOGLE EDITOR
</button>
</body>
</html>
Here is the JS
var editorInstance;
document.getElementById('toogleEditor').addEventListener('click',function() {
if (CKEDITOR) {
if (editorInstance) {
editorInstance.destroy();
editorInstance = undefined;
} else {
editorInstance = CKEDITOR.replace('editor1');
editorInstance.setData("MY HTML DATA");
}
}
})
Fiddle
Operations you have described require time to complete thus please use events to control when editor gets created and destroyed:
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_editor.html#event-instanceReady
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR.html#event-instanceDestroyed
var editor = CKEDITOR.replace( 'editor1', {
language: 'en'
});
// Recreate editor after it has been destroyed
CKEDITOR.on( 'instanceDestroyed', function() {
CKEDITOR.replace('editor1');
} );
// Set editor data after it has been created
CKEDITOR.on( 'instanceReady', function( evt ) {
evt.editor.setData("MY HTML DATA");
} );
I have a javascript file which I want to start when a div has been clicked.
I have already this when clicking the div "option_one", an input will be set to "Option 1":
$("#option_one").click(function() {
$("#input").val('Option 1');
});
How can I fire another js file after clicking the div?
I try something with getScript but I couldn't get it working.
Kind regards,
Arie
There is no need to load the calculate.js file on the click event. Just load it with the page load like so:
HTML:
<!--Your page HTML here... -->
<!--Before your closing body tag-->
<script type="text/javascript" src="somefile.js"></script>
<script type="text/javascript" src="calculate.js"></script>
JS:
// This is inside somefile.js
$("#option_one").click(function() {
$("#input").val('Option 1');
// This function is inside calculate.js
calculate();
});
$("#option_one").click(function() {
$("#input").val('Option 1');
$.getScript( "path/calculating.js" )
.done(function( script, textStatus ) {
//Just after the scripts finishes loading you will be able
//to perform/use functionality included on this script
console.log( textStatus );
})
.fail(function( jqxhr, settings, exception ) {
console.log("Triggered ajaxError handler.");
});
});
im trying to load a piece of html inside a jquery dialog, this piece of code is located in a separated file, but sometimes fails to load it right. It happens like this :
This is how it should have been displayed.
But sometimes(many times actually) does this:
This is the code that calls the dialog
.click(function(){
var me = this;
$.ajax({
type:"POST",
url:"../CuentaEquipo.php",
dataType: "json",
data:"idEquipo="+$(this).attr("idEquipo")+"&idTorneo="+$(this).attr("idTorneo")+"&action=100",
success:function(data){
if(data.data == 1){
var cuentas = $("#cuentas").load("AdministracionCuentaEquipo.html").dialog({
stack:true,
autoOpen:false,
close:function(){
$(this).dialog("close");
}
});
cuentas.dialog('open');
}
And this is the code i'm trying to load (AdministracionCuentaEquipo.html)
<script type="text/javascript">
$("#accioncuentas").tabs();
$(".test").button().click(function(){alert("ASDF")});
</script>
<div id="accioncuentas">
<ul>
<li>Abonos</li>
<li>Cargos</li>
<li>Saldos</li>
</ul>
<div id="abonos">
<button class="test">HI</button>
</div>
<div id="cargos">
<button class="test">HI</button>
</div>
<div id="saldos">
<button class="test">HI</button>
</div>
</div>
The only thing that works is closing and opening when this happens, but it's very annoying to do that. It's there any fix or i'm doing something wrong with the ajax or anything else?
Thanks .
I think the problem is that you are creating/opening the dialog before the HTML has properly been parsed.
From the jQuery documentation:
If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed.
So try changing this code:
var cuentas = $("#cuentas").load("AdministracionCuentaEquipo.html").dialog({
stack:true,
autoOpen:false,
close:function(){
$(this).dialog("close");
}
});
to:
var cuentas = $("#cuentas").load("AdministracionCuentaEquipo.html", function(e)
{
$("#cuentas").dialog({
stack:true,
autoOpen:false,
close:function(){
$(this).dialog("close");
}
});
EDIT: the line $("#accioncuentas").tabs(); might also fire too early, so you could change that script tag to wrap it in a function and call that function in your other code.
Example:
<script type="text/javascript">
function InitializeTabs()
{
$("#accioncuentas").tabs();
}
</script>
and then add the line InitializeTabs(); to your code, for example above the line $("#cuentas").dialog({.
SECOND EDIT: I actually think Dasarp is correct in saying that the $("#accioncuentas").tabs(); is the main problem. Either wrap it in a function as I suggested, or move the entire <script> tag down to the bottom of the file (below all your HTML).
I have a javascript file containing a ajax function with parameter x.
I cannot reveal the function.I want to call the function on page load and on a button click.Also there is a for loop on the function for displaying the variable 10 times i.e,
for(i=0;i<10;i++).
The code for that button is :
HTML file
<html>
<title>Call web service</title>
<head>
<script type="text/Javascript" src="jquery-1.9.1.js"></script>
<script type = "text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload=function()
{
Webservice(1)('onload'); //call 1 where webservice is ajax function
}
</script>
</head>
<body>
<input id="button" type = "button" name = "button" value = "Call Webservice" onClick = "Webservice(5)"/>
</body>
</html>
Right now what I am getting is the onload function is getting overridden when I click the button whereas I want the outputs of both the functions to be displayed simultaneously
So please help me.
Thanks in advance.
Try doing this:
function f1() {
//what you need to do
}
function f2() {
//Do the same thing here also
}
This being your JS, in onload, call f1() and for button click call f2(). If you want f1() to execute before f2(), i suggest you look into locks here:
How to implement a lock in JavaScript
Your javaScript code should be something like this:
var fn = function fn(x) {
// Do something
}
$(function() {
var someValue;
// someValue = ...
// Call function once document is loaded
fn(someValue);
// Bind function as a callback to button click
$('#button').on('click', function(event) {
fn(someValue);
});
});
I've created links to transition yet when the function is supposed to be called using the onmousedown event I get an uncaught undefined function. Clearly my function is defined. I'm am still learning code so what is it I don't see or understand. Any tips will be greatly appreciated.
<html>
<head>
<script type="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="javascript">
$(document).ready(function (){
var url = "phpajaxtut.php";
});
function swapContent(cv){
$("#myDiv").html("animated gif goes here").show();
.post(url, {contentVar:cv}, function(data){
$("#myDiv").html(data).show();
});
}
</script>
Click the text
Click the text
Click the text
</head>
<body >
<div id ="myDiv">My default content</div>
</body>
</html>
Why not just use $.click(); instead, since you're already using jQuery, and forgo the hyperlinks? You can easily style some spans to look like as if that's what you want. My example just updates some text, but in there you can place / call your function.
See here:
// html
<span>Click Me</span>
<br />
<span>Click Me</span>
// js
var n = 0;
$("span").click(function(){
$(this).text($(this).text() + " " + n++);
});
Do you need a $ before .post?
$.post(url, {contentVar:cv}, function(data){
$(document).ready(function (){
var url = "phpajaxtut.php";
});
The var url isn't global. It can only be used inside the function
var url; //global url
$(document).ready(function (){
url = "phpajaxtut.php"; // set global url
});