I bounced into a problem when I was trying to create a title on the first view I created within my application.
At first, i hopped over all the push actions I had within my application and applied after this create.view screen a title as refered in the code under here
this.StembureauView = Ext.create('UtrechtStem.view.Stembureaulijst_View', {
title: 'Stembureaulijst'
});
this.getMainnav().push(this.StembureauView);
this works fine, and I seem to have no problem with it. However, the first screen, so my main view, as loaded first view, doesnt accept the title statement.
Ext.create('UtrechtStem.view.MainNav', {
fullscreen: true,
title:'stembureau zoeker'
});
if i add nicely behind the fullscreen statement a title statement, it wont accept it. (this is done outside sencha architect, cause appearantly i cant modify it within sencha artchitect) It just shows blank. I tried removing the toolbar, to see if that was the mistake, but it didnt. I tried addding manualyy outside Sench
Does anybody have a clue why it wont accept the title statement there and to see if there is a work arround?
guess your class UtrechtStem.view.MainNav is inherited from the Ext.navigation.View. If yes, you can not set its title direct. Instead it borrow the active child's title.
Have a look at the doc site
Cheers, Oleg
Related
I'm designing a component to help with alert messages within our application. Right now, it's designed to display either content passed in from an attribute, the block content within, or both. As an example:
{{#cos-alert message="This is the first line" displayBlock="all"}}
This is the second line
{{/cos-alert}}
would render:
This is the first line
This is the second line
My example handlebars template:
{{message}}<br/>
{{yield}}
However, sometimes the message attribute is bound to a property from the view that would cause it to be empty. We want to detect if there is block content, and if so we want to display it. If not, we want to hide the component with the isVisible property until there is content to display.
I haven't been able to find a way to detect whether or not there is block content, however. I could be missing something but after searching for a while I've found nothing. Is it possible to get the value of yield from the component view?
To check of there is a message check the message property.
To check if there is a template check the template property.
Look here.
That is probably what u need to check if there is a template:
hasTemplate: Em.computed.bool('template')
How do I do such a thing? I need to disable the widget completely, meaning that all of the instances should be disabled and NO MORE instances can be created after the disabling. I tried searching, but nothing comes up.
Will appreciate any help.
EDIT:
A more lively example.
Say, I have three instances of my widget placed on three elements. Then I want to turn my widget off. I invoke a static method turnOff, which leads to
a) all working instances to be disabled
b) prohibit any other instances of that widget to be created if they are later called via ajax i.e.
Then I want it to work again, so i invoke a turnOn().
My widget is a hint pugin, so if the user switches hints off, they should be switched off everywhere, and there are places in the app where hinted parts of the page are still being loaded asynchronosly.
That's pretty much what I need to do.
The answer depends on if your widget is obvious when not active -- for example if it's a 'hint' type tooltip that shows on hover then all you need to do is not show the tool tip when it's inactive. However if it also adds formatting to show where the hints are you need to undo that as well.
Let's take the simple case first -- suppose we have a simple widget filler that just adds a class (filled) when the mouse is over the element. Then just have a variable in global scope:
enableFiller = true;
and then check that in your widget:
$.widget( "spacedog.filler", {
_create: function() {
var progress = this.options.value + "%";
this.element.hover(
function() {
if (enableFiller) {
$(this).addClass("filled");
}
},
function() {
$(this).removeClass("filled");
}
);
}
});
Fiddle.
Note that I don't check the flag in the removeClass because the widget might be disabled while the mouse is over a widget and you probably don't want the hover color to accidentally 'stick on'.
From there it's pretty easy to extend to the case where your widget alters the element even when off. I'll do the logic as pseudo-code:
When creating the widget add a base-widget class to the element (even if inactive)
If the widget is on add the active-widget class and do whatever is required
To turn off remove the active-widget class from all base widgets: $(".base-widget").removeClass('active-widget'). You might also need to do some other changes to all the elements -- but they're easy to find.
To turn on add the active-widget class back and adjust everything else
You can embed the turnOn/turnOff functionality into the widget, as long as it uses the global variable as the flag. See this answer for other options for storing the global: How to declare a global variable in JavaScript?
If you get stuck you could post (a simplified version) of your widget code and what you've tried so far and someone can probably help further.
I have a web site that exists on one page: index.html. There is a lot of content on the site (that appears to be on many "pages") but via javascript and CSS, all the info is contained on index.html.
So there exists a "home" position and an "inside" position (like a home page and inside page), and I need some links to behave differently when the user is on an inside page vs the home page. So the way I have it set up, once an "inside" link is clicked, I remove a class from a div that I think should cause the links within that div to behave differently. But they are not behaving as I expect.
The page, very dumbed down for this example, is here:
http://littleduck.com/ns_sample/index.html
On this example, there is just the home page and the "Services" page. You can link back and forth between them.
If you mouseover those grey links on the left (which are called "balloons" in the code), you will see that they have a hover color, and a popup graphic appears. I ONLY want this to happen when the page is in the "home" position. I have a class called "popup_yes" that allows this hover/popup action to happen. It appears when index.html is loaded, and if I remove it or change its name in the code, the hover/popup does not work. So I know that class is doing something. Now, I REMOVE that class when "Services" is clicked. I can see by inspecting the element in Chrome that "popup_yes" DOES in fact get removed. HOWEVER ... the hover/popup action still happens when you mouseover the balloons.
And when I inspect the element, even though you can see in the code that "popup_yes" is gone, it is still being utilized by Chrome. Here is a screenshot of what Inspect Element looks like on the "home" and "inside" pages:
http://i.stack.imgur.com/p1ZP7.jpg
So, please tell me where my brain is derailing. How can I get the hover/popup action to NOT WORK when I'm on the "Services" page? Thank you incredibly much for any help you can provide.
The issue is in your mouseover/out code
$(".popup_yes .balloon_1").mouseover(function() {
$("#popup_1").show(400);
$(".balloon_1").addClass("hover");
});
When the page loads, the mouseover event is binding to that span, so that action is already established, if you add the check in the function
$(".popup_yes .balloon_1").mouseover(function() {
if ($('#balloons').hasClass('popup_yes') ){ //<--here
$("#popup_1").show(400);
$(".balloon_1").addClass("hover");
}
});
it should work as expected
I have modified the javascript that you are using and could make it work. Here are the changes that i made.
First of all when u removed the class when the services page is clicked I specified the class to be removed.
$('#balloons').removeClass("popup_yes");
After this when you click back the Home page the class has to be added back so i included this line after you animate the $('#buttons') div.
$("#balloons").addClass("popup_yes");
Now comes the changing of the hover effect on each of the balloons. I'll show the change I did to the first balloon element you can reproduce the same for the others.
$(".balloon_1").mouseover(function() {
if($(this).closest('#balloons').attr("class")=="popup_yes"){
$("#popup_1").show(400);
$(".balloon_1").addClass("hover");
}
});
$(".balloon_1").mouseout(function() {
if($(this).closest('#balloons').attr("class")=="popup_yes"){
$("#popup_1").hide(400);
$(".balloon_1").removeClass("hover");
}
});
What I modified is instead of checking for both the class for hovering I just checked the balloon_1 class and then I made the effect only if the closest element to it with an id balloons has the class popup_yes.
I tried it in chrome. Hope it works well in other browsers as well.
I'm trying to get a class to appear on a specific button withing a handlebar view based on a property binding. I'm doing something that is like the Todo app that ember.js has on their site (http://emberjs.com/examples/todos/) and I'm trying to make the "Clear Completed" button disappear based on the value of a property.
I have a jsfiddle showing kind of what I'm going for here (http://jsfiddle.net/boushley/XEdNg/). If I add a className inside of the #view tag it shows up fine. But if I add a clasNameBindings it doesn't work the way I expect. Am I going about this wrong or is something broken here?
Aaron
I remember I had similar problems with classNameBindings too.
Try this instead: http://guides.sproutcore20.com/using_handlebars.html#binding-class-names-with-bindattr.
// Javascript for the view
App.AlertView = SC.View.extend({
priority: "p4",
isUrgent: true
});
// Template
<div {{bindAttr class="priority"}}>
Warning!
</div>
// Emits the following HTML
<div class="p4">
Warning!
</div>
If you just want to show/hide the button, then try binding the isVisible property.
isVisibleBinding: 'App.pageController.myProperty'
Hope this helps.
I discussed this here https://github.com/emberjs/ember.js/issues/322 and one of the people on the project helped with this, giving a clear way of how to perform this here https://github.com/emberjs/ember.js/issues/322#issuecomment-3332477 (http://jsfiddle.net/aNZSD/) In essence I needed to create a view that extends ButtonView and place the properties I want on this new view. This is the way it should work, I just wasn't seeing this properly.
Hope this makes it clearer for someone else.
First of all I would like to say that while this is the first time i post here these boards have helped me much.
With that said, I have got a strange issue regarding AJAX and scripts.
You see, in my web application i used custome JS context menus. Now each of them menus is implemented with specific features depending on the object and if the object exists.
E.x : if we got an upper menu place holder but no upper menu the context menu will have one option which is "add menu".
But say we already have the upper menu the context menu will have different options such as "edit menu" etc...
so far so good, however, say we have an upper menu place holder and no menu and then we added the menu (still no refresh on the page) i need to generate a new context menu and inject it right? so i do just that along with the new menu i just built.
all that code goes into the SAME div where the old context menu script and upper menu place holder were so basicaly they are overwriten.
Now the menu itself is in HTML so it overrides the current code the JS however acts wierd and will show now 2 context menus the old one and the new one even though i overwrite it's code.
I need to some how get rid of the old context menu script without refreshing the page.
Any ideas?
P.S
all the JS are dynamicaly generated if that makes any difference (i dont think it does.)
Well after some head breaking i figured it out..
(the problem not the solution yet) this is the ajax function right?
$.ajax({
type: "GET",
url: "../../../Tier1/EditZone/Generate.aspx?Item=contentholder&Script=true",
dataType: "html",
success: function (data) {
$('#CPH_Body_1_content_holder').html(data);
}
});
now they function uses a page with an event handler, that event handler reutnrs the data as followed response.write(answer) it just hit me that when you use response.write it sends the code after it's been compiled and ran in our case at page Generate.aspx.
so the script will run but not in the page i intended it to run and because of that i cannot overwrite it... how silly of me.
what i think ill do it return the data as an actualy string and then and only then inject the code into the container div.
ill let you folks know if that works out.
cheers and thanks for the advice these forums rock.
No matter what anyone says, do not use EVAL. It's evil and will give you memory issues if used more than a few times on a page.
See my soluition here: trying to call js code that is passed back from ajax call
Basically, create a div with the ID of "codeHolder" and voila. You'll basically want to pass your HTML and JS back to the AJAX receiver (separated by a separator), parse it on the JS side, display the HTML and put the JS Code in your javascriptCode variable.
//Somehow, get your HTML Code and JS Code into strings
var javascriptCode="function test(){.....}";
var htmlCode="<html>....</html>";
//HTML /////////////////////////////////////////
//Locate our HTML holder Div
var wndw=document.getElementById("display");
//Update visible HTML
wndw.innerHTML = htmlCode;
//Javascript ///////////////////////////////////
//Create a JSON Object to hold the new JS Code
var JSONCode=document.createElement("script");
JSONCode.setAttribute("type","text/javascript");
//Feed the JS Code string to the JSON Object
JSONCode.text=javascriptCode;
//Locate our code holder Div
var cell=document.getElementById("codeHolder");
//Remove all previous JS Code
if ( cell.hasChildNodes() )
while ( cell.childNodes.length >= 1 )
cell.removeChild( cell.firstChild );
//Add our new JS Code
cell.appendChild(JSONCode);
//Test Call///////////////////////////////////////
test();
This code will replace all previous JS code you might have put there with the new JS Code String.
Thanks for the replies.
Dutchie - that's exactly what I did. now the thing is the HTML is properly overwritten (I didn't use append I overwrote the entire div) and yes the javascript just keeps on caching...
I tried to disable browser cache and still the problem persists i get multiple context menu per item the more I ran the ajax function...
Jan,
My AJAX function builds a div tag and script tags and places them into another container div tag in the page.
What's suppose to happen is that every time the AJAX runs the code inside the container div is overwritten and you get an updated version.
the div inside the container div is overwritten yet the script tags somehow are cached into the memory and now each time the out jQuery function calls the context menu i get multiple menus...
I don't think code is needed but I will post it tomorrow.
Any ideas?