I have two pages. One contains a list of teachers. Selecting a teacher from the list bring you to the second page where I would like to dynamically create of list of their students from the result of my ajax call. My problem is general confusion from contradicting information on the internet so I can not figure out how to call a function upon changing pages.
I have tried using pageshow, pageinit, pagebeforeshow, pagecreate and a couple more along those lines. The first part of my problem is that I do not know which is the correct method, because at various places of the internet someone said each of those was right but I could not find an explanation why.
The second part of my problem is I do not know which selector and/or method. The document or the page? and to use bind, delegate, live or on. So I've been going at this for a while so if someone could help me understand what solution would best fit my appreciate it.
Related
I want to make two buttons, which will open (depending which is clicked) new page but with different style.
I added eventListener to button and I used window.open, then I want (if it's posible) to somehow call function after the new page is loaded to change style of some elements.
I want to have result similar to two identical htmls but with different function calls from script, but in more dynamic form(so without copypasting htmls)
The first idea that comes to my mind is to pass some GET parameters to indicate whether to apply one of your 2 styles
but if you maybe provide code examples or more details about your problems (code snippets/framework used if any )it may help more for addressing your exact problem and solving it quicker
How to retrieve GET parameters from JavaScript ,This may help if you choose to proceed with my solution
An alternative is to use localStorage and save some piece of data about the style and then on the other window load event you can retrieve and apply it's data where you think it is needed.
I've been trying to resolve this for days!
The use-case is one that I would think to be very common; I have a button (<button id="add-item">) that adds a new item element (<div class="item">) to a container element (<div id="list">) which in turn should display a form (<form>) for the item in a panel (<div id="panel">). I want to be able to click on the items and have the panel show the form specific to the item.
The problem is that the only item recognizing a click event is the last item added; none of the previously added items views will recognize a click.
I had this working before by having a click event on the List view on .item but was told by a prominent member of the Backbone.js community that the item view really should handle a click itself rather than delegating that responsibility up to it's container.
In order to help you who might be able to help to understand the problem I have created an extremely pared down and self-contained example to illustrate. You can see it any of these three (3) places:
A JSFiddle
A Gist
Our Website
Also, if you have any suggestions for how to better structure this code I'm 100% enthusiastic to hear them; I'm new to Backbone.js and do not feel I fully understand it's patterns, practices and idioms.
P.S. I've read everything here on StackOverflow that I can find and I can find nothing that addresses the problem so in case you want to close my question as a duplicate please do me the favor and make sure it actually is a duplicate first.
UPDATE
I'm fixing the code but leaving the errant this.$el.empty() commented out so others can who have the same issue can learn from this. Thanks to #sardine/#tollmaz for helping me out on this over Twitter.
Per a Twitter conversation, it turns out that the issue is with:
this.$el.empty();
When you create the new item, the events are set up. Upon clicking the item, the select method is executed. As part of this method, an instance of app.ListView executes its render method. Within this method, $el, which is actually #list, is emptied. As such, the previously created view with working events is nuked. While it is repopulated visually, the event is never recreated (not sure why this is though).
I am working with Prototype JS framework and I have a form with two select fields (each with three options). There is an observer that changes the text of another element whenever I select a value, which is what it is supposed to do.
However, how do I find out what code is observing that event (the selecting of an option in the form) and therefore making the changes to the element? I've spent the past few hours trying to work it out to no avail.
Am I correct in thinking there is a way to get a stack trace to find out what code is observing that change? Or is there an alternative method to debugging.
Thanks in advance for any advice :-)
The simplest fix was a matter of finding where Event.observe was written in the JavaScript and tracing back.
The documentation was helpful: http://prototypejs.org/doc/latest/dom/Event/observe/
I'm starting to learn Backbone.js and can't figure out one thing: In a typical rails app, I have a layout view and a nested view. My layout usually contains navigation links that are processed by rails routing.
How do I do the same with Backbone? I'm using Rails 3.2 and eco templates.
Should I create nested templates in eco?
Should my navigation links be plain html links with a href or should the navigation be event driven?
For example I have a list of categories on the left, and a category items on the right. I want my categories to be shown on every view and the corresponding category items (with a URL in browser corresponding to selected category) too.
Please point me to right direction, because most tutorials on the Web are 'todo' style applications with no navigation at all.
Thank you.
UPDATE
Turns out, my question wasn't clear, so let me narrow it down.
How can the concept of RoR layouts be applied to backbone.js applications?
And I'm curious about two possible ways of navigation:
create
%a{:class => "customers", :href => "#customers"} Customers
handle ".customers click" event in my view
Which way is better?
And I'm curious about two possible ways of navigation:
create %a{:class => "customers", :href => "#customers"} Customers
handle ".customers click" event in my view
Which way is better?
neither is better until you know the specific context in which you are working. they are simply options for achieving your goal and desired functionality.
there are times when both should be used, as well. for example, if you are supporting search engine optimizations and accessibility.
Here are some better questions to ask:
Which of these will be the simplest thing that can get the job done? will it be more code to write the route handler, or the click handler?
Will the route handler tightly couple the functionality to a router, when I don't need that?
Do I really need a route for this link, so that people can bookmark it and come back to it directly?
Will a click handler cause my code to jump through several hoops of calling other objects that aren't directly related, or can I use a simple event to cause the other objects to run?
There isn't a single correct answer to any of these questions. I recommend trying many different ideas when you can. Keep in mind that you will likely change your answer as you develop new features. The answer that you want, today, won't be what you need tomorrow. But that shouldn't stop you from picking an answer now and moving on. Pick one, put it in place, and when you need to change it, change it.
So I have looked through most of the facebook questions here and it has absolutely confirmed my thoughts. Facebook development may be among some of the worst I've ever used. I'll avoid my rant for now, but as a note to where I'm coming from: tried php sdk, worked decently out of the box, found out I need to put the functionality on a pages tab, can't iframe on pages tab, have to use FBML (which they are retiring in two months, yet I can't start testing the iframe approach yet)
Anyway, I run into FBJS at this point. It works "good enough" for most things, but for some reason I can't get an event registered to an object (a select box in particular interest) by adding a listener (as per FBJS documentation). I am able to add it directly to the html object and have it work, but this is not desirable and I would really like to know what I consider the proper way to do it, which involves seperation of logic and display.
What I want to happen: click on the select box, make a selection, display the text of the selection in an empty div (later on adding Ajax but one step at a time here)
Code:
<script>
var obj = document.getElementById('select-id');
obj.addEventListener('onchange',my_func);
function my_func(evt){
var inner = document.getElementById('div-id');
inner.setTextValue('hey'); // for testing purposes
}
</script>
The above code doesn't do anything when I make a change to the select box. However, this behaves as planned:
<select name="find_state" id="find_state" onchange="my_func();">
I will be grudgingly using this method as I develop, but would really love to know what I might be doing wrong or if anyone else has this issue? And if anyone has any opinions on the matter I would love to know of some form of facebook development recommendations as applications, pages, and tabs all appear to behave totally different from eachother, yet it seems that they all should be doing the same thing to me? Is there any unified way to develop across all three of these things, or am I missing something?
Thanks in advance, as well as for the past help!
I think it should be:
obj.addEventListener('change',my_func);
(instead of onchange)
Straight from Facebook documentation:
The third parameter [to addEventListener], boolean useCapture is required (it does not have a default value)
That means that you should have:
obj.addEventListener('change', my_func, false);
Use the following html and your events attached with .addEventListener() start to work. This seems to be undocumented "feature".
<select name="find_state" id="find_state" onmousedown="return true;">
This also enables the event to fire first time the user changes the value of select. Otherwise it would fire only on second onchange event.