I want to set some cookie inside firefox addon contentScipt:
// Content Script ( js/firefox.js )
self.port.on("start", function() {
var request;
document.cookie = "name=value; path=/;";
request = new XMLHttpRequest();
request.open('GET', '/', true);
request.send(null);
});
But when I see request headers and cookies there is nothing about cookie 'name'.
Is it possible to add cookie inside contentScipt?
Main addon script looks like this
// Main Addon Script ( js/index.js )
var data = require("sdk/self").data;
var button = require("sdk/ui/button/toggle").ToggleButton({
id: "button",
label: "button",
icon: "./img/icon/16.png",
onChange: handleChange
});
var panel = require("sdk/panel").Panel({
contentURL: data.url("popup.html"),
contentScriptFile: data.url("js/firefox.js"),
position: button,
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
panel.on("show", function () {
panel.port.emit("start");
});
Try:
self.port.on("start", function() {
var request;
unsafeWindow.document.cookie = "name=value; path=/;";
request = new XMLHttpRequest();
request.open('GET', '/', true);
request.send(null);
});
Related
i have the following reactjs code to generate two dropdown list where the ddlproducts gets loaded by ddlCategories selection. but when i called the function getDataById() and tried to print the ajax populated array data2 to alert(), there was no alert() there were two alerts none of the alerts were prompted. it shown this error message on the IE console,
execution did not reached the function getDataById() 'cus the alert() in that function even didn't execute
SCRIPT438: Object doesn't support property or method 'getDataById'
correction: once the calling of this.props.getDataById() was changed to this.getDataById() it worked
but how do populate the ddlProducts dropdown. how do i access tag of the ddlProducts and then add the options to it?
here is the code:
var gdata=[];
var trStyle = {
'color': 'black',
'border-style' :'solid',
'margin-left':'20%'
};
var HCOMP = React.createClass({
getInitialState:function(){
return{data1:[], data2:[], isMounted:false, selectedValue:0}
},
componentDidMount:function(){
this.getData();
this.setState({isMounted:true})
},
ddlProdCatsChanegeEvent: function(e) {
if (this.state.isMounted)
{
var newV = ReactDOM.findDOMNode(this.refs.refProdCats).value;
var seleValue = newV;
this.setState({selectedValue:newV}, function(){
this.getDataById(this.state.selectedValue);
alert(this.state.data2);
});
}
},
render: function() {
var prodCats = this.state.data1.map(function(ele, index){// <PRODCATSOPTION optValue={ele.ProductCategoryID} optText={ele.Name} />
return <option value={ele.ProductCategoryID} data-key={index}>{ele.Name}</option>
});
prodCats.unshift(<option value={''}>{'---- select category ------'}</option>)
return (<div>Prodcut Category:<br /><select id="ddlCategories" ref="refProdCats" onChange={this.ddlProdCatsChanegeEvent}>{prodCats}</select><br />
Products:<br /><select id="ddlPorducts" ref="refProds"></select><br /></div>
)
},
getDataById:function(catId){
var x = catId;
alert('rec id:'+x);
$.ajax({
url:'http://localhost:53721//Home/GetProductCats?id='+ x,
method:'GET',
success:function(d1){
this.setState({data2:d1});
}.bind(this),
error:function(){
alert('ERROR');
}.bind(this)
})
},
getData:function(){
//ajax here
$.ajax({
url:'http://localhost:53721//Home/GetProductCats',
method:'GET',
success:function(d1){
this.setState({data1:d1});
}.bind(this),
error:function(){
alert('ERROR');
}.bind(this)
})
}
});
var PRODOPTIONS = React.createClass({
render:function(){
return(<option value={this.props.optValue}>{this.props.optText}</option> )
}
});
var PRODCATSOPTION = React.createClass({
render:function(){
return(<option value={this.props.optValue}>{this.props.optText}</option> )
}
});
ReactDOM.render( <HCOMP/>, document.getElementById('d1') );
Try updating ddlProdCatsChanegeEvent to ddlPropCatsChangeEvent.
i want to make the markers clustered with markerClusterer but i cannot get the map instance with jquery ui map . js
tried:
var map = $('#map_canvas').gmap('getMap');
or
var map = $('map_canvas').gmap('get', 'map');
and after:
var markerCluster = new MarkerClusterer(map, allMarkers);
but with errors
Thank you
Tried this . No Errors but no clusters...
$('#map_canvas').gmap({ 'callback': function () {
var self = this;
$.getJSON('Data/markers.json', function (data) {
$.each(data.markers, function (i, marker) {
self.addMarker({ 'position': new google.maps.LatLng(marker.latitude,marker.longitude)}).click(function () {
$.ajax({
type: "GET",
url: "/LocoMap/LocoMap/InfoMobilePartialView/",
data: { latitude: marker.latitude, longitude: marker.longitude},
success: function (data) {
$("#marker-info").remove();
$(document.body).append("<div id='marker-info' data-role ='page'> </div>");
var $contentDiv = $("#marker-info");
$contentDiv.html(data).trigger('create');
$.mobile.changePage("#marker-info", { changeHash: false, type: "get", transition: 'pop',rel:"external" });
},
error: function (errorData) { onError(errorData); }
});
});
});
});
self.set('MarkerClusterer', new MarkerClusterer(this.get('map'), this.get('markers')));
}});
$('#map_canvas').gmap({'zoom': 2, 'disableDefaultUI':true}).bind('init', function(evt, map) {
$.getJSON( 'Data/markers.json', function(data) {
$.each( data.markers, function(i, m)
$('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(m.latitude, m.longitude), 'bounds':true } );
});
});
$('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map,$(this).gmap('get', 'markers')));
});
with no errors and no clusters
it seems **$(this).gmap('get', 'markers')));** returns Array[0]
I have solved the problem myself now, below is the solution:
No problem any more. I am only writing this to get my text validated.
<script type="text/javascript">
/***************************************************/
/* THIS VARIABLE IS USED TO TRANSPORT THE NEW ID. */
var assignmentId;
/***************************************************/
$("#btnSave").click
(
function () {
var inputData = $("form").serialize();
var url = $("form").attr("action");
$.post(url, inputData, function (data) {
/********************************************************/
/* NOW UPLOADIFY GETS THE NEW ID!! */
assignmentId = data.AssignmentID;
alert(assignmentId.toString());
$('#fileuploader').uploadifySettings("scriptData", { 'currentValue': assignmentId });
/********************************************************/
$('#fileuploader').uploadifyUpload();
});
}
);
$("#fileuploader").uploadify({
'uploader': '#Url.Content("/Scripts/uploadify/uploadify.swf")',
'cancelImg': '/Scripts/uploadify/cancel.png',
'buttonText': 'Browse For File',
'script': '#Url.Action("Upload")',
'folder': '/uploads',
'scriptData': { 'currentValue': assignmentId },
'onAllComplete': function (event, data) { window.location = "/Assignment/" + assignmentId; },
'onError': function (a, b, c, d) {
},
'onSelectOnce': function (event, data) { noFilesToUpload = false; },
'fileDesc': 'Media Files',
'fileExt': '*.jpg;*.jpeg;',
'sizeLimit': 27000000,
'multi': false,
'auto': false
});
</script>
Thank you!
I have solved the problem myself now, below is the solution:
No problem any more. I am only writing this to get my text validated.
<script type="text/javascript">
/***************************************************/
/* THIS VARIABLE IS USED TO TRANSPORT THE NEW ID. */
var assignmentId;
/***************************************************/
$("#btnSave").click
(
function () {
var inputData = $("form").serialize();
var url = $("form").attr("action");
$.post(url, inputData, function (data) {
/********************************************************/
/* NOW UPLOADIFY GETS THE NEW ID!! */
assignmentId = data.AssignmentID;
alert(assignmentId.toString());
$('#fileuploader').uploadifySettings("scriptData", { 'currentValue': assignmentId });
/********************************************************/
$('#fileuploader').uploadifyUpload();
});
}
);
$("#fileuploader").uploadify({
'uploader': '#Url.Content("/Scripts/uploadify/uploadify.swf")',
'cancelImg': '/Scripts/uploadify/cancel.png',
'buttonText': 'Browse For File',
'script': '#Url.Action("Upload")',
'folder': '/uploads',
'scriptData': { 'currentValue': assignmentId },
'onAllComplete': function (event, data) { window.location = "/Assignment/" + assignmentId; },
'onError': function (a, b, c, d) {
},
'onSelectOnce': function (event, data) { noFilesToUpload = false; },
'fileDesc': 'Media Files',
'fileExt': '*.jpg;*.jpeg;',
'sizeLimit': 27000000,
'multi': false,
'auto': false
});
</script>
I'm still finding my way with Backbone and I've always use Prototype instead of jQuery in the past so please forgive me if I'm doing something stupid.
I'm trying to develop a UI containing several connected unordered lists where each sortable list is represented by a separate Backbone collection. I'm using ICanHaz and Mustache templates but that's not of importance for my question.
When dragging items between the lists, how would I best achieve the automatic updating of the collections (remove a model from one and insert it into another)? I'm currently trying to use the receive and remove methods in the jQueryUI Sortable interaction — am I at least on the right lines?
var WS = {};
(function(ns) {
ns.Item = Backbone.Model.extend();
ns.Content = Backbone.Collection.extend({
model: ns.Item,
url: location.href,
initialize: function(el) {
this.el = $(el);
this.deferred = this.fetch();
},
recalculate: function() {
var count = this.length;
this.el.next(".subtotal").html(count);
},
setOrder: function() {
$.ajax({
url: this.url + "/reorder",
type: "POST",
data: "tasks=" + $(this.el).attr("id") + "&" + this.el.sortable("serialize")
});
}
});
ns.ContentRow = Backbone.View.extend({
tagName: "li",
className: "item",
events: {
"click .delete": "destroy"
},
initialize: function(options) {
_.bindAll(this, "render", "destroy");
this.model.bind("change", this.render);
this.model.view = this;
},
render: function() {
var row = ich.item(this.model.toJSON());
$(this.el).html(row);
return this;
},
destroy: function() {
if (confirm("Really delete?")) {
this.model.destroy({
success: function(model, response) {
$(model.view.el).remove();
},
error: function(model, response) {
console.log(response);
}
});
}
}
});
ns.ListView = Backbone.View.extend({
initialize: function(collection) {
this.el = collection.el;
this.collection = collection;
this.collection.bind("add", this.addOne, this);
_.bindAll(this, "addOne");
this.el.sortable({
axis: "y",
connectWith: ".tasks",
receive: _.bind(function(event, ui) {
// do something here?
}, this),
remove: _.bind(function(event, ui) {
// do something here?
}, this),
update: _.bind(function(event, ui) {
var list = ui.item.context.parentNode;
this.collection.setOrder();
}, this)
});
},
insert: function(item) {
var prefix = this.el.parentsUntil('ul').parent().attr("id"),
view = new ns.ContentRow({
model: item,
id: prefix + "_" + item.id
});
this.el.append(view.render().el);
},
addOne: function(item) {
if (item.isNew()) {
item.save({}, {
success: _.bind(function(model, response) {
// I should set id from JSON response when live
model.set({ id: this.collection.length });
this.insert(model);
}, this)
});
} else {
this.insert(item);
}
},
addAll: function() {
this.collection.each(this.addOne);
},
render: function() {
this.collection.deferred.done(_.bind(function() {
this.addAll();
}, this));
}
});
ns.AppView = Backbone.View.extend({
lists: [],
initialize: function(holder) {
holder.find("ul").each(_.bind(function(index, list) {
var Items = new WS.Content(list),
App = new WS.ListView(Items);
App.render();
this.lists.push(Items);
}, this));
}
});
})(WS);
$(document).ready(function() {
var App = new WS.AppView($("#tasks"));
});
You are on the right track. You will probably want to add the id of each sortable element into the template somewhere. Then when you receive the event, you know which model to add or remove from the collection. For example add...
<div data-id={{id}}> ... my thing ... </div>
And in the sortable call get the target's id attribute and call Collection.add() or remove()
Just use Backbone.CollectionView.. it has this functionality built in out of the box.
var listView = new Backbone.CollectionView( {
el : $( "#list1" ),
sortable : true,
sortableOptions : {
connectWith : "#list2"
},
collection : new Backbone.Collection
} );
var listView = new Backbone.CollectionView( {
el: $( "#list2" ),
sortable : true,
sortableOptions : {
connectWith : "#list1"
},
collection : new Backbone.Collection
} );
I have the following jQueryUI Dialog element.. I'm trying to make an AJAX call to populate the form when it launches.. I'm also using Ajax to load the actual form..
Problem happens when the populateForm method is invoked..
The Dialog disappears and the browser leaves my page when the $.getScript method is invoked..
any ideas?
I'm stuck!
DIALOG
$('#highValueSurvey').dialog({
autoOpen: false,
modal: true,
width: 900,
resizable: false,
open: function(event, ui) {
$("#highValueSurvey").load('/longstoryshort/forms/high.html');
$("#highValueSurvey").dialog('option', 'position', 'center');
populateForm('#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm');
},
buttons: {
'Submit': function() {
var path = $(this).data('link').href; // Get the stored result
doAjaxPost('#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm');
setCookie(highValueCookieName, -1, 1000);
window.location.href = path;
}
}
});
CLICK EVENT
$("a.clickHighValueAsset").click(function(e) {
cookie_value = getCookie(highValueCookieName);
if (cookie_value != -1) {
e.preventDefault();
e.stopImmediatePropagation();
$("#highValueSurvey")
.data('link', this)// bind the url from the HREF to the dialog UI for redirect later
.dialog('open');
}
else {
return true;
}
});
POPULATE METHOD
function populateForm(formName) {
if (typeof eMail != 'undefined') {
elqServlet = window.location.protocol + '//' + window.location.host + '/longstoryshort/forms/lookup.jsp?email=';
$.getScript(elqServlet + eMail, function() {
$(':input', '#' + formName).each(function() {
var field = '#' + this.name + '';
$(field).val(GetElqContentPersonalizationValue(this.name));
});
});
}
}
Wrap the populateForm() which is async.. And then call the window.href redirect within it's success callback!
Example:
'Submit': function() {
$.ajax({
type: "POST",
async: true,
url: $("#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm").attr('action'),
data: $("#FY12-Q1-AM-ALL-ECMC-VML-ProfilingForm").serialize()
});
setCookie(highValueCookieName, -1, 1000);
$(":button:contains('Submit')").hide();
$("#highValueSurvey").load('/longstoryshort/forms/confirmation.html');
$("#highValueSurvey").dialog({
close: function() {
var path = $(this).data('link').href; // Get the stored result
window.location.href = path;
}
});
}