click handler with dojo editor - javascript

i have this code:
<!DOCTYPE HTML>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
type="text/javascript" djConfig="parseOnLoad: true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var myButton = dojo.byId("btn");
dojo.connect(myButton, "onclick", function (evt) {
require(["dojo/_base/xhr", "dojo/parser", "dojo/dom"], function (xhr, parser, dom) {
xhr.get({
url: "teste_apagar.php",
load: function (data) {
alert("as");
var um = [];
dijit.registry.filter(function(w){
if(dojo.indexOf(um)){
w.destroyRecursive();
}
});
dom.byId("result").innerHTML = data;
parser.parse("result");
}
});
});
});
</script>
</head>
<body class="claro">
<script type="text/javascript">
dojo.require("dijit.Editor");
</script>
<div id="btn" style="width: 100px; height: 30px; margin-bottom: 150px; background-color: red;">load</div>
<div id="result">
</div>
</body>
</html>
However, when i click in bold button, or italic, even with right click in top bar with the formatting options, the ajax request is reloaded. So the dojo editor is loaded when i press the formatting toolbar
Any idea ? demo here

You need to execute Dojo code once Dojo is loaded. See http://jsbin.com/ukesup/7.
In the way you are doing the 'myButton' is null beacuse dojo isn't loaded yet and dojo.byId returns invalid value or simply doesn't exist.
Also remember to load required widgets once dojo is loaded. In the sample i used the Dojo <1.7 way:
dojo.addOnLoad(function() {
dojo.require("dijit.Editor");
...
more code here
...
});

Related

Adding a click function to a image element

I am trying to add 2 simple click functions to 2 images and make them "active" when clicked, however for some reason the code is not working.
This is the link to the external file:
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
<link type="text/css" rel="stylesheet" href="blogformat.css" />
<script type="text/javascript" src="likeandshare.js"></script>
</head>
This is the html:
<div class="blog-header">
<h1>This heading should be center aligned and colored</h1>
<p>Italised date and Author entered here</p>
<div id="facebook-like-button">
<img src="images/facebook_like_button_big.jpeg">
</div>
<div id="facebook-share-button">
<img src="images/facebook-share.png">
</div>
</div>
This is the js code:
$(document).ready(main);
var like = function() {
$("#facebook-like-button").click(function() {
$(this).toggleClass("active");
});
};
I'm not sure why the div is not becoming active when clicked but I would also like to attach the function ONLY to the image, rather than the entire div.
Help :D
thanks.
As far as I'm aware, your code should be working. You must be incorrectly calling the ready function.
working example http://jsfiddle.net/2j0s1j8v/3/
All of these events fire back:
share = document.getElementById("facebook-share-button");
share.onclick = function(){
console.log("ONCLICK");
}
share.addEventListener("click", function(){ console.log("CLICK LISTENER"); } );
$("#facebook-share-button").click(function() {
console.log("JQUERY CLICK");
});
Check the console and look at the messages. All of them fire properly. f12 on chrome.
You can simply do this :
$(document).ready(function(){
$("#facebook-like-button").find('img').click(function() {
$(this).toggleClass("active");
});
});
first include jquery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
</head>
second you create a like function and use main function .. you have a main function also or bad typo or what anyway in your case it should be
$(document).ready(like);
if you want to select an image inside the div just use > a >img
var like = function() {
$("#facebook-like-button > a > img").click(function() {
$(this).toggleClass("active");
});
};
https://jsfiddle.net/2j0s1j8v/4/
Like button
$("#facebook-like-button img").click(function () {
$(this).toggleClass("active");
});
Share button
$("#facebook-share-button img").click(function () {
$(this).toggleClass("active");
});
Here is a working example if I understand correctly what you wanted.
adds active class to the image on click.
EDIT: added share as well

How do I make my jquery loading spinner automatic?

I used a JQuery waiting spinner demo from Github and modified it to my liking. I want the spinner to initiate automatically as soon as the page appears (giving time for the larger images on the page to load), however at the moment one has to click 'start waiting' for the spinner to appear.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="waiting.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 50px;
}
.content {
margin-bottom: 50px;
max-width: 500px;
}
button.waiting-done {
display: none;
}
</style>
<!--script src="../libs/jquery/jquery.js"></script-->
<script src="jquery-2.0.2.min.js"></script>
<script src=" jquery.waiting.min.js"></script>
<script type="text/javascript">
$(function () {
var content = $('.content').first().html();
$('button').on('click', function () {
$(this).toggle().siblings('button').toggle();
if ($(this).hasClass('waiting-done')) {
$(this).siblings('.content').waiting('done')
.html(content.substring(0,Math.random() * content.length) + '...');
}
});
});
</script>
</head>
<body>
<div id="demo-fixed">
><button type="button" class="waiting">► start waiting</button>
><button type="button" class="waiting-done">■ waiting done</button>
<div class="content">
</div>
</div>
<script type="text/javascript">
$('#demo-fixed button.waiting').on('click', function () {
var that = this;
$(this).siblings('.content').waiting({ fixed: true });
setTimeout(function() {
$(that).siblings('button').click();
}, 3000);
});
</script>
</body>
</html>
This is my first post so I hope I've given enough info for people to understand. I could copy the JQuery but there's too much and i'm not sure on the relevant part.
Thanks in advance for any help.
jQuery has a nice tool built in for that -- you'll want to read the documentation
$(document).ajaxStart(function() {
//start spinner
});
$(document).ajaxStop(function() {
//stop spinner
});
$(document).ajaxError(function(event, jqXhr, ajaxSettings, thrownError) {
// handle the error
});

Firefox SDK using JQuery Draggable UI

i want to use this: http://jqueryui.com/draggable/ in my Firefox SDK Addon.
This is the source code for a simple example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
My Problem is, that i dont know how to handle the function
$(function() {
$( "#draggable" ).draggable();
});
in my content script, by using port communication between my main and content script.
Unfortunately, you placed the draggable function in a page script, not a content script, making communication way too complicated.
Instead, place all of your jQuery files and create a javascript file (let's call it draggable.js) in the data folder of your add-on (this is the content script) and place the draggable function there. Then use tabs.attach like so.
main.js
var tabs = require("sdk/tabs");
var data = require('sdk/self').data;
var worker;
var widget = require("sdk/widget").Widget({
id: "mozilla-icon",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico"
onClick: function() {
worker = tabs.activeTab.attach({
contentScriptFile: [data.url('jquery.js'),
data.url('jquery-ui.js'),
data.url('draggable.js')]
});
worker.port.on("anything", function(variable) {
console.log("Got variable: "+variable);
}
}
});
Then you can communicate with the script by using self.port.emit in draggable.js and worker.on in main.js
Update: Edited main.js and draggable.js will look like this:
draggable.js
$("#draggable").draggable();
self.port.emit("anything", variable);
You should do anything that pertains to the page in this draggable.js and only send variables out if you need access to any Firefox sdk modules (which are only accessible in main.js).

html code wont show up after loading a html page with jquery

EDIT: How can I extend/edit "appended content" ?
I mean, If I have a div named "website" at "include.html" (the file which I appended using jquerys load) , Can I add text / code to that DIV after appending it?
I have a simple HTML menu page which Im trying to load to every page in my website.
Sorry if its a noob question ;) kinda noob with Jquery/js/html.
Here's one of the files:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cstyles.css">
<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript' src='menu2.js'></script>
<script type='text/javascript' src='menu_load.js'></script>
</head>
<body>
<script>
loadContent();
$(document).on('mouseenter', "#menulist", function() {
mainmenu();
});
</script>
<div id="contact_us" style="background:blue;">Something</div>
</body>
</html>
Heres menu2.js:
function mainmenu() {
$(" #menulist li").hover(function () {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(300);
}, function () {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function () {
mainmenu();
});
heres menu_load.js:
function loadContent() {
$("body").load("include.html");
}
Problem is: After loading the menu successfully (the html file named INCLUDE.html), The content on the page "disappears"...
In this case, the word: something wont show up.
To be more clear, it will show up for a second and then will be replaced by the content on the "include.html" file.
Any suggestions?
thanks in advance!
This happens because the way $("#body").load() works. I would suggest changing that with
.prepend()
That's because you're loading the include.html file in the entire document. You should make a element with an id and load it there. For example
<div id="toload"></div>
Then your jquery function would be:
function loadContent() {
$("#toload").load("include.html");
}

Javascript: How to check if button's click function is assigned

I know this question has been asked, but this is different from that question. I am trying to solve it with mere Javascript.
The problem relates to my backbone.js application, which I've brought down to the simplest form, yet can't get events to work. Any suggestion would be most appreciated.
My code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Learning About Backbone.js Views</title>
<style type="text/css">
#container { padding:20px; border:1px solid #333; width:400px; }
#list-template { display:none; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type='text/javascript'>
var ListView=Backbone.View.extend({
initialize:function(){
console.log('initialized');
},
el:'body',
events:{
'click #add':'time',
'click':'whatApp'
},
time: function()
{
console.log('hooooooop');
},
whatApp:function()
{
console.log('Coool');
}
});
var listView = new ListView();
</script>
</head>
<body>
<button id='add'>Add list item</button>
</body>
</html>
Nothing wrong with what you are doing.
You are trying to initialize the view before the body (or the dom) is there.
You should initialize the view after the dom is loaded:
$(function(){
var listView = new ListView();
});
With jQuery, you should be able to use the Data API to view events and assigned functions:
$('#add').data('events')

Categories

Resources