I am using knockout js in my single page application. I have a file upload input tag that I'm using knockout to upload the file with. In this case the files being uploaded are images.
Once the image has been processed by my ASP.NET Web API, and it comes back into my callback function I am inserting the response into an observable array which inhand updates the screen with the new image and text that was added.
However, for some reason the images aren't being displayed. If I refresh the page it loads the images fine but when adding to the observable array it's not showing the images.
Any ideas?
Edit: Here is my code that adds the item, it's pretty straight forward.
item = {
"insightTypeId": 0,
"memberId": currentMemberId(),
"postedByMemberId": store.fetch("currentUser"),
"value": insight(),
"image": "content/insights/" + fileName
};
messaging.client.addItem = function(item) {
member().insights.unshift(item);
};
Update
Forgot to mention that it works fine on a computer viewing the site, but on a phone it doesn't work.
I figured out that it was a mobile safari resource issue
Related
I am new in React. I am attempting to make a live feed from my wordpress site. I am having trouble rendering the images associated with each article.
In the code below I log the mediaSRC variable which I am storing the url of the image. When logging this the proper URL outputs to console. However when I try to create my Post object later on after the if statement, the mediaID is = to "NO IMAGE"
When I am rendering the POST the html img is showing img src="NO IMAGE"
<div className="main-feed">
{posts.map(function(post){
//mediaSRC is eventually going to by my <img src >
var mediaSRC ="NO IMAGE";
//post.featured_media will access the media ID of the image
var media = post.featured_media;
// if there is no image set mediaSRC to this string
if (post.featured_media ==0){
mediaSRC="MEDIA ID IS ZERO";
}
// if there is an image, set mediaSRC to the url of image
else{
j.ajax(React_Theme_Resource.url + "/wp-json/wp/v2/media/" +media)
.done(function(data){mediaSRC = data.guid.rendered; console.log(mediaSRC)})
.fail(function(){console.log("FAIL")})
.always(function(){})
}
//Create Post object NOTE : working without images
return <Post post={post} mediaID={mediaSRC} key={post.id} />
})}
</div>
You are getting your image via an ajax request, but the component is not updated with the new image source. There are a couple of issues here.
It is a bad practice to make ajax request in your render method. The best place for them (if you are not using Flux, Redux or other state management library) is in the constructor.
Secondly, you need to use .setState() (again, if you are using react state to manage the state of the component and the app) method to add the new image source to the component.
You can read more about react state here: https://facebook.github.io/react/docs/state-and-lifecycle.html
I am following this example https://kadira.io/academy/meteor-routing-guide/content/rendering-blaze-templates
When I click on my links the whole page is being reloaded. Is there any way to load only the template part that is needed and not the whole page?
Edit: Also I noted another problem. Everything that is outside {{> Template.dynamic}} is being rendered twice.
Here is my project sample. https://github.com/hayk94/UbMvp/tree/routing
EDIT: Putting the contents in the mainLayout template and starting the rendering from there fixed the double render problems. However the reload problems happen because of this code
Template.mainLayout.events({
"click *": function(event, template){
event.stopPropagation();
console.log('body all click log');
// console.log(c0nnIp);
var clickedOne = $(event.target).html().toString();
console.log('This click ' + clickedOne);
//getting the connID
var clientIp = null // headers.getClientIP(); // no need for this anymore
var clientConnId = Meteor.connection._lastSessionId;
console.log(clientIp);
console.log(clientConnId);
Meteor.call("updateDB", {clientIp,clientConnId,clickedOne}, function(error, result){
if(error){
console.log("error", error);
}
if(result){
}
});
}, // click *
});//events
Without this event attached to the template the routing works without any reloads, however as soon as I attach it the problem persists.
Do you have any ideas why this code causes such problems?
EDIT 2 following question Rev 3:
event.stopPropagation() on "click *" event probably prevents the router from intercepting the click on link.
Then your browser performs the default behaviour, i.e. navigates to that link, reloading the whole page.
EDIT following question Rev 2:
Not sure you can directly use your body as BlazeLayout target layout.
Notice in the first code sample of BlazeLayout Usage that they use an actual template as layout (<template name="layout1">), targeted in JS as BlazeLayout.render('layout1', {});.
In the tutorial you mention, they similarly use <template name="mainLayout">.
That layout template is then appended to your page's body and filled accordingly. You can also change the placeholder for that layout with BlazeLayout.setRoot() by the way.
But strange things may happen if you try to directly target the body? In particular, that may explain why you have content rendered twice.
Original answer:
If your page is actually reloaded, then your router might not be configured properly, as your link is not being intercepted and your browser makes you actually navigate to that page. In that case, we would need to see your actual code if you need further help.
In case your page does not actually reload, but only your whole content is changed (whereas you wanted to change just a part of it), then you should make sure you properly point your dynamic templates.
You can refer to kadira:blaze-layout package doc to see how you set up different dynamic template targets in your layout, and how you can change each of them separately (or several of them simultaneously).
You should have something similar in case you use kadira:react-layout package.
in my blackberry cascades app I have created a page using qml that loads data from backend after making an API call and works fine. But after I move to next page and come back I need to reload the data. i.e perform the onCreationCompleted operation again. Also the Qt.pageDef shows undefined after I come back so I guess if I could reload the page, it would work fine. I'm new to blackberry cascades, can anyone tell me what should I do to reload this page again and re-initialise Qt.pageDef?
Page {
id: homePage
Container {
id:contactListView
//Some code to create listview
onCreationCompleted:
{
Qt.pageDef = contactListView;
fetchInfo();
}
fetchInfo()
{
//make api call and fill listview
}
}
}
Obviously, there are some part of code missing as you show us a Page but you seem to push a new page from a NavigationPane.
Add this to your NavigationPane :
onPopTransitionEnded: {
fetchInfo()
}
I'm curious to know whether Meteor would be suitable for following, and how I would go about writing the code.
I'd like to create a webpage, where by the code in a specific "div" can be hotswapped on the fly to users currently looking at that page. (eg. the div contains some text, but then an image replaces it.) Ideally, the swap would be executed manually by the the webpage's admin through the click of a button, or some code fired off on the server or something. Regular viewers to the webpage would not be able to do this - they only see the live changes on the page.
real-life example:
live internet broadcast is off-air, therefore the "div" contains "off-air" text. live hotswap of code happens when broadcast goes on-air, and the viewers of the webpage now see the html5 broadcast player in the "div" instead. later it is swapped back once the broadcast goes off-air.
I'm completely new to the Meteor platform, so I consider myself a newbie :) Any help is appreciated.
You might better off by using a reactive div using data from a collection (I'm going to use an example with raw HTML but you might be better off implementing your own functionality with what content to display instead: i.e
Basically take advantage of reactivity over hot code swaps
Client side html code
<template name="home">
<div>
{{{content}}}
</div>
</template>
js code
if(Meteor.isClient) {
MyCollection = new Meteor.Collection("MyCollection")
Template.home.content = function() {
if(MyCollection.findOne()) {
return MyCollection.findOne().content
}
}
}
if(Meteor.isServer) {
MyCollection = new Meteor.Collection("MyCollection")
//Set an initial content if there is nothing in the database
Meteor.startup(function() {
if(!MyCollection.findOne()) {
MyCollection.insert({content:"<h1>Test content</h1><p>Test Data</p>"
}
}
//A method to update the content when you want to
Meteor.methods({
'updatecontent':function(newcontent) {
id = MyCollection.findOne()._id
MyCollection.update(id, {$set:{content:newcontent}});
return "Done"
}
}
You can update your content either in the mongo collection or with something like (in your web console, client side or server side javascript):
Meteor.call("updatecontent","New content",function(err,result) {
if(!err) {
console.log(result)
}
});
Which will update the code live when you use it.
I'm sorry it's quite long but the bulk of it is setting/updating the html. Its actually much nicer than a hot code swap which would refresh the user's page
I've been playing around with the new media manager in WordPress and had some fun with it, but have reached the point where I'm banging my head against a wall.
I have a custom meta box that I'd like to store some images in (well it's a hidden input and I'm currently storing their ID's, but could equally be the image objects), then making an AJAX call to show some thumbnails, which I have subsequently made draggable so users can reorder (not necessarily relevant just some background).
My problem is that when I open the media manager, no images are selected, so if a user wants to edit the pictures in their gallery they need to select them all again.
What I'm trying to figure out, is how do I open the media manager with the current images passed through so they are pre-selected.
So, broadly, my code looks like this
jQuery('#myButton').click(function(e) {
e.preventDefault();
frame = wp.media({
title : 'My Gallery Title',
multiple : true,
library : { type : 'image'},
button : { text : 'Insert' },
});
frame.on('close',function() {
// get selections and save to hidden input plus other AJAX stuff etc.
}
frame.open();
});
My thought is that there must be either a parameter to pass into the frame (probably a JSON object of the images, or I need to create an event for
frame.on('open', function() {
// Set selected images
}
But I have tried both ways round and am not getting anywhere.
It would appear possible, as changing the 'Featured Image' takes you to the library with the current one selected - I've just been unable to understand the core code sufficiently yet and hope someone else has !
After studying the core for a bit, the answer here is really quite straightforward.
Listen for the open event of the wp.media object, grab the state, create attachment objects with your id's and add them to the selection.
frame.on('open',function() {
var selection = frame.state().get('selection');
var ids_value = jQuery('#my_field_id').val();
if(ids_value.length > 0) {
var ids = ids_value.split(',');
ids.forEach(function(id) {
attachment = wp.media.attachment(id);
attachment.fetch();
selection.add(attachment ? [attachment] : []);
});
}
});
This works when selecting multiple images as well as single and assumes that using the code above you have stored the values in a single text/hidden field with comma separation.
not a real answer, but somethings that I have noticed
using your code the frame.open( console.log('open') ) does trigger the console.log.
The other frame.on('open', function() { console.log('on->open')}) does not.
When looking at the post edit page. (Where a featured image is already set).
If you open the featured img window a few things happen that are interesting.
WP does 3 ajax calls, the 1st and 3rst contain the featured img id. the 2nd is the same as with your code.
when the popup is loaded the featured image is visible / loaded before the rest of the images. When those show up the featured image is put in the right order.
When looking in firebug at the dom tab I discovered that the var wp.media.model.settings.post.featuredImageId holds (wait for it) the featured image value.
Hopes this helps you in some way.
I think those guy manage to do it :
https://wordpress.stackexchange.com/questions/76125/change-the-default-view-of-media-library-in-3-5/76213#76213
But this doesn't work for me.
I ve got the jquery in the footer of my post/edit, post/new but that just don't work for me :(