Passing parameters to a different jscript on meteor - javascript

I've just started using Meteor with Ionic - and am having difficulty working out how to pass information when attempting to change pages.
<a class='button button-assertive' id="viewContact" data-ion-modal="viewContact" data-id="{{firstName}}">View Contact</a>
This is the button that ive created - and my javascript is:
Template.addContact.helpers({
listCont: function () {
return listCont.findOne({firstName: template.data.id})
}
});
What is the proper way to give the firsName: the actual data? Id love to use the ID that is created behind the scenes too.
Ive attempted with this as an alternative unsuccessfully too:
"click #viewContact": function () {
alert("test");
currentContact = Session.get({ _id: this._id });
Router.go('/viewContact');
return listCont.findOne({ _id: this._id });
},
Hope this is understandable, and thank you.

Since you're already using a router, just define a route that takes a parameter and then navigate to it.
Router.go('/viewContact',{_id: this._id});
Route:
Router.route('/viewContact/:_id', function () {
var item = listCont.findOne.findOne({_id: this.params._id});
this.render('viewContact', {data: item});
});

Related

ReactJS - What is the standard method of initializing jquery plugin in a react class?

I am using this plugin - bootstrap-dropselect
I have written initDropSelect function to initialize this plugin but I am not sure where to call this function as I would like to append some html to the DOM as soon as route is loaded. I am getting data from two different ajax calls. That data has to be compared and manipulated to append that html to the DOM(Code below 'Append to DOM' comment).
let UserPanel = React.createClass({
mixins: [LinkedStateMixin],
getStateFromStores: function() {
var users = UserStore.getAll();
// Some more code
return {
users: users
// Other properties
};
}
componentDidMount: function() {
UserStore.addChangeListener(this._onChange);
},
_onChange: function() {
this.setState(this.getStateFromStores());
},
initDropSelect: function() {
var _self = this;
var dropSelect = $('#dropselect-demo1').dropselect({
filter: {
show: true,
placeholder: 'Search for an item'
},
multiselect: true,
onselect: function(e, item) {
},
onunselect: function(e, item) {
},
onclear: function(e) {
}
});
// Append to DOM
if(this.state.tagsList.length > 0) {
if(this.state.newLoan.data.tags.length > 0) {
// Getting data from two different resources
}
}
}
});
Please help me in deciding where to call initDropSelect to manipulate data from multiple async requests and append that data to DOM.
P.S. I am using react router so there are two scenarios. First I may come to this route from other route or I can straightaway reload the current page.
Thanks in advance.
One way is for your render method to return something like a <div /> that you will then use to mount the jQuery component into. Once mounted, this will point to the DOM element that you would normally pass to jQuery.
Since jQuery will be handling the rendering, you then want to always return false from shouldComponentUpdate(). This will prevent React from thrashing your jQuery component.
You can then use componentDidMount() to initialize your jQuery component and componentWillReceiveProps() to update/re-render it when new data is passed in.

AngularJs: ng-if reacting too late

Im using ui.router and including my navigation like this in my main html file:
<header ng-if-start="logedin()"></header>
<navigation ng-if-end="logedin()"></navigation>
the logedin() boolean will be set through the angular.module().run() in this function:
$rootScope.$on('$stateChangeStart', function(e, to)
If i click logout in one of the navigation, the controller of the navigation will trigger this function:
$scope.logout = function() {
store.remove('jwt');
$state.go('login');
}
The Problems is after the $state.go the navigation is not hiding, but after refreshing the page.
Do i have to rerender the main index template/view (and then how)? Or how could I solve this problem?
So I solved it myself. Sorry for not providing the logedin() method.
The problem was:
$scope.logedin = function() {
return $rootScope.logedin
}
The $rootScope.logedin was set in the angular.module().run()-function.
To solve it i had to create a simple getter/setter service.
angular.module('sample')
.service('sharedLogedIn', function () {
var property = true;
return {
getProperty: function () {
return property;
},
setProperty: function(value) {
property = value;
}
};
});
Good to know the issue was resolved. What might be happening is your values are not propagated... I might do this to troubleshoot:
<header ng-if="loggedinBool"></header>
<navigation ng-if="loggedinBool"></navigation>
1) Assign loggedin() value to a scope model or service property (preferably) loggedinBool and see if the values are propagated after logout which changes loggedinBool value.
2) If that does not work try $broadcast/$emit in loggout and capture that to change value of loggedinBool. This should automatically provide two-way-binding else try $scope.digest() or $scope.apply() method to see if values propagates.

Multiple Dropzone in a single page

I'm using Dropzone without creating a dropzone form. It works great for me in this way.
But in this case I can not create another instance of Dropzone in my page.
var myDropzone1 = new Dropzone(
document.body,
{
url : "upload1"...
.
.
. some parameters
};
var myDropzone2 = new Dropzone(
document.body,
{
url : "upload'"...
.
.
. some parameters
};
When I do this, I'm getting the error Dropzone already attached.
It's possible, but you can't bind a second dropdzone on the same element, as you did. 2 Dropzones on one element makes no sense. 2x document.body in your solution atm. Try this...
HTML:
<form action="/file-upload" class="dropzone" id="a-form-element"></form>
<form action="/file-upload" class="dropzone" id="an-other-form-element"></form>
JavaScript:
var myDropzoneTheFirst = new Dropzone(
//id of drop zone element 1
'#a-form-element', {
url : "uploadUrl/1"
}
);
var myDropzoneTheSecond = new Dropzone(
//id of drop zone element 2
'#an-other-form-element', {
url : "uploadUrl/2"
}
);
I want to add something here because I have experienced problems with multiple dropzones on the same page.
In your init code you must remember to include var if putting a reference otherwise it isn't dealing with this instance of the dropzone rather trying to access/relate to the others.
Simple javascript but makes a big difference.
init: function(){
var dzClosure = this;
$('#Btn').on('click',function(e) {
dzClosure.processQueue();
});
Note: I'm not using Ajax in order to upload the image on server. For Ajax, One can use url. Attaching the doc DropzoneDoc. It's works like action.( Something like that. Check my solution you can get some idea to do it in your case.
When I working we dropzone, I faced a similar issue working with the Meteor framework.
In the case of Meteor Framework, dropzone is initialized in the below code. This will look different to you, it's the way to initialize in the Meteor framework.
In your case, you can find similarities when using the dropzone library.
Params are added as
params='{name: "Image1"}'
{{> dropzone url=getDropZoneImageUploadURL id='candidate-identity-photo-proof'
init=initFunction params='{name: "Image1"}'
acceptedMimeTypes= 'image/jpeg,image/png,image/jpg' maxFiles=1
success=uploadSuccessHandler maxFilesize=2 dictDefaultMessage= "Photo
ID Proof Photo"
previewsContainer='#upload-photo-id-holder'
previewTemplate=previewTemplateString}}
when the file is getting uploaded check "this" context as mentioned below code. You can use the params value to distinguish the image.
var initFunction = function () {
this.on("addedfile", function () {
if (this.files[1] != null) {
this.removeFile(this.files[0]);
}
});
this.on("sending", function (file, xhr, formData) {
console.log(this); // Here you can get the value
formData.append("type", "image");
});
this.on("error", function (fileInfo, errorMessage) {
var message = "ERROR";
showNotification("error", { message: message }, {});
});
};

Accessing function from within another with Javascript

I'm trying to get the jquery loadmask addon to work that will mask elements (for loading content). I'm using knockout.js, and when if I mask an element outside of my viewmodel it works, but I want to mask it upon submitting a POST request, and then unmask when I receive it. I'm getting an "object has no method mask" error from this. I'm not quite sure how to go about setting up an object to access it.
This works, but it's not what I want. I noted in the code where I would like to call mask from
<div id = "register_container">
<div data-bind="visible: register()">
<div id = "register_form"> <!--this is the div I want to mask -->>
<button data-bind="click: submitRegistration">Submit</button>
</div>
</div>
</div>
function MyViewModel(){
self.submitRegistration = function(){
//I want to mask here. When I try it says Object[object object] has no method mask
$.post....{
if(data.result == success){
// andunmask here
}
}
}
}
$("#register_form").mask("Waiting..."); //the masking works when I place it here, but it's always enabled and I want it inside the viewmodel where I noted so it only works when the POST request is in process
That's great and all, but I want to mask something from inside the viewmodel where I noted. How can I accomplish this?
I see several things that could be the problem.
Frist, you're doing assignment as opposed to comparison in the if statement. Use this instead:
if(data.result == success){
or even
if(data.result === success){
Second is the fact that I don't quite understand your code self.submitRegistration(){, which typically looks more like this:
var MyViewModel = function () {
var self = this;
self.submitRegistration = function() {
};
};
Then, if I mock the $.post call, it would work like this:
var MyViewModel = function () {
var self = this;
self.register = ko.observable(true);
self.submitRegistration = function() {
$("#register_form").mask("Waiting...");
// Mock $.post
window.setTimeout(function () {
if (1 == 1) {
// andunmask here
$("#register_form").unmask();
}
}, 3000);
}
};
ko.applyBindings(new MyViewModel());
See this fiddle for a demo.
You could even have Knockout help you find the element to look for:
See this updated fiddle for a demo of that.
// Use the "event" parameter to find the element...
self.submitRegistration = function(data, event) {
$(event.target).closest('#register_form').mask("Waiting...");
Hope it helps.

Knockout.js and Sammy.js wrong behaviour

I'm developing admin panel to my website and decided to do it with knockout and sammy. But I am faced with a routing problem. I have two pages:
http://localhost/admin/element and http://localhost/admin/category.
On my element page I have the following Sammy config:
Sammy(function() {
this.get('#:currentpage', function() {
self.reloadPage(this.params.currentpage);
});
this.get('', function() {
this.app.runRoute('get', '#1');
});
}).run();
Everything works perfect but if I try to go to another page (by usual link, e.g. Edit Categories) I just get to the empty route on the same page, so I just cannot go to another page with link. Any ideas how to fix that?
Don't use '' in your Sammy configuration. Try '/' for root page or '/admin/element' for your elements instead.
var Router = function() {
var sammy = new Sammy.Application(function() {
this.get('#:currentpage', function(context) {
alert(context.params.currentpage);
});
this.get('/admin/element', function () {
this.app.runRoute('get', '#1');
});
}),
run = function() {
sammy.run();
};
return {
run: run
};
};
$(function() {
var r = new Router();
r.run();
});
PS: The example uses version of Sammy 0.7.1. In version 0.6.3 there is another behavior.
This works if you have an action link and want to click through to another page
`<li>#Html.ActionLink("Admin Action Link Test", "Admin", "Home")</li>
this.get('/Home/Admin', function ()
{
location.assign("/Home/Admin");
});`
or you can do this using the hash
<li>About Full Path</li>
this.get('#/Home/About', function ()
{
location.assign("/Home/About");
});

Categories