For example, i keep opened two tab in the same browser with the url
like http://127.0.0.1:8000/#!/crud
http://127.0.0.1:8000/#!/crud
I want to achieve like if i change anything in one tab, the other tab of the same url should get an alert or automatically refresh the page to be the same as other tab.
how can i archive this?
here you go for my controller of GET method:
$scope.getAllContact = function() {
var data = $http.get("http://127.0.0.1:8000/api/v1/contact")
.then(function(response) {
$scope.contacts = response.data;
}, function(response) {
});
};
$scope.getAllContact();
I want to implement like if any change occurs in a tab, the change should reflect to other tab too. i mean, all the tab should be same with same url but so that it doesn't reflect on other urls of tab
Related
In my application I have defined different routes. On page 1, I have a button on click of which I have to load page 2 and populate some of its fields.
I have loaded the page on click of the button, but I'm unable to get the reference of that page to do the manipulations.
Is it possible in Ext JS to capture the load event ? Secondly, if this is possible then is there any way to send some parameters from page 1 to page 2 ?
View:
{
xtype : 'button',
text : 'Button 1',
handler : 'loadPage'
}
Controller:
loadPage: function() {
window.location.href = url;
}
If you want change site and send parameters you can do this via url query string.
Example:
loadPage: function() {
window.location.href = "http://example.com/over/there?field1=value1&field2=value2...";
}
In loaded page you can read the parameters like:
var url = new URL(window.location.href);
var c = url.searchParams.get("field1");
console.log(c);
I'm trying to set social sharing with SPA using Express.js and AngularJS.
Thing is, I want to share dynamic content, so I'm using angular-facebook-factory to get facebook buttons. Buttons work, params are set, just the image, title and description params that I pass never get to facebook share popup screen.
$scope.shareEvent = function (event) {
console.log('verify values: ', event.image); // works fine!
FacebookService.share({
href: 'http://www.example.com/event/'+event_id+'/', // this value is passed
title: event.title, // Not shown
description: event.desc, // Not shown
image: event.image // Not shown
}, function (response) {
$scope.me = response;
$scope.status = true;
})
}
FB share loads default values (like and ) from http://www.example.com/ and uses set href param (http://www.example.com/event). I tried with method: 'feed' as well, but without success.
I'm supposed to have several different share buttons on the page, so I guess meta og tags are not going to do it...
This is SPA with number of ui-view s, and ui-router using html5 works fine and everything works fine.
This is because Facebook crawlers are unable to render the javaScript!
Angular JS is less friendly when it comes to SEO integration.
Reviewing your code:
$scope.shareEvent = function (event) {
console.log('verify values: ', event.image); // works fine!
FacebookService.share({
href: 'http://www.example.com/event/'+event_id+'/', // this value is passed
title: event.title, // Not shown
description: event.desc, // Not shown
image: event.image // Not shown
}, function (response) {
$scope.me = response;
$scope.status = true;
})
}
you said console.log(event.image); / Works fine
The reason is same, your browser is able to render the JavaScript. But
Facebook crawler is unable to process that javaScript.
I have an Ionic App where from side menu click it will go to page A and from there on certain action it will go to Page B and I need back button on all the pages which will navigate it back to mobile app.
I tried this code
$scope.goOut= function () {
//$scope.showLoading($ionicLoading);
var url = "https://www.google.com";
var target = '_blank';
var options = ['location=no','hardwareback=yes','toolbarposition=top', 'toolbar=yes','enableViewportScale=yes',
'transitionstyle=fliphorizontal',
'closebuttoncaption=Back to the App'];
var ref = cordova.InAppBrowser.open(url, target, options.join());
ref.addEventListener("loadstop",function () {
$scope.hide($ionicLoading);
});
};
But this is not showing me anything on the inappbrowser.
I must be doing something horribly wrong? and its not even showing loading?
Short description of my program and finally the problem:
I have got two pages. The first page list products in rows with a short description. If you click on one you will land on a detail page.
The detail page lists the product details and underneath a couple of related products. If you click on one of the releated products the same page is rendered again with the new information fetched from a REST interface.
If I want to use the browser-back-button or the own back-button to get to the previous product-detail-page a blank page appears. This only happens on my iPad. Using Chrome on a desktop browser works fine. I debugged the application and I figured out, that the backbonejs route is never called. I have no idea why.
Here is my code of the details page:
define([
"jquery",
"lib/backbone",
"lib/text!/de/productDetails.html"
],
function(
$,
Backbone,
ContentTemplate
){
var PageView = Backbone.View.extend({
// product details template
template: _.template(ContentTemplate),
// back-button clicked
events:{
'click a#ac-back-button':'backInHistory',
},
// init
initialize: function(options){
this.options=options;
// bind functions
_.bindAll(this,
'render',
'renderRelatedSeriePlainproduct',
'backInHistory'
);
// listen for collection
this.listenTo(this.options.relatedCollectionPlainproduct, 'reset',this.renderRelatedSeriePlainproduct);
},
// back button
backInHistory: function(e){
e.preventDefault();
window.history.back();
},
// render template
render: function(){
// render template
this.$el.html(this.template(this.model.models[0].attributes));
return this;
},
// render related products
renderRelatedSeriePlainproduct: function (){
var models = this.options.relatedCollectionPlainproduct.models;
if(models.length==0){
$('.ac-plainproduct').hide();
} else{
var elem = $('#ac-related-listing-plainproduct');
var ct="";
ct+='<ul id="ac-list-related-plainproduct">';
$.each(models, function(key, value){
ct+='<li>';
ct+='<a href="index.html?article_id='+value.get('article_id')+'&type='+value.get('type')+'&serie='+value.get('series')+'#product-detail">Link';
ct+='</a>';
ct+='</li>';
});
ct+='</ul>';
elem.append(ct);
}
}
});
// Returns the View class
return PageView;
});
I follow one of the links from renderRelatedSeriePlainproduct.If I click on the back button on the new page the backInHistory function is called, but the window.history.back(); does not call the backbone router.
Maybe the problem is the #hash in the URL, that is not changed during page transition. But this would not explain, why it works perfectly with my Chrome on my desktop machine. For me it seemed to be a problem of asynchronous calls but even there I could not find a problem.
Maybe it helps to list my router code as well. First of all I was thinking it is an zombie issue in backbone, but I remove all events and views while making the transition.
// function called by the route
// details page
productdetail: function() {
$.mobile.loading("show");
_self = this;
// lazy loading
require([
'collection/ProductDetailCollection',
'collection/RelatedCollection',
'view/ProductDetailView'
],
function(ProductDetailCollection, RelatedCollection, ProductDetailView){
// get URL parameters
var articleID = _self.URLParameter('article_id');
var type = _self.URLParameter('type');
var serie = _self.URLParameter('serie');
// product - details
var productDetail = new ProductDetailCollection.ProductDetail({id: articleID});
// related products
_self.relatedCollectionPlainproduct = new RelatedCollection({serie:serie, type:"Electronics", article_id:articleID});
// assign binded context
productDetail.fetch({
// data fetched
success: function (data) {
// page transition
_self.changePage(new ProductDetailView({
model:data,
relatedCollectionPlainproduct:_self.relatedCollectionPlainproduct
}));
// fetch data
_self.relatedCollectionPlainproduct.fetch({reset:true});
}
});
});
},
// page transition
changePage:function (page) {
// remove previous page from DOM
this.page && this.page.remove() && this.page.unbind();
// assign
this.page = page;
// assign page tag to DOM
$(page.el).attr('data-role', 'page');
// render template
page.render();
// append template to dom
$('body').append($(page.el));
// set transition
var transition = "fade";
// we want to slide the first page different
if (this.firstPage) {
transition = "fade";
this.firstPage = false;
}
// make transition by jquery mobile
$.mobile.changePage($(page.el), {changeHash:true, transition: transition});
// page was rendered - trigger event
page.trigger('render');
$.mobile.loading("hide");
},
I tried to use allowSamePageTransition but with no success. Maybe someone could give me a hint. Thanks!
Looks like jQuery Mobile and Backbone's routers are conflicting. Take a look here:
http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/
Thats not the reason. I disabled the routing of jquery mobile.
// Prevents all anchor click handling
$.mobile.linkBindingEnabled = false;
// Disabling this will prevent jQuery Mobile from handling hash changes
$.mobile.hashListeningEnabled = false;
In my backbone app, i use the requirejs to load the js files. as well i need different views, there is no.of links are there in my drop down menu. according to the drop down menu i a adding the #url example:
http://localhost:85/bino/html/interface-I.html#projectName/project11
the navigate method works fine and updating the url, also whenever i copy and paste this url to any other browser / refresh with current hash state my router methods works fine.
But click on link in the drop down menu not working, the method not calling... what would be the reason and how can i fix this..?
my code: main js file (part of code)
var extender = _.extend({},backBone.Events);
var params ={
boardHolder :$('.boardHolder'),
column :3,
space :30,
extender :extender
};
var listApp = new routerer(params);
backBone.history.start();
extender.bind("list:selected",function(post){
listApp.navigate(post.category+'/'+post.filter);
});
my router code :
define(["backBone","singleton","listCollection","listView","listViews"],function(Backbone,singleton,listCollection,listView,listViews){
singleton.router = Backbone.Router.extend({
routes:{
"" :"appView",
"post" :"postView",
"projectName/:id" :"projectNameView",
"assignedTo/:id" :"assignedToView",
"sortBy/:id" :"sortByView"
},
initialize:function(params){
this.params = params;
this.collection = new listCollection;
console.log('i am called');
},
hashView:function(){
console.log('from hash view');
},
appView:function(){
var that = this;
// var defaultApp = new listCollection();
this.collection.fetch({
success:function(data){
new listViews({model:data,params:that.params})
}
})
},
projectNameView:function(thisView){ // not calling not sync
console.log('called',thisView); // on click not works
},
assignedToView:function(thisView){ // not calling not sync
console.log(thisView); // on click not works
},
sortByView:function(thisView){ // not calling not sync
console.log(thisView); // on click not works
}
});
return singleton.router;
})
thanks in advance.
navigate only updates the url, you also have to call the route function by setting the trigger option to true. If you'd like to update the URL without creating an entry in the browser's history, also set the replace option to true.
listApp.navigate(post.category+'/'+post.filter);
would become
listApp.navigate(post.category+'/'+post.filter, {trigger: true});