Backbone | Script for document ready - javascript

There is a script(js) which I wish to run on like $(document).ready(). There is a way to write the script in template(e.g. home_tpl.html) file. But I am sure this is not a good way.
I am loading the html from a backbone view. I am not using any other wrapper like marionate. Here I wish to run some script when a template is loaded(DOM is loaded). In which way can I write the script?
Here is the rendering of view
reset: function(key, email){
require(['js/views/reset_password', 'js/models/forgot_password'], function(ResetView, ResetModel){
var resetModel = new ResetModel();
resetModel.set('key', key);
resetModel.set('email', email);
$('body').html(new ResetView({model: resetModel}).render().el);
});
},
Here is the view code
define(['text!tpl/reset_passwordtpl.html'],function(Template){
return Backbone.View.extend({
template: _.template(Template),
render: function(){
$(this.el).html(this.template());
return this;
},
events: {
"click #btn_reset_password": "reset"
},
reset: function(){
if($('#reset_password').val() != $('#confirm_reset_password').val()){
$('#error_message').text('Passwords mismatched').show();
}
else{
$.ajax({
url: server_url + 'reset',
type:'POST',
dataType:"json",
data: {'id': this.model.get('email'), 'key': this.model.get('key'), 'new_password': $('#reset_password').val()},
success:function (data) {
if(data.error) { // If there is an error, show the error messages
$('.alert-error').text(data.error.text).show();
}
else { // If not, send them back to the home page
$("#content").html("<h6>Your password is reset. Click <a href='#login'>here</a> to login.</h6>");
}
}
});
}
}
});
});
thanks

Somewhere you should have a main view. Where you also include stylesheets etc. At the bottom of the page just before the body closing tag. Within some script tags just do the document.ready thing. Unless that is also in a template in which case I would consider using a different structure when it comes to views.
If you just want to do this when one template is ready loading I would use succes with a anonymous function.

Related

Accessing a JS variable from a different <script> block

I need to access a js variable declared in one block of a html page into another block of the same html page just so I can stop a ajax call that is being made, but I don't know how can I access a variable that was declared into another block. I can't merge the two blocks, everything else is on the table.
<script>
$(function() {
var term = new Terminal('#input-line .cmdline', '#container output');
term.init();
});
</script>
<script>
term.ajaxHandler.abort();//but how can I access the variable term from the block above,this will be inside a button later
</script>
Thanks in advance
The way your code example is described, it's not possible to reuse that variable. Because it is not bound to the window object, it's bound to the function that is self-executed. It's an example of a "safe" way of libraries not intervening with your own code.
You can however, since I guess by the syntax it's jQuery, hook into the jQuery ajax handling. Based on your requirements, to stop an ajax call, you need to listen to all ajax requests.
You could take a look at the jQuery ajax hooks, https://api.jquery.com/category/ajax/.
You could end up with something like:
$(document).ajaxSend(function(event, xhr, settings){
if (settings.url === "/your/url/to/abort") {
xhr.abort();
}
});
just declare var term above the function declaration
var term
function test1(){
term = 'hello there'
test2()
}
function test2(){
console.log(term)
}
test1()
ok, I managed to solve, basically I created a function only to abort the ajax request like this:
this.abortAjax = () => {
requestHandler.abort();
}
and then accessing it within terminal.js itself using the term object that was instantiated beforehand. After working around the code I was able to keep everything inside the terminal script and not splitted in the two parts, getting something like this:
function ShowLoadingScreen () {
var customElement = $("<div>", {
"class" : "btn btn-danger btn-lg",
"text" : "Abort",
"onclick": "term.abortAjax()"
});
$.LoadingOverlay("show", {
//image : "/static/loading.gif",
background : "rgba(204, 187, 0, 0.8)",
imageAnimation : "rotate_right",
//imageAutoResize : true,
text : "Loading...",
custom : customElement
});
}
function request (command) {
...
requestHandler = $.ajax({
url: _url,
beforeSend: function () { ShowLoadingScreen(); }, // <Show OverLay
type: 'GET',
dataType: 'json',
success: function (response) {
...
},
complete: function () { HideLoadingScreen(); } //<Hide Overlay
}).fail(function (jqXHR, textStatus, error) {
...
});
ShowLoadingScreen();
}
Thanks, everyone.

Jquery ajax button click event firing twice?

I have a Employee page which shows list of employees with an edit option. On clicking the edit button jquery-ajax is used to fetch the data from the server.
The problem is when I click the edit button the event is firing twice.
I am using a seperate js file and is referring the file to the main page.The script was working fine until i moved it to the seperate js file.
The Jquery script is
//ajaxGet on edit button click
$(document).on('click', '.editRole', ajaxGet);
var ajaxGet = function (e) {
var spinner = $(this).parent('div').find('.spinner');
var href = $("#editMenuSettings").data("url");
var menuRoleId = $(this).data('id');
spinner.toggle(true);
var options = {
type: "GET",
url: href,
data: { menuRoleId: menuRoleId }
};
$.ajax(options).success(function (data) {
spinner.toggle(false);
$(".modal-body").html(data);
$(".modal").modal({
backdrop: 'static'
});
});
$.ajax(options).error(function (data) {
spinner.toggle(false);
toastr.error("Oops..Some thing gone wrong");
});
return false;
};
You call $.ajax twice.
At lines
$.ajax(options).success(function(data)...
$.ajax(options).error(function(data)...
you actually make two different AJAX calls - one with success callback only, another one with error callback.
In your case, your call should look like this:
var options = {
type: "GET",
url: href,
data: { menuRoleId: menuRoleId }
};
$.ajax(options)
.success(function (data) {
spinner.toggle(false);
$(".modal-body").html(data);
$(".modal").modal({
backdrop: 'static'
});
})
.error(function (data) {
spinner.toggle(false);
toastr.error("Oops..Some thing gone wrong");
});
return false;
It will set both callbacks to the single AJAX call and execute this one.

Load an Ember.JS template once it has been requested by the user (i.e. a link serving that template has been clicked)?

I've got this:
{{#link-to "register"}}Register{{/link-to}}
The problem is, I don't want to load register.hbs - the file in which I keep the register handlebar straightaway, but want to load it right after the user clicks on the link, and delay the template from loading until the handlebar has loaded.
Is this possible?
Thanks.
Yes you mostly can, but it'll probably provide a slower user experience than just loading them up front, or precompiling and loading them up front.
So in your particular use case you'd stop the transition from occurring, fetch and compile the template, then retry the transition.
The general idea looking like this
App.ColorRoute = Ember.Route.extend({
beforeModel: function(transition){
if(!Em.TEMPLATES.color){
transition.abort();
$.ajax({
url: '/templates/color.hbs',
success: function(data) {
Em.TEMPLATES.color = Em.Handlebars.compile(data);
transition.retry();
}
});
}
},
model: function(params) {
return this.store.find('color', params.id);
}
});
Example: http://emberjs.jsbin.com/OxIDiVU/866/edit
And you could make it a bit more reusable by creating a mixin and applying it to routes that you want to implement this pattern on.
App.TemplateMixin = Em.Mixin.create({
templateRequired: null,
beforeModel: function(transition){
var template = this.get('templateRequired');
if(template && ! Em.TEMPLATES[template]){
transition.abort();
$.ajax({
url: '/templates/'+ template + '.hbs',
success: function(data) {
Em.TEMPLATES[template] = Em.Handlebars.compile(data);
transition.retry();
}
});
}
}
});
App.ColorRoute = Ember.Route.extend(App.TemplateMixin,{
templateRequired:'color',
model: function(params) {
return this.store.find('color', params.id);
}
});
http://emberjs.jsbin.com/OxIDiVU/867/edit
One last statement
Now that I think about it, you don't need to abort and retry the transition, the before model takes a promise and you can just return a promise which would allow any loading route to stay active.
App.TemplateMixin = Em.Mixin.create({
templateRequired: null,
beforeModel: function(transition){
var template = this.get('templateRequired');
if(template && ! Em.TEMPLATES[template]){
return $.ajax({
url: '/templates/'+ template + '.hbs'
}).then(function(data){
Em.TEMPLATES[template] = Em.Handlebars.compile(data);
});
}
}
});
App.ColorRoute = Ember.Route.extend(App.TemplateMixin,{
templateRequired:'color',
model: function(params) {
return this.store.find('color', params.id);
}
});
Example: http://emberjs.jsbin.com/OxIDiVU/868/edit
I lied, last note
Following any of the last two patterns you need to be aware of the fact that the mixin is overriding the default implementation of beforeModel. So if you want to apply it on the route as well you'd need to call this._super(transition) from the route to call the mixin implementation.
Example: http://emberjs.jsbin.com/OxIDiVU/869/edit

AJAX $.post works in View, but will not work when placed in a .js file. All other JQuery works

I am new to MVC in general, as well as JQuery and AJAX and I have come across a strange issue.
I have finished my first run-through of building a practice website and the past few days I devoted my time to adding JQuery's and such to make the site more interactive.
Today I finished all my JQuerys and everything works great so I decided to clean it all out of the View and just put them into a script.js file in the Scripts folder of MVC.
Inserted into the View as #Scripts.Render("~/Scripts/Employees.js")
However when I do this anything in regards to AJAX does not work.
Now this only entails two mini-snippets of code that interact with the controller to either Edit or Save a change, but everything else works great! Even the edit and save JQuerys that make menus and other UI changes all work just fine, but the actual $.post to update the change does not work.
Here are the two snippets of code that sit within functions of JQuery that all work just fine.
$.post(
'#Url.Action("customEdit", "Employee")',
{
'id': newID,
'name': newName,
'birth': newDate
},
function (data) { },
"json"
);
and
$.post(
'#Url.Action("customDelete", "Employee")',
{
'id': newID
},
function (data) { },
"json"
);
and again, if I move the entire script literally back into the View it works just great! So I am confused as to why moving it to a .js suddenly makes only these two little snippets not work.
There is no re-ordering of code, it re-inserts exactly where it was before.
For an overview here is my entire <script>.
$(function () {
$("td[colspan=12]").find("p").hide();
$("td[colspan=12]").addClass("nopadding");
$("tr").click(function (e) {
if (!$(e.target).is('button') && !$(e.target).is('input')) {
var $target = $(this);
var $detailsTd = $target.find("td[colspan=12]");
if ($detailsTd.length) {
$detailsTd.find("p").slideUp();
$detailsTd.addClass("nopadding");
} else {
$detailsTd = $target.next().find("td[colspan=12]");
$detailsTd.find("p").slideToggle();
$detailsTd.toggleClass("nopadding");
$detailsTd.stopPropagation();
}
}
});
});
function editFunction(element) {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
$(element).closest("td").prev("td").find("span.item-display")
.hide()
.next("span.item-field")
.show();
$(element).closest("td").prev("td").prev("td").find("span.item-display")
.hide()
.next("span.item-field")
.show();
}
function saveFunction(element) {
var one = $(element).closest("td").prev("td").find("span.item-field").find(":input:first").val();
var two = $(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val();
if (one == "" || two == "") {
if (one == "") {
alert("invalid name");
}
if (two == "") {
alert("invalid birthday");
}
} else {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
$(element).closest("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").find("span.item-field").find(":input:first").val());
$(element).closest("td").prev("td").find("span.item-display")
.show()
.next("span.item-field")
.hide();
$(element).closest("td").prev("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val());
$(element).closest("td").prev("td").prev("td").find("span.item-display")
.show()
.next("span.item-field")
.hide();
var newID = $(element).closest("td").find("span.ID").text();
var newDate = $(element).closest("td").prev("td").find("span.item-display").text();
var newName = $(element).closest("td").prev("td").prev("td").find("span.item-display").text();
$.post(
'#Url.Action("customEdit", "Employee")',
{
'id': newID,
'name': newName,
'birth': newDate
},
function (data) { },
"json"
);
}
}
function deleteStart(element) {
$(element).closest("table").toggleClass("table-hover");
$(element).closest("tr").css('background-color', 'red');
}
function deleteStopped(element) {
$(element).closest("table").toggleClass("table-hover");
$(element).closest("tr").css('background-color', 'initial');
}
function deleteFunction(element) {
var newID = $(element).closest("td").find("span.ID").text();
console.log(newID);
$('#'+newID).removeClass('fade');
$('#' + newID).modal('hide');
$(element).closest("table").toggleClass("table-hover");
$(element).closest("tr").next("tr").remove();
$(element).closest("tr").remove();
$.post(
'#Url.Action("customDelete", "Employee")',
{
'id': newID
},
function (data) { },
"json"
);
$(element).closest("tr").css('background-color', 'initial');
}
Sooo yea, EVERYTHING works just as before, even the Save and Edit interactions (row updates, modals, ect..) but the actual $.post does not work (controller isn't even hit in Debug). Yet if I just re-insert all the code back into the View it works.
Any and all help appreciated! :)
When you put your Javascript in a view, Razor rendering engine will resolve the following line to appropriate URL:
'#Url.Action("customDelete", "Employee")'
But .js files do not get rendered by the view engine, so the above line stays the same which is not a URL.
The JS file is not being parsed by the rendering engine, only your views are. So you'll need to save those URL's from Razor as JS variables in the main view.
Place this in your main view:
<script>var action_custom_delete = '#Url.Action("customDelete", "Employee")';</script>
#Scripts.Render("~/Scripts/Employees.js")
Now you can use the variable action_custom_delete in the JS file wherever you need the URL.

How to place a jQuery snippet into a global file

I have a JavaScript file here http://www.problemio.com/js/problemio.js and I am trying to place some jQuery code into it that looks like this:
$(document).ready(function()
{
queue = new Object;
queue.login = false;
var $dialog = $('#loginpopup')
.dialog({
autoOpen: false,
title: 'Login Dialog'
});
var $problemId = $('#theProblemId', '#loginpopup');
$("#newprofile").click(function ()
{
$("#login_div").hide();
$("#newprofileform").show();
});
// Called right away after someone clicks on the vote up link
$('.vote_up').click(function()
{
var problem_id = $(this).attr("data-problem_id");
queue.voteUp = $(this).attr('problem_id');
voteUp(problem_id);
//Return false to prevent page navigation
return false;
});
var voteUp = function(problem_id)
{
alert ("In vote up function, problem_id: " + problem_id );
queue.voteUp = problem_id;
var dataString = 'problem_id=' + problem_id + '&vote=+';
if ( queue.login = false)
{
// Call the ajax to try to log in...or the dialog box to log in. requireLogin()
}
else
{
// The person is actually logged in so lets have him vote
$.ajax({
type: "POST",
url: "/problems/vote.php",
dataType: "json",
data: dataString,
success: function(data)
{
alert ("vote success, data: " + data);
// Try to update the vote count on the page
//$('p').each(function()
//{
//on each paragraph in the page:
// $(this).find('span').each()
// {
//find each span within the paragraph being iterated over
// }
//}
},
error : function(data)
{
alert ("vote error");
errorMessage = data.responseText;
if ( errorMessage == "not_logged_in" )
{
//set the current problem id to the one within the dialog
$problemId.val(problem_id);
// Try to create the popup that asks user to log in.
$dialog.dialog('open');
alert ("after dialog was open");
// prevent the default action, e.g., following a link
return false;
}
else
{
alert ("not");
}
} // End of error case
}
}); // Closing AJAX call.
};
$('.vote_down').click(function()
{
alert("down");
problem_id = $(this).attr("data-problem_id");
var dataString = 'problem_id='+ problem_id + '&vote=-';
//Return false to prevent page navigation
return false;
});
$('#loginButton', '#loginpopup').click(function()
{
alert("in login button fnction");
$.ajax({
url:'url to do the login',
success:function() {
//now call cote up
voteUp($problemId.val());
}
});
});
});
</script>
There are two reasons why I am trying to do that:
1) I am guessing this is just good practice (hopefully it will be easier to keep track of my global variables, etc.
2) More importantly, I am trying to call the voteUp(someId) function in the original code from the problemio.js file, and I am getting an error that it is an undefined function, so I figured I'd have better luck calling that function if it was in a global scope. Am I correct in my approach?
So can I just copy/paste the code I placed into this question into the problemio.js file, or do I have to remove certain parts of it like the opening/closing tags? What about the document.ready() function? Should I just have one of those in the global file? Or should I have multiple of them and that won't hurt?
Thanks!!
1) I am guessing this is just good practice (hopefully it will be
easier to keep track of my global variables, etc.
Yes and no, you now have your 'global' variables in one spot but the chances that you're going to collide with 'Global' variables (ie those defined by the browser) have increased 100% :)
For example say you decided to have a variable called location, as soon as you give that variable a value the browser decides to fly off to another URL because location is a reserved word for redirecting.
The solution to this is to use namespacing, as described here
2) More importantly, I am trying to call the voteUp(someId) function
in the original code from the problemio.js file, and I am getting an
error that it is an undefined function, so I figured I'd have better
luck calling that function if it was in a global scope. Am I correct
in my approach?
Here's an example using namespacing that will call the voteUp function:
(function($) {
var myApp = {};
$('.vote_up').click(function(e) {
e.preventDefault();
myApp.voteUp();
});
myApp.voteUp = function() {
console.log("vote!");
}
})(jQuery);
What about the document.ready() function? Should I just have one of
those in the global file? Or should I have multiple of them and that
won't hurt?
You can have as many document.ready listeners as you need, you are not overriding document.ready you are listening for that event to fire and then defining what will happen. You could even have them in separate javascript files.
Be sure your page is finding the jquery file BEFORE this file is included in the page. If jquery is not there first you will get function not defined. Otherwise, you might have other things conflicting with your jquery, I would look into jquery noConflict.
var j = jQuery.noConflict();
as seen here:
http://api.jquery.com/jQuery.noConflict/
Happy haxin
_wryteowl
Extending what KreeK has already provided: there's no need to define your "myApp" within the document ready function. Without testing, I don't know off the top of my head if doing so is a potential source for scope issues. However, I CAN say that the pattern below will not have scope problems. If this doesn't work, the undefined is possibly a script-loading issue (loading in the right order, for example) rather than scope.
var myApp = myApp || {}; // just adds extra insurance, making sure "myApp" isn't taken
myApp.voteUp = function() {
console.log("vote!");
}
$(function() { // or whatever syntax you prefer for document ready
$('.vote_up').click(function(e) {
e.preventDefault();
myApp.voteUp();
});
});

Categories