I have an application in backbone.js. If I refresh any page with the # tags, the content of the page disappears. Can anyone suggest any solution for this.
Here are the codes of my main.js and app.js
main.js
require.config({
paths: {
jquery: 'libs/jqm/jquery-1.9.1.min',
async: 'libs/require/async',
jqm: 'libs/jqm/jquery.mobile-1.4.0-alpha.2.min',
iscroll: 'libs/iscroll/iscroll',
underscore: 'libs/underscore/underscore_amd',
backbone: 'libs/backbone/backbone_1.1.0_min',
text: 'libs/require/text',
}
});
require(['app', 'jqm-config'], function(app) {
app.initialize();
});
app.js
define(['jquery', 'underscore', 'backbone', 'router'], function($, _, Backbone, Router) {
'use strict';
var init=function(){
var router = new Router();
Backbone.history.start();
};
return{
initialize:init
}
});
Any help is greatly appreciated.
May be it is a duplicate of this. But none of the suggestions worked for me.
I added async: false to each of the fetch method and it resolved.
Related
I'm trying to add a http request-header to a jqueryui autocomplete request. I've looked at the documentation on the jquery site and the solution is presented there for ajax requests. I assumed the solution would be similar in my case but I can't get the darn thing to work.
Here is my code. It's wrapped in an angularjs diretive but the call inside the "link" method would be the same without it being inside the directive.
app.directive("buildingSearch", function () {
// I bind the $scope to the DOM behaviors.
function link(scope, element, attributes, controllers) {
//Attach the autocomplete functionto the element
element.autocomplete({
source: 'api/building/unitOrgMdl',
minLength: 2,
//*********
//This is the addition I made as per the jquery documentation that I figured would work but doesn't
headers: {
'Authorization': '122222222222'
},
//*********
select: function (event, ui) {
element.val(ui.item.label);
element.blur();
scope.getbuildings({ data: ui.item })
return false;
}
});
}
// Return the directive confirugation.
return ({
link: link,
restrict: "EA",
replace: true,
scope: {
getbuildings: '&'
}
});
});
I figured it out... and it works great! I cannot ensure it's the best way to do it but it seems pretty solid. I added the following code right before the autocomplete() method.
$.ajaxSetup({
headers: { 'Authorization': '122222222222' }
});
So the new code in it's entirety looks like this.
app.directive("tmBuildingSearch", function (authService) {
// I bind the $scope to the DOM behaviors.
function link(scope, element, attributes, controllers) {
//Attach the autocomplete function to the element
//NEW CODE. This attaches a custom header
$.ajaxSetup({
headers: { 'Authorization': '122222222222' }
});
element.autocomplete({
source: 'api/building/unitOrgMdl',
minLength: 2,
select: function (event, ui) {
element.val(ui.item.label);
element.blur();
scope.getbuildings({ data: ui.item })
return false;
}
});
}
// Return the directive configuration.
return ({
link: link,
restrict: "EA",
replace: true,
scope: {
getbuildings: '&'
}
});
});
I got the idea from another post on Stake Overflow.
How can I add a custom HTTP header to ajax request with js or jQuery?
I hope this helps someone else!
ENHANCEMENT NOTE! I removed this added code from the directive and put it in the main app module so ANY ajax call will get the Authorization header added to it. Works great!
I have a very simple proof of concept app built with jQuery Mobile, Backbone.js, and require.js.
I am using Backbone's router, and I have jQuery Mobile's routing disabled. It works perfectly.
I am using require.js 1.04. However: when I use requirejs 2.1.14, then I can't seem to disable jQuery Mobile's routing, and hence Backbone's routing stops working. Can't figure it out.
The following code works if I remove jQuery mobile, but stops working if I put jQuery mobile back in. Similarly, it will work with Require.js 1.0.4, but not with require.js 2.1.14:
index.html:
<html>
<body>
Click Here
<script data-main="main" src="require.js"></script>
</body>
</html>
main.js
require.config({
paths : {
backbone : 'libraries/backbone/backbone',
underscore : 'libraries/underscore/underscore',
jquery : 'libraries/jquery/jquery-1.7.1',
jqm : 'libraries/jquery.mobile/jquery.mobile',
router: 'router'
},
shim: {
jqm: {
exports: 'jqm',
deps: ['jquery']
},
underscore: {
exports: 'underscore'
},
backbone: {
exports: 'backbone',
deps: ['jquery', 'underscore']
}
}
});
require(
['jquery', 'jqm', 'underscore', 'backbone', 'router'],
function ($, $$, underscore, Backbone, router) {
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
router.init();
});
router.js
define(['jquery', 'jqm', 'underscore', 'backbone'],
function($, $$, _, Backbone) {
var init = function () {
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
var AppRouter = Backbone.Router.extend({
routes: {
"posts/:id" : "getSomePost",
"*action": "defaultRoute"
},
getSomePost: function(id) {
alert( "Get post number " + id );
},
defaultRoute: function( actions ){
console.log('Action: ' + actions );
}
});
// Instantiate the backbone router
var app_router = new AppRouter();
// Start Backbone history
Backbone.history.start();
};
return { init : init };
});
This problem is seriously baking my noodle!!
When I load up the app, I see a link saying "Click here". When the app uses requirejs-1.0.4 (or without jquery mobile) it works, I get an alert saying "get post number 1", and the URL looks like:
http://myapp.dev/src/#posts/1
but when using requirejs-2.1.14 and jQuery Mobile, I the URL quickly changes to this:
http://myapp.dev/src/posts/1
and nothing happens.
Help!
I finally found the answer to this problem. The issue is the timing of jQuery Mobile configuration. According to the jQuery Mobile docs:
Because the mobileinit event is triggered immediately, you'll need to
bind your event handler before jQuery Mobile is loaded
So I rewrote main.js like so:
require.config({
paths : {
backbone : 'libraries/backbone/backbone',
underscore : 'libraries/underscore/underscore',
jquery : 'libraries/jquery/jquery-1.7.1',
jqmconfig : 'jquerymobile.config',
jqm : 'libraries/jquery.mobile/jquery.mobile',
router: 'router'
},
shim: {
jqm: {
exports: 'jqm',
deps: ['jquery', 'jqmconfig']
},
underscore: {
exports: 'underscore'
},
backbone: {
exports: 'backbone',
deps: ['jquery', 'jqm', 'underscore']
}
}
});
require(
['jquery', 'backbone', 'jqmconfig', 'jqm', 'router'],
function ($, Backbone, jqmconfig, $$, router) {
router.init();
});
And added a new file called jquerymobile.config.js:
define(['jquery'], function ($) {
$(document).on('mobileinit', function () {
// Prevents all anchor click handling
$.mobile.linkBindingEnabled = false
// Disabling this will prevent jQuery Mobile from handling hash changes
$.mobile.hashListeningEnabled = false
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false;
});
});
This code fires after jQuery has loaded, but BEFORE jQuery Mobile has loaded, which is the key!
For reference, this is the blog post that helped me figure it out:
http://www.justinmccandless.com/blog/Yeoman%2C+Requirejs%2C+jQuery+Mobile%2C+Backbone%2C+and+a+Lot+of+Config+Problems
I have a link which opens a Bootstrap popver. Inside of this popover, I have a text field that I want to use as a Jquery Autocomplete. The problem is, I am unsure how to access the Div ID for the text box that is in the popover -- using conventional methods don't work. My Autocomplete works fine on a standalone page, but not on popover. Please help!
Text: <input type="text" id="add_game_search"/></div>'>Popover
$(document).ready(function () {
$('[data-toggle="add_game"]').popover({
'trigger': 'click',
'html': 'true',
'placement': 'bottom'
});
});
$(document).ready(function () {
$('.add_game_search').autocomplete({
source: function (request, response) {
$.ajax({
global: false,
url: "http://www.google.com",
dataType: "html",
success: function (data) {
response($.map(data, function (item) {
alert("in response");
}));
}
});
}
});
});
js fiddle: http://jsfiddle.net/hwEp6/2/
simplified fs fiddle proving the concept: http://jsfiddle.net/hwEp6/3/
Here the problem is not with jQuery autocomplete or bootstrap. The actual reason is #add_game_search is generated dynamically when you click the Popover which you have not handled.
Change your code as below,
$(document).ready(function () {
$('body').on('click', '#add_game_search', function () {
alert("here");
});
});
JSFiddle
I have push state enabled,
Backbone.history.start({
pushState: true
});
When i try to click on this link,
All
Its redirecting to the URL, but backbone routes is not working.
routes: {
'aspect/:id':'aspect'
},
Am i missing anything?
Update:
I tried to add it in events but still its not working,
Template:
All
View:
events: {
'click .user_aspects': 'aspects_list'
},
aspects_list: function(){
alert(2)
}
Do i need to write it in jQuery?
You need to prevent clicking and execute navigate method manually.
For example:
$('a').on('click', function (e) {
e.preventDefault();
router.navigate(e.currentTarget.getAttribute('href'), true);
})
Please have a look:
https://github.com/tbranyen/backbone-boilerplate/blob/04cd6354b0e0276442a1ddc9cdbc889924489745/app/main.js#L22
jQuery UI tabs options have ajaxOptions.
I have next code:
$('#tabs').tabs({
cookie:{expires:1},
cache:true,
ajaxOptions:{
beforeSend: function(xhr,settings){
$(".ajax-gif").css("top",$(window).scrollTop()).show();
},
error: function(xhr,status,index,anchor){
$(anchor.hash).html("Couldn't load this tab.");
},
complete: function(xhr,textStatus){
$(".ajax-gif").hide();
}
}
});
But ajax-gif doesn't show up.
The same code in jQuery ajaxSetup (without jQuery UI) works perfect for usual ajax requests (not in ui tabs). Where did I mistake?
Thanks!
clarification
Usual ajax requests use POST form and tabs use GET form.
What version of jQuery UI tabs are you using? ajaxOptions option is only available up to version 1.8, you can see at http://api.jqueryui.com/1.8/tabs.
For current version (1.11) you would use beforeLoad property. Like this:
$('#tabs').tabs({
beforeLoad: function (event, ui) {
$(".ajax-gif").css("top",$(window).scrollTop()).show();
ui.jqXHR.complete(function(data) {
$(".ajax-gif").hide();
});
ui.jqXHR.error(function(data) {
$(anchor.hash).html("Couldn't load this tab.");
});
}
});
I found solution:
$(document).ajaxSend(function(){
$(".ajax-gif").css("top",$(window).scrollTop()).show();
});
$(document).ajaxComplete(function(){
$(".ajax-gif").hide();
});