I have a vue object and in the mounted method I test for a scroll event on the browser
mounted() {
self= this;
$(window).scroll(function(){
$.get("/works?start="+$('#loaded_max').val(), function(loaded){
self.work = loaded;
console.log(self);
});
});
console.log(self) //returns window
console.log(this) //returns ajax
How do I access the vue object? Specifically the data so I can update the variable.
Self appears to be window, any other variable works
so
mounted() {
let myvue = this;
$(window).scroll(function(){
$.get("/works?start="+$('#loaded_max').val(), function(loaded){
myvue.work = loaded;
console.log(myvue.work);
});
});
I have always used that technique to reference the 'current object' when scope is an issue but it obviously has issues when you need to reference something other than the window.
Related
I am opening a modal component from a Nativescript-Vue function which opens fine
this.$showModal(SuccessModal).then(() => { console.log('Modal Closed') });
I can call $modal.close from a button within the modal but getting $modal is undefined if I try to call this from, say, the mounted() hook.
I want the modal to close on its own after a three second timeout rather than the user having to click outside of the modal.
How would I go about this?
When using the traditional syntax for function you loose the current context (this), use arrow functions to avoid that.
setTimeout(() => {
this.$modal.close();
}, 3000);
Or you will have to keep reference to context in a variable
var me = this;
setTimeout(function() {
me.$modal.close();
}, 3000);
Here's a twist on #Manoj's response.
Instead of using an external variable to bind the global this, you could use a .bind() in your native (non-arrow) function if you're inclined to do so, like this:
setTimeout(function() {
this.$modal.close();
}.bind($this), 3000);
How should one access state (just state, not the React State) of child components in React?
I've built a small React UI. In it, at one point, I have a Component displaying a list of selected options and a button to allow them to be edited. Clicking the button opens a Modal with a bunch of checkboxes in, one for each option. The Modal is it's own React component. The top level component showing the selected options and the button to edit them owns the state, the Modal renders with props instead. Once the Modal is dismissed I want to get the state of the checkboxes to update the state of the parent object. I am doing this by using refs to call a function on the child object 'getSelectedOptions' which returns some JSON for me identifying those options selected. So when the Modal is selected it calls a callback function passed in from the parent which then asks the Modal for the new set of options selected.
Here's a simplified version of my code
OptionsChooser = React.createClass({
//function passed to Modal, called when user "OK's" their new selection
optionsSelected: function() {
var optsSelected = this.refs.modal.getOptionsSelected();
//setState locally and save to server...
},
render: function() {
return (
<UneditableOptions />
<button onClick={this.showModal}>Select options</button>
<div>
<Modal
ref="modal"
options={this.state.options}
optionsSelected={this.optionsSelected}
/>
</div>
);
}
});
Modal = React.createClass({
getOptionsSelected: function() {
return $(React.findDOMNode(this.refs.optionsselector))
.find('input[type="checkbox"]:checked').map(function(i, input){
return {
normalisedName: input.value
};
}
);
},
render: function() {
return (
//Modal with list of checkboxes, dismissing calls optionsSelected function passed in
);
}
});
This keeps the implementation details of the UI of the Modal hidden from the parent, which seems to me to be a good coding practice. I have however been advised that using refs in this manner may be incorrect and I should be passing state around somehow else, or indeed having the parent component access the checkboxes itself. I'm still relatively new to React so was wondering if there is a better approach in this situation?
Yeah, you don't want to use refs like this really. Instead, one way would be to pass a callback to the Modal:
OptionsChooser = React.createClass({
onOptionSelect: function(data) {
},
render: function() {
return <Modal onClose={this.onOptionSelect} />
}
});
Modal = React.createClass({
onClose: function() {
var selectedOptions = this.state.selectedOptions;
this.props.onClose(selectedOptions);
},
render: function() {
return ();
}
});
I.e., the child calls a function that is passed in via props. Also the way you're getting the selected options looks over-fussy. Instead you could have a function that runs when the checkboxes are ticked and store the selections in the Modal state.
Another solution to this problem could be to use the Flux pattern, where your child component fires off an action with data and relays it to a store, which your top-level component would listen to. It's a bit out of scope of this question though.
I have a problem when I dynamically load content with the following code.
$(document).ready(function() {
$("#tags").keyup(function(){
var q = $(this).val();
$.ajax({
url: '/AnswerMedia/utilities/autoSearch/model/suggest.php?q='+q,
success: function (data) {
$("#ajaxDiv").html(data);
},
error: function (request, status, error) {
alert(request.responseText);
}
});
});
});
After the content loads, this code was intended to trigger an event when one of the loaded div tags is clicked, but did not.
$(".pdiv").click(function(){
var val = $(this).text();
$('#tags').val(val);
$('.mncontr').hide();
});
$("#closeSearch").click(function(){
$('.mncontr').hide();
});
Then I tried the following code:
$("body").delegate(".pdiv", "click", function(){
var val = $(this).text();
$('#tags').val(val);
$('.mncontr').hide();
});
$("body").delegate("#closeSearch", "click", function(){
$('.mncontr').hide();
});
It works well in Firefox, but in Chrome the problem persists. Please help me.
From this SO post:
If you want the click handler to work for an element that gets loaded
dynamically, then you set the event handler on a parent object (that
does not get loaded dynamically) and give it a selector that matches
your dynamic object like this:
$('#parent').on("click", "#child", function() {});
The event handler
will be attached to the #parent object and anytime a click event
bubbles up to it that originated on #child, it will fire your click
handler. This is called delegated event handling (the event handling
is delegated to a parent object).
It's done this way because you can attach the event to the #parent
object even when the #child object does not exist yet, but when it
later exists and gets clicked on, the click event will bubble up to
the #parent object, it will see that it originated on #child and there
is an event handler for a click on #child and fire your event.
I know that the error is generated by jQuery. Is there any way I can structure a backbone.marionette application to avoid the below error?
Uncaught TypeError: Cannot call method 'show' of undefined
The error occurs because I create a Layout, which has regions. In the onRender function I load a collection and execute fetch. When the fetch is complete, I populate the region. If I switch to a different view, the error is triggered because of self.content.show which no longer exists.
var view = Marionette.Layout.extend({
template: _.template(tplPage),
className: 'customers-view',
regions:{
content: '.customers-content'
},
onRender: function(){
var self = this,
colCustomers = new ColCustomers();
colCustomers.fetch({success: function(){
self.content.show(new ViewCustomersList({collection: colCustomers}));
}});
}
});
NOTE: At the moment I wrap self.content.show() in a try catch and its working. Ideally I avoid that.
Modify the onRender function and listen for the fetch differently.
onRender: function(){
var colCustomers = new ColCustomers();
this.listenTo(colCustomers, "sync", function () {
this.content.show(new ViewCustomersList({collection: colCustomers}));
});
colCustomers.fetch();
}
What I did was change the approach to binding the event listener. By using the listenTo function from Backbone.Events, you get handlers that are cleaned up for free when the listener object dies.
i have a problem.
just tryin to load some html in a div...everything works fine in every browser except ie.
$('a[rel*=ajax]').click(function(e)
{
ajaxLink = $(this).attr('href')+"?ajax=true";
theDiv = $(this).parents(".post");
$.get(ajaxLink,function(data, textStatus){ $(theDiv).replaceWith(data); });
});
if i try to alert(data) in the .get callback i can read some html, but when i try to "inject" it in theDiv, i get a blank page.
thanks a lot in advance :)
can you try live instead of click and it should work fine.
sometimes in IE the DOM might not be ready
$(a[rel*=ajax).live('click', function() {
});
... but when i try to "inject" it in theDiv, i get a blank page.
You need to cancel the default action of the link; otherwise, the link will be followed. Either add return false to the end of your click handler, or add e.preventDefault(); to it. E.g., this:
$('a[rel*=ajax]').click(function(e)
{
ajaxLink = $(this).attr('href')+"?ajax=true";
theDiv = $(this).parents(".post");
$.get(ajaxLink,function(data, textStatus){ $(theDiv).replaceWith(data); });
return false; // This both prevents the default and stops bubbling
});
or
$('a[rel*=ajax]').click(function(e)
{
ajaxLink = $(this).attr('href')+"?ajax=true";
theDiv = $(this).parents(".post");
$.get(ajaxLink,function(data, textStatus){ $(theDiv).replaceWith(data); });
e.preventDefault(); // This just prevents the default, doesn't stop bubbling
});
Separately:
The quoted code is using ajaxLink and theDiv variables from the parent scope (if they're not declared anywhere, they're implicit global variables). Could it be that you're changing the value of theDiv after the shown code runs but before the ajax call completes? That would mean when the ajax call completes, it's using the new value of theDiv rather than the old one.
In any case, there doesn't seem to be any reason that code should be using variables from the parent scope, I'd recommend making them local to the function:
$('a[rel*=ajax]').click(function(e)
{
var ajaxLink = $(this).attr('href')+"?ajax=true";
// ^-- This is the new bit, the `var`
var theDiv = $(this).parents(".post");
// ^-- And this one
$.get(ajaxLink,function(data, textStatus){ $(theDiv).replaceWith(data); });
});
As a separate issue, are you sure you want replaceWith (which will replace the parent that has the class post) rather than html (which will only replace its contents)?
There's also no reason for calling $ on theDiv again; parents already returns a jQuery object. So:
$('a[rel*=ajax]').click(function(e)
{
var ajaxLink = $(this).attr('href')+"?ajax=true";
var theDiv = $(this).parents(".post");
$.get(ajaxLink,function(data, textStatus){ theDiv.replaceWith(data); });
// ^-- No need for $ here
});
And finally: You might look at the load function, which loads HTML from the server and updates the content of an element with the result.
unfortunately there was a wich was not closed..
and ie seems to be not very flexible with this kind of problem.