Firefox simple Extension to get clicked items on panel - javascript

in simple extension of Firefox i have:
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[id^='menuitem']").click(function() {
var id=$(this).attr('id');
addon.port.emit("id", id);
});
});
</script>
</head>
<body class="body">
<div id="menuitem_1" class="menu">ITEM 1</div>
<div id="menuitem_2" class="menu">ITEM 2</div>
<div id="menuitem_3" class="menu">ITEM 3</div>
</body>
</html>
now i'm trying to handle ids by this code in index.js:
var tgbutton = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");
var contextMenu = require("sdk/context-menu");
var button = tgbutton.ToggleButton({
id: "updaterui",
label: ".Net Updater",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleChange
});
var panel = panels.Panel({
contentURL: self.data.url("./popup.html"),
onHide: handleHide,
contentScript: "self.port.emit('resize', " +
"{width: 300," +"height: 145});"
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
panel.port.on("id", function (id) {
console.log(id);
});
panel.port.on("resize", function({width, height})
{
panel.resize(width, height);
});
panel.port.on("click-link", function(url) {
console.log(url);
});
i want to get div id by click on that. after click on menuitem_1 i must be open other popup. this code for click on div and get id is not correct and i can not resolve that.

SOLUTION:
after two week debug and try to read mozilla document i can resolve this problem now. full source code:
** --- UPDATED --- **
index.js:
var data = require("sdk/self").data;
var tgbutton = require('sdk/ui/button/toggle');
var panel = require("sdk/panel").Panel({
contentURL: data.url("panel.html"),
contentScriptFile: [data.url("jquery.min.js"),data.url("get-click.js")],
onHide: handleHide,
contentScript: "self.port.emit('resize', " +
"{width: 300," + "height: 145});"
});
var button = tgbutton.ToggleButton({
id: "updaterui",
label: "some lable",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleChange
});
function handleChange(state) {
panel.show({
position: button
});
}
function handleHide() {
button.state('window', {checked: false});
}
panel.on("show", function () {
panel.port.emit("show");
});
panel.port.on("resize", function ({width, height}) {
panel.resize(width, height);
});
panel.port.on("id", function (id) {
console.log(id);
panel.hide();
});
get-click.js:
$(document).ready(function () {
$("[id^='menuitem']").click(function() {
var id=$(this).attr('id');
self.port.emit("id", id);
});
});
panel.html:
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery.min.js"></script>
<script src="get-text.js"></script>
<style type="text/css">
.body {
direction: rtl;
font-family: tahoma;
margin: 5px;
}
.menu{
width:96%;
height: 30px;
background-color:#fff;
padding-top:15px;
padding-right:10px;
clear: both;
cursor: pointer;
}
.menu:hover{
background-color: #ddd;
}
</style>
</head>
<body class="body">
<div id="menuitem_1" class="menu">dsfsf</div>
<div id="menuitem_2" class="menu">sssssssss</div>
<div id="menuitem_3" class="menu">fffffffffff</div>
</body>
</html>

Related

Load inserted text in dialog

I am using summernote 0.8 and jquery 3.5.
I have created a dialog that inputs synonyms for example, when inputing test1, test2, test3 in the dialog a special tag is filled into the editor like the following:
<span data-function="addSynonym" data-options="[test2, test3]"><span style="background-color: yellow;">test1</span></span>
I would like to load the dialog with these values, edit them and add the updated values to the editor's text field.
Find below my minimum viable example:
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
tabsize: 2,
toolbar: [
['insert', ['synonym', 'codeview']]
],
});
});
(function(factory) {
/* global define */
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(window.jQuery);
}
}(function($) {
$.extend($.summernote.plugins, {
'synonym': function(context) {
var self = this;
var ui = $.summernote.ui;
var $editor = context.layoutInfo.editor;
var options = context.options;
context.memo('button.synonym', function() {
return ui.button({
contents: '<i class="fa fa-snowflake-o">',
tooltip: 'Create Synonym',
click: context.createInvokeHandler('synonym.showDialog')
}).render();
});
self.initialize = function() {
var $container = options.dialogsInBody ? $(document.body) : $editor;
var body = '<div class="form-group">' +
'<label>Add Synonyms (comma - , - seperated</label>' +
'<input id="input-synonym" class="form-control" type="text" placeholder="Insert your synonym" />'
'</div>'
var footer = '<button href="#" class="btn btn-primary ext-synonym-btn">OK</button>';
self.$dialog = ui.dialog({
title: 'Create Synonym',
fade: options.dialogsFade,
body: body,
footer: footer
}).render().appendTo($container);
};
// You should remove elements on `initialize`.
self.destroy = function() {
self.$dialog.remove();
self.$dialog = null;
};
self.showDialog = function() {
self
.openDialog()
.then(function(data) {
ui.hideDialog(self.$dialog);
context.invoke('editor.restoreRange');
self.insertToEditor(data);
console.log("dialog returned: ", data)
})
.fail(function() {
context.invoke('editor.restoreRange');
});
};
self.openDialog = function() {
return $.Deferred(function(deferred) {
var $dialogBtn = self.$dialog.find('.ext-synonym-btn');
var $synonymInput = self.$dialog.find('#input-synonym')[0];
ui.onDialogShown(self.$dialog, function() {
context.triggerEvent('dialog.shown');
$dialogBtn
.click(function(event) {
event.preventDefault();
deferred.resolve({
synonym: $synonymInput.value
});
});
});
ui.onDialogHidden(self.$dialog, function() {
$dialogBtn.off('click');
if (deferred.state() === 'pending') {
deferred.reject();
}
});
ui.showDialog(self.$dialog);
});
};
this.insertToEditor = function(data) {
console.log("synonym: " + data.synonym)
var dataArr = data.synonym.split(',');
var restArr = dataArr.slice(1);
var $elem = $('<span>', {
'data-function': "addSynonym",
'data-options': '[' + restArr.join(',').trim() + ']',
'html': $('<span>', {
'text': dataArr[0],
'css': {
backgroundColor: 'yellow'
}
})
});
context.invoke('editor.insertNode', $elem[0]);
};
}
});
}));
<head>
<meta charset="UTF-8">
<title>Summernote with Bootstrap 4</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.15/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.15/dist/summernote-bs4.min.js"></script>
</head>
<body style="
padding-top: 50px;
border-left-width: 50px;
padding-left: 50px;
border-right-width: 50px;
padding-right: 150px;
">
<div class="container">
<div class="summernote">
<p>Hello World!</p>
This text should be replaced by the dialog. </div>
</div>
</body>
Any suggestions how to do add this update functionality to my yellow text?
I appreciate your replies!
Using the oninit callback, we can easily use jquery methods to select that embedded text and trigger a click on that button you added in your plugin.
It's the first time I use Summernote. So to bring a clear code and a similar syntax in the [UPDATE], I added jquery-ui dialogBox that would be used to update the clicked span.
And for this I used updateSpan() function that receives the (targeted) current span object and it's new value as arguments.
var i=0;
function updateSpan(object,value){
object.text(value.split(',', 1));
object.attr('data-options',value.split(',', 1));
object.attr('data-all','['+value+']');
object.css('backgroundColor','yellow');
object.parent().append(" ");
}
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
tabsize: 2,
toolbar: [
['insert', ['synonym', 'codeview']]
],
callbacks: {
onInit: function() {
$(".note-editable").on('click','span[data-function="addSynonym"]', function (e) {
var spanvalue=($(this).attr('data-all')).replace(/[\[\]']+/g,'');
var targetSpan=$(this);
//console.log(spanvalue);
$('#upDialog').dialog({
open : function (event, ui) {
$('#upDialog #input-synonym').empty().val(spanvalue);
//console.log(spanvalue);
},
modal: true,
title: 'Dialog',
show: {
effect: "scale",
duration: 200
},
resizable: false,
buttons: [{
text: "ok",
click: function () {
updateSpan(targetSpan,$('#upDialog #input-synonym').val());
$(this).dialog("close");
targetSpan.focus();
}
}]
});
});
}
}
});
});
(function(factory) {
/* global define */
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(window.jQuery);
}
}(function($) {
$.extend($.summernote.plugins, {
'synonym': function(context) {
var self = this;
var ui = $.summernote.ui;
var $editor = context.layoutInfo.editor;
var options = context.options;
context.memo('button.synonym', function() {
return ui.button({
contents: '<i class="fa fa-snowflake-o">',
tooltip: 'Create Synonym',
click: context.createInvokeHandler('synonym.showDialog')
}).render();
});
self.initialize = function() {
var $container = options.dialogsInBody ? $(document.body) : $editor;
var body = '<div class="form-group">' +
'<label>Add Synonyms (comma - , - seperated</label>' +
'<input id="input-synonym" class="form-control" type="text" placeholder="Insert your synonym" />'
'</div>'
var footer = '<button href="#" class="btn btn-primary ext-synonym-btn">OK</button>';
self.$dialog = ui.dialog({
title: 'Create Synonym',
fade: options.dialogsFade,
body: body,
footer: footer
}).render().appendTo($container);
};
// You should remove elements on `initialize`.
self.destroy = function() {
self.$dialog.remove();
self.$dialog = null;
};
self.showDialog = function() {
self
.openDialog()
.then(function(data) {
ui.hideDialog(self.$dialog);
context.invoke('editor.restoreRange');
self.insertToEditor(data);
//console.log("dialog returned: ", data)
})
.fail(function() {
context.invoke('editor.restoreRange');
});
};
self.openDialog = function() {
return $.Deferred(function(deferred) {
var $dialogBtn = self.$dialog.find('.ext-synonym-btn');
var $synonymInput = self.$dialog.find('#input-synonym')[0];
ui.onDialogShown(self.$dialog, function() {
context.triggerEvent('dialog.shown');
$dialogBtn
.click(function(event) {
event.preventDefault();
deferred.resolve({
synonym: $synonymInput.value
});
});
});
ui.onDialogHidden(self.$dialog, function() {
$dialogBtn.off('click');
if (deferred.state() === 'pending') {
deferred.reject();
}
});
ui.showDialog(self.$dialog);
});
};
this.insertToEditor = function(data) {
i++;
//console.log("synonym: " + data.synonym)
var dataArr = data.synonym.split(',');
var restArr = dataArr.slice(1);
var $elem = $('<span>', {
'data-function': "addSynonym",
'data-id': i,
'data-options': '[' + restArr.join(',').trim() + ']',
'data-all': '[' + dataArr.join(',').trim() + ']',
'html': $('<span>', {
'text': dataArr[0],
'css': {
backgroundColor: 'yellow'
}
})
});
context.invoke('editor.insertNode', $elem[0]);
context.invoke('editor.insertText', ' ');
//context.invoke('editor.restoreRange');
//Still a bug : https://github.com/summernote/summernote/issues/3249
$('.summernote').summernote('editor.insertText', ' ');
context.invoke('editor.focus');
}
}
});
}));
#upDialog{
display:none;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.15/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.15/dist/summernote-bs4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<body style="
padding-top: 50px;
border-left-width: 50px;
padding-left: 50px;
border-right-width: 50px;
padding-right: 150px;
">
<div class="container">
<div class="summernote">
<p>Hello World!</p>
This text should be replaced by the dialog.
</div>
<div id="upDialog" title="Update Value"><input id="input-synonym" class="form-control" type="text" placeholder="Insert your synonym" /></div>
</div>
</body>
You can replace this dialog by a modal to look identical or adapt the Dialog design to the old one.

Firefox add-on : Make the panel persist when clicking on the current web document

How to make the firefox addon panel stay visible while clicking on the current document.Im using the Toggle button attaching the panels from firefox official document.is there anyway to achieve the same.thanks in advance.
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");
var button = ToggleButton({
id: "my-button",
label: "my button",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleChange
});
var panel = panels.Panel({
contentURL: self.data.url("panel.html"),
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}

jquery ui autocomplete with multiple fields

this code works just fine, but the second input field does not show images appearing with the text suggestions. I would appreciate if someone could take a look and let me know what needs to be changed in the js for it to work.
Example queries: clinton, bush
you can see the script here http://predcast.com/include/autoc/jqui/test2.php
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Autocomplete: Custom HTML in Dropdown</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<style>
.loading {
display: none;
width: 16px;
height: 16px;
background-image: url(/img/loading.gif);
vertical-align: text-bottom;
}
#autocomplete.ui-autocomplete-loading ~ .loading {
display: inline-block;
}
.ui-menu-item {
padding:1px;
margin:1px;
}
.ac-m {
height:block;
overflow:auto;
padding:2px 2px 2px 2px;
}
.ac-img {
max-width:30px;
float:left;
margin:2px 2px 2px 2px;
}
.ac-title {
margin:1px;
font-size:14px;
}
.ui-autocomplete {
margin:1px;
}
</style>
</head>
<body>
<form action="http://www.test.com/">
<input class="autocomplete" type="text" placeholder="Option 1" name="e1">
<input class="autocomplete" type="text" placeholder="Option 2" name="e2">
<span class="loading"></span>
</form>
<script>
/*
* jQuery UI Autocomplete: Custom HTML in Dropdown
* http://salman-w.blogspot.com/2013/12/jquery-ui-autocomplete-examples.html
*/
$(function () {
$('.autocomplete').autocomplete({
delay: 500,
minLength: 3,
source: function (request, response) {
$.getJSON("http://predcast.com/include/autoc/jqui/jsond.php", {
q: request.term,
}, function (data) {
var array = data.error ? [] : $.map(data.movies, function (m) {
return {
label: m.title,
year: m.year,
img: m.img,
};
});
response(array);
});
},
focus: function (event, ui) {
event.preventDefault();
},
}).data("ui-autocomplete")._renderItem = function (ul, item) {
var $a = $("<div class='ac-m'></div>");
if (item.img) {
$("<span></span>").addClass(item.icon).appendTo($a).append("<img src='" + item.img + "' border='0' class='ac-img' />");
}
$("<span class='ac-title'></span>").text(item.label).appendTo($a);
return $("<li></li>").append($a).appendTo(ul);
};
});
</script>
</body>
</html>
The problem is related to the way you are defining the _renderItem extension point.
In your code, you are redefining the jquery-ui autocomplete _renderItem function only for your first widget instance, so the _renderItem for your second autocomplete instance is the default one defined in the jquery-ui code.
You are initializating the autocomplete for your 2 inputs with this $('.autocomplete').autocomplete({ ...}) then you get the first widget instance with this instruction .data("ui-autocomplete") and then redefine the _renderItem function for this instance only.
You can define it for all your instances like this:
// Create your widget instances
$('.autocomplete').autocomplete({
delay: 500,
minLength: 3,
source: function (request, response) {
$.getJSON("http://predcast.com/include/autoc/jqui/jsond.php", {
q: request.term,
}, function (data) {
var array = data.error ? [] : $.map(data.movies, function (m) {
return {
label: m.title,
year: m.year,
img: m.img,
};
});
response(array);
});
},
focus: function (event, ui) {
event.preventDefault();
}
});
// Then redefine the _renderItem for each instance
$('.autocomplete').each(function() {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
var $a = $("<div class='ac-m'></div>");
if (item.img) {
$("<span></span>").addClass(item.icon).appendTo($a).append("<img src='" + item.img + "' border='0' class='ac-img' />");
}
$("<span class='ac-title'></span>").text(item.label).appendTo($a);
return $("<li></li>").append($a).appendTo(ul);
};
});

VB.NET webbrowser script errors

Recently I was able to load javascript in webbrowser before downloading source with this code:
WebBrowser1.Document.Window.DomWindow.execscript("text/JavaScript")
Dim MSDNpage2 As String = WebBrowser1.Document.Body.InnerHtml
My.Computer.FileSystem.WriteAllText("e:\msdn2.txt", MSDNpage2, True)
RichTextBox6.Text = MSDNpage2
Unfortunately, the first line causes a browser error. The following code:
WebBrowser1.ScriptErrorsSuppressed = True
I turn off the notifications, but in this case, the source does not link one I care about. Therefore I ask for your help in solving this problem. I thought that automatic clicking on the 'no' could help, but I could not locate the process responsible for displaying a message.
I don't known how to set attributes, when i've got no error, then code is looks like this:
<DIV id=serialInfoBox>
<DIV class=l>
<DIV class=progressBar>
<DIV class=o>
<DIV style="WIDTH: 0px" class=i></DIV></DIV></DIV><HGROUP>
<H2>SGU Stargate Universe</H2></HGROUP></DIV>
<DIV class=r><IMG src="/static/serials/stargate-universe_small.jpg"> </DIV></DIV>
<DIV id=player>
<DIV id=player_2 hash="wZlV90mq4I3LgyGB6WGIgyKJvMzHhS2EvAGqhWmI25JIRMyrXIUnjAmAeIKJZqQJcIGBV1HInuKLuS2LnS1ZHWTMDqGrBk0FF9FAPSxMvuSJnAxLjZxHXy1IdSzEiSHJ1W1M" jQuery110007841996969566763="5"></DIV>
<DIV class=clearfix></DIV></DIV></DIV>
<DIV id=underPlayer><A class=l href="odcinek,stargate-universe,lost,s01e15.html">poprzedni odcinek</A> <A class=c watched="0" jQuery110007841996969566763="19">zaznacz jako obejrzane</A> <A class=r href="odcinek,stargate-universe,pain,s01e17.html">następny odcinek</A> </DIV>
<SCRIPT type=text/javascript>
$(document).ready(function() {
$('#langs li').click(function(e) {
e.preventDefault();
$('#players li').hide();
$('#players li.'+$(this).attr('id')).show();
$('#langs li').removeClass('active');
$(this).addClass('active');
});
$('#player_2').click(function(e) {
$.post("getVideo.html", {hash: $(this).attr('hash')}, function(data) {
$('#player').css('background','#000').css('text-align','center');
$('#player').html(data);
$('html, body').animate({
scrollTop: $("#player").offset().top-27
}, 1000);
});
});
$('#players a.switcher').click(function(e) {
e.preventDefault();
$.post("getVideo.html", {hash: $(this).parent().attr('hash')}, function(data) {
$('#player').html(data);
$('html, body').animate({
scrollTop: $("#player").offset().top-27
}, 1000);
});
});
$(document).on('click','a.tup',function(e) {
e.preventDefault();
var c_id = $(this).parent().attr('cid');
$.post("commentVote.html",{cid: c_id, mode: "up"}, function(data) {
if (data >= 0) {
$('#cid'+c_id+' span').removeClass('red').removeClass('green').addClass('green');
data = '+'+data;
} else {
$('#cid'+c_id+' span').removeClass('red').removeClass('green').addClass('red');
}
$('#cid'+c_id+' span').html(data);
$('#cid'+c_id+' .tup').remove();
$('#cid'+c_id+' .tdown').remove();
}) ;
});
$(document).on('click','a.tdown',function(e) {
e.preventDefault();
var c_id = $(this).parent().attr('cid');
$.post("commentVote.html",{cid: c_id, mode: "down"}, function(data) {
if (data >= 0) {
$('#cid'+c_id+' span').removeClass('red').removeClass('green').addClass('green');
data = '+'+data;
} else {
$('#cid'+c_id+' span').removeClass('red').removeClass('green').addClass('red');
}
$('#cid'+c_id+' span').html(data);
$('#cid'+c_id+' .tup').remove();
$('#cid'+c_id+' .tdown').remove();
}) ;
});
$('#underPlayer .c').bind('click', function() {
var el = $(this);
if ($(this).attr('watched') == 0) {
$.ajax({type: "POST", url: "/reports,seen.html",timeout: 10000,data: "user=1075505&ep=38361", success: function(data) {
if (data == 1) {
el.html('oznacz jako nieobejrzane').attr('watched','1');
}
}
});
} else {
$.ajax({type: "POST", url: "/reports,seen.html",timeout: 10000,data: "user=1075505&rem=1&ep=38361", success: function(data) {
if (data == 1) {
el.html('zaznacz jako obejrzane').attr('watched','0');
}
}
});
}
return false;
});
})
</SCRIPT>
and there is no link I need, but when there is my link, then i've got an error and code looks like this:
<DIV id=serialInfoBox>
<DIV class=l>
<DIV class=progressBar>
<DIV class=o>
<DIV style="WIDTH: 0px" class=i></DIV></DIV></DIV><HGROUP>
<H2>SGU Stargate Universe</H2></HGROUP></DIV>
<DIV class=r><IMG src="/static/serials/stargate-universe_small.jpg"> </DIV></DIV>
<DIV style="TEXT-ALIGN: center; BACKGROUND: #000" id=player>
<DIV style="POSITION: relative; WIDTH: 750px">
<DIV style="Z-INDEX: 0; TEXT-ALIGN: center; WIDTH: 750px; BACKGROUND: #000; COLOR: #fff">
<DIV class=embed>
<DIV style="Z-INDEX: 0; POSITION: relative; WIDTH: 750px; HEIGHT: 429px; CLEAR: both"><SPAN id=aeceedb4c2667cf66b0cfe9780811fa6></SPAN></DIV>
<SCRIPT type=text/javascript src="http://premium.iitv.info/static/player/flowplayer-3.2.11.min.js"></SCRIPT>
<SCRIPT type=text/javascript>
$(document).ready( function(){
$f("aeceedb4c2667cf66b0cfe9780811fa6", "http://premium.iitv.info/static/player/flowplayer.commercial-3.2.15.swf", {
key: '#$3f90d28e7547ada6c98',
clip: {
here is url: ---> url: 'http://stream.streamo.tv/?scode=wZvoQAIH41HF5MxJiH2MAg0YeVKAFATnLMTGluyIl4HFeZyGCAUFhqGM5DREz9JnlM2MUAJEmq3HlSIBVgxq6OKqeRxHDATERSUZTAmqkHGn5cJA1yyZgA0pKcHDdAmMkRGZ2A2pfWKqeSKD4NUIQkRqVWwEIcRrLWmEKIaJbERnDgPFcW3A2RwAj52F6MUIgMyADImXjfvq2EKoMAJGxywD0y0Az50HeLmIy1zM0WTA19FBgWTIBc0FWWTAUAwrCuaEASKIiHQplWwMwMxZm9HZeO1FGMSHMSyELEwZaSRqXSHMjWmX6W2AUOUG2I2DmM0YU9RqjgFAiS0XLcJBDcJBQEQnLcJD142IaM0AL50nSOQJkkxEBSHrBMQBIOmM2qaqGgxo5SzJdAIpjymZ5bKLlyxrDuSokNyZ4ExZPqIJkVwpyqSZbMwZxITEjVIFyqSZIMaMPuUIeSxF5RSHzEQGIyTnIA3o2LwIJ1ToPE1DFyTpUqRqiHHpuSTF0RypBqmpacaG',
provider: 'lighttpd',
scaling: 'fit',
backgroundGradient: 'none',
autoPlay: false,
autoBuffering: false
},
canvas: {
backgroundColor:'#000',
backgroundGradient: 'none'
},
plugins: {
lighttpd: {
url: 'flowplayer.pseudostreaming-3.2.11.swf',
queryString: escape('?start=${start}')
},
controls: {
url: 'flowplayer.controls-3.2.14.swf',
autoHide: 'always'
}
}
});
});
</SCRIPT>

Unable to save to store in Dojo

I am trying to do simple operations with dojo datagrid before I move on to complicated ones. However, I am now stuck at saving to store. I am using the code in the browser and the players data in a .json file, for convenience, I put all in the source code for now.
When I refresh the browser, the data I just saved is not updated to the json file. Why is it so? And how do I fix it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
.dojoxGrid table { margin: 0; }
html, body { width: 100%; height: 100%; margin: 0; }
</style>
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
// our test data store for this example:
var store = new dojo.data.ItemFileWriteStore({
//url: 'players.json'
data: {
label: 'pId',
items: [{"Player":"Wayne Gretzky","Games":"1487","Points":"2857","PPG":"1.92"},
{"Player":"Mark Messier","Games":"1756","Points":"1887","PPG":"1.07"},
{"Player":"Gordie Howe","Games":"1767","Points":"1850","PPG":"1.04"},
{"Player":"Ron Francies","Games":"1731","Points":"1798","PPG":"1.03"},
{"Player":"Marcel Dionne","Games":"1348","Points":"1771","PPG":"1.31"},
{"Player":"Steve Yzerman","Games":"1514","Points":"1755","PPG":"1.16"},
{"Player":"Mario Lemieux","Games":"915","Points":"1723","PPG":"1.88"},
{"Player":"Joe Sakic","Games":"1378","Points":"1641","PPG":"1.19"},
{"Player":"Jaromir Jagr","Games":"1273","Points":"1599","PPG":"1.25"},
{"Player":"Phil Esposito","Games":"1282","Points":"1590","PPG":"1.24"}]}
});
// set the layout structure:
var layout = [{
field: 'Player',
name: 'Player',
width: '200px',
styles:"text-align:center;"
},
{
field: 'Games',
name: 'Games Played',
width: '50px',
styles:"text-align:center;"
},
{
field: 'Points',
name: 'Points',
width: '50px',
styles:"text-align:center;"
},
{
field: 'PPG',
name: 'Points Per Game',
width: '50px',
styles:"text-align:center;"
}];
// create a new grid:
var grid = new dojox.grid.DataGrid({
query: {
Player: '*'
},
store: store,
clientSort: true,
rowSelector: '20px',
structure: layout
},
document.createElement('div'));
// append the new grid to the div "gridContainer":
dojo.byId("gridContainer").appendChild(grid.domNode);
// Call startup, in order to render the grid:
grid.startup();
//dojo.forEach(grid.structure, function(itemData, index, list){
//itemData.editable = true;
//});
var btnAdd = new dijit.form.Button({
label: "Add",
onClick: function(){
grid.store.newItem({
Player: "Someone",
Games: "1000",
Points: "1000",
PPG: "1.0"
});
}
}, "btnAdd");
var btnRemove = new dijit.form.Button({
label: "Remove",
onClick: function(){
var items = grid.selection.getSelected();
if(items.length){
dojo.forEach(items, function(selectedItem){
if(selectedItem !== null){
grid.store.deleteItem(selectedItem);
}
});
}
}
}, "btnRemove");
var btnSave = new dijit.form.Button({
label: "Save",
onClick: function(){
grid.store.save({onComplete: saveDone, onError: saveFailed});
}
}, "btnSave");
});
function saveDone(){
alert("Done saving.");
}
function saveFailed(){
alert("Save failed.");
}
</script>
</head>
<body class=" tundra">
<button id="btnAdd" type="button"></button>
<button id="btnRemove" type="button"></button>
<button id="btnSave" type="button"></button>
<br />
<div id="gridContainer" style="width: 100%; height: 100%;"></div>
</body>
</html>
The source code is also here: http://jsfiddle.net/cDCWk/
You need to implement something server side to handle the .save() part of dojo.data.ItemFileWriteStore as explained here.
I have modified your source code, in order for it to be a bit easier to deal with: http://jsfiddle.net/kitsonk/cDCWk/1/
Also, personally, implementing something server-side for ItemFileWriteStore might be a bit silly when you can far more easily integrate the Grid with the dojox.data.JsonRestStore or the new dojo.store.JsonRest.

Categories