backbone.js how to use variables as selectors in events - events

In Backbone.js I am trying to use a variable as a selector to bind to an event like this:
events: function() {
var _events = {};
_events["click " + "#plus-" + this.options.count] = "add";
return _events;
}
Some (or more than one) thing must be wrong because Backbone seems to ignore it.
Most examples I've seen here use class and not id selectors. Is there a reason for that?
Thanks in advance

I have to say that I don't understand this dynamic events declaration need. But I suppose you have your reasons.
Any how I've come up with a working solution that looks like this:
// html
<div id="container">
<button id="button-1">button 1</button>
<button id="button-2">button 2</button>
</div>​
// js
var View = Backbone.View.extend({
events: function(){
var _events = {};
_events["click " + "#button-" + this.options.count] = "buttonClick";
return _events;
},
buttonClick: function(){
console.log( "click() on button " + this.options.count );
}
});
var view1 = new View({
el: $('#container'),
count: 1
});
var view2 = new View({
el: $('#container'),
count: 2
});
Check the working jsFiddel
So, either I'm missing something or the issue is somewhere else.
About using class or id in your events css selector it is just up to you.

Related

Javascript load and post

I have this function in javascript
function save(){
//$("#complex").submit();
//Complex List
$(document).ready(function(){
var proofer_filter = document.getElementById('proofer').value;
var proofer_filter = proofer_filter.split(' ').join('_')
var status_filter = document.getElementById('status_filter').value;
var status_filter = status_filter.split(' ').join('_');
var cstart = document.getElementById('cstart').value;
var cstart = cstart.split(' ').join('_');
var cend = document.getElementById('cend').value;
var cend = cend.split(' ').join('_');
$("#complex_list").load("pages/complexlist.php?proofer="+proofer_filter+"&status_filter="+status_filter+"&start="+cstart+"&end="+cend+"&dept=<?php echo str_replace(" ","_",$department)?>");
}
);
//Complex Form
var account_type = document.getElementById('account_type').value;
var account_type = account_type.split(' ').join('_');
var log_id = document.getElementById('complexid').value;
$(document).ready(function(){
$("#show_form").load("pages/complexform.php?refno="+log_id+"&dept="+account_type+"&user=<?php echo str_replace(" ","_",$user)?>&save=y");
}
);
}
It is a page with two divs wherein each div loads a remote page. One of this divs is a form which has a submit button. When clicking it the form values does not post. Thus I could not use it as a php variable. Can anyone help?
split out your javascript into 2 sections
<script>
$(document).ready(function(){
$("#complex_list").load("pages/complexlist.php?proofer="+proofer_filter+"&status_filter="+status_filter+"&start="+cstart+"&end="+cend+"&dept=<?php echo str_replace(" ","_",$department)?>");
$("#show_form").load("pages/complexform.php?refno="+log_id+"&dept="+account_type+"&user=<?php echo str_replace(" ","_",$user)?>&save=y");
saveForm.init();
});
you will also need to create the function to save the form and an event listener for when someone clicks on your save button.
var saveForm= {
init: function () {
$('#submit-button').on('click', function () {
//only set all of your values if you are planning to submit an ajax form otherwise just submit the form with the last line of the event listener.
var proofer_filter = document.getElementById('proofer').value;
var proofer_filter = proofer_filter.split(' ').join('_')
var status_filter = document.getElementById('status_filter').value;
....
etc
//make sure to put your submit form in here too.
$( "#form" ).submit();
//if you are using ajax to submit the form, use the variables above to pass into the ajax call.
});
}
}
</script>
If you do not know where you are going wrong, use the Developer tools (F12) in Chrome when you are developing

Jquery -> prototype translate

Can anyone help me translate this to prototype
var btn = $('#onestepcheckout-button-place-order');
var btnTxt = $('#onestepcheckout-button-place-order span span span');
var fewSeconds = 10;
btn.click(function(){
btn.prop('disabled', true);
btnTxt.text('Even geduld A.U.B.');
btn.addClass('disabled');
setTimeout(function(){
btn.prop('disabled', false);
btnTxt.text('Bestelling plaatsen');
btn.removeClass('disabled');
}, fewSeconds*1000);
});
Prototype is confusing the sh*t out of me
Try this:
var btn = $('onestepcheckout-button-place-order');
var btnTxt = $$('onestepcheckout-button-place-order span span span')[0];
var fewSeconds = 10;
Event.observe(btn, 'click', function(){
btn.setAttribute('disabled', 'disabled');
btnTxt.innerHTML = 'Even geduld A.U.B.';
btn.addClassName('disabled');
setTimeout(function(){
btn.removeAttribute('disabled');
btnTxt.innerHTML = 'Bestelling plaatsen';
btn.removeClassName('disabled');
}, fewSeconds*1000);
});
I haven't tested it though.
I'm not going to give you the direct copypasta snippet for your problem but you only probably just need to do the following swaps:
$(selector) with $($$(selector))
prop to attr
addClass to addClassName
I'm omitting one more replacement so you can look for it yourself, for added challenge! Protip: search google for "Prototype to jQuery equivalent". So many resources!
Alternatively, you can just use jQuery in jQuery.noConflict mode and wrap the above in a jQuery closure.
(function($) {
// your code above goes here.
})(jQuery)

There must be an easier way

I am trying to create an JQM app and are doing so by getting a lot of data from database. When I click on a link from a ajax/json generated calendar list I should then be able to get the info for that event by calling the server and get the data. As it is now I do this in 2 steps like this.
My ajax generated event list:
$.each(groupcalendar, function (i, val) {
output += '<li><h2>' + val.matchformname + '</h2><p><strong>' + val.matchday + '</strong></p><p>' + val.coursename + '</p><p class="ui-li-aside"><strong>' + val.matchtime + '</strong></p></li>';
});
When I click on one of the links I want to goto a page called prematchdata.html and get the data fro that specific event. I do so by first calling the click and get the eventid from data-id like this:
$(document).on('click', '#gotoMatch', function () {
var matchid = $(this).attr("data-id");
$.get("http://mypage.com/json/getmatchinfo.php?matchid="+matchid, function(data) {
localStorage["matchinfo"] = JSON.stringify(data);
$.mobile.changePage( "prematchdata.html", { transition: "slide", changeHash: true} );
}, "json");
});
I save the returned data as localStorage and then uses this data in my pageinit like this:
$(document).on("pageinit", "#prematchdata", function() {
var matchinfo = {};
matchinfo = JSON.parse(localStorage["matchinfo"])
var content = '<h2>'+matchinfo["matchname"]+'</h2>';
$('.infoholder').html(content);
});
It works, although for me it seems like the last 2 steps should be done in one, but i am not sure how to do so? It seems a little bit wrong get data, save locally and then use it? Can't this be done without the $(document).on('click', '#gotoMatch', function () {});?
Hoping for some help and thanks in advance :-)
You could try sending it up using a query string. When you're using changePage, change your code like this :
$(document).on('click', '#gotoMatch', function () {
var matchid = $(this).attr("data-id");
$.get("http://mypage.com/json/getmatchinfo.php?matchid=" + matchid, function (data) {
paramData = data[0];
$.mobile.changePage("prematchdata.html", {
transition: "slide",
changeHash: true,
data: paramData //added this extra parameter which will pass data as a query string
});
}, "json");
});
When you're getting it back,
$(document).on("pageinit", "#prematchdata", function() {
var url = $.url(document.location);
var name= url.param("matchname");
var content = '<h2>'+ name +'</h2>';
$('.infoholder').html(content);
});
Another easy way would be use a singlepage template instead of a multi page template. Then, you could just use a global variable to get and set data.
That said, what you're doing right now is more secure than this query string method. By using this, anyone can see what you are sending over the URL. So I advise you keep using localStorage. For more info on this, look into this question.

'checkbox event' doesn't fire

Ok, I've looked at a lot of examples that don't really appear different from mine. I simply want to do something (right now, just an alert), when a checkbox changes (is clicked, or whatever). My code:
$(document).ready(
function () {
$('input:checkbox').bind('change', function() {
var id = $(this).attr("id").substring(5);
var skill = $("#skill" + id).val();
alert("you processed skill number " + skill);
})
}) ; // end doc ready
One thing that MAY be different from others is that I'm dynamically creating these checkboxes with another script included like this (without the "script" tags here):
<pre>src="jscript/skills_boxes.js" type="text/javascript" </pre> <br>
Currently that is ABOVE my 'problem' but I've had it below and my stuff still doesn't work. Is there some sort of timing issue here? I'd appreciate any help. Thanks.
Use jquery on function.
$(document).ready(
function () {
$('body').on('change', 'input:checkbox', function() {
var id = $(this).attr("id").substring(5);
var skill = $("#skill" + id).val();
alert("you processed skill number " + skill);
})
}) ; // end doc ready

jQuery monitoring form field created by AJAX query

Preface: I am sure this is incredibly simple, but I have searched this site & the jQuery site and can't figure out the right search term to get an answer - please excuse my ignorance!
I am adding additional form fields using jQuery's ajax function and need to then apply additional ajax functions to those fields but can't seem to get jQuery to monitor these on the fly form fields.
How can I get jQuery to use these new fields?
$(document).ready(function() {
$('#formField').hide();
$('.lnk').click(function() {
var t = this.id;
$('#formField').show(400);
$('#form').load('loader.php?val=' + t);
});
//This works fine if the field is already present
var name = $('#name');
var email = $('#email');
$('#uid').keyup(function () {
var t = this;
if (this.value != this.lastValue) {
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(function () {
$.ajax({
url: 'loader.php',
data: 'action=getUser&uid=' + t.value,
type: 'get',
success: function (j) {
va = j.split("|");
displayname = va[1];
mail = va[2];
name.val(displayname);
email.val(mail);
}
});
}, 200);
this.lastValue = this.value;
}
});
});
So if the is present in the basic html page the function works, but if it arrives by the $.load function it doesn't - presumably because $(document).ready has already started.
I did try:
$(document).ready(function() {
$('#formField').hide();
$('.lnk').click(function() {
var t = this.id;
$('#formField').show(400);
$('#form').load('loader.php?val=' + t);
prepUid();
});
});
function prepUid(){
var name = $('#name');
var email = $('#email');
$('#uid').keyup(function () {
snip...........
But it didn't seem to work...
I think you are close. You need to add your keyup handler once the .load call is complete. Try changing this...
$('#form').load('loader.php?val=' + t);
prepUid();
To this...
$('#form').load('loader.php?val=' + t, null, prepUid);
What you are looking for is the jquery live function.
Attach a handler to the event for all elements which match the current selector, now or in the future
You can do something like this:
$('.clickme').live('click', function() {// Live handler called.});
and then add something using the DOM
$('body').append('<div class="clickme">Another target</div>');
When you click the div added above it will trigger the click handler as you expect with statically loaded dom nodes.
You can read more here: http://api.jquery.com/live/

Resources