I have a RadTreeView which that can eb referenced by the variable: TV
I did not know if i could just do jQuery to do $(TV).attr("OnClientNodeExpanded","newvalue") because there might be a server side link that i may be unaware of.
When I defined my RadTreeView in the markup, it has 2 attributes: OnClientNodeExpanded and OnClientNodeClicked which are set to some javascript functions.
My question is as follows:
Is there a way to change where both OnClientNodeExpanded and OnClientNodeClicked point by some reference like: *TV.set_ClientNodeExpanded("NEW_FUNCTION");*
I want to depending on what is clicked have the RadTreeView populate different material.
Edit to help clarify my goal: The asp.net control has those attributes. Which means that the functions, are actually loadNode and clickedNode. What i was wanting to do was to change the reference of those attributes listed above to point to a different function. I wasnt sure i wanted to have an intermediate "judging" function to determine what functions were to be called, but instead a way to override the current declaration as to what fires when the RadTreeView Event Occurs. Does that clarify?
In your javascript OnClientNodeClicked function, you can check which item was clicked and then call the function you want.
function OnClientNodeClicked(sender, eventArgs) {
var node = eventArgs.get_node();
if(yourConditionHere){
callFunctionA();
}
else{
callFunctionB();
}
}
Did I understand you correctly?
Related
I have a web page which has four tabs at the top. Clicking one of the tabs displays the appropriate page beneath. The tab selection and display is controlled by a js/jQuery function I've called 'changeTab'. Nothing uusual there.
I want to set up a (different) JS function for each tab, to run when that tab is displayed, similar to the way jQuery 'document.ready' works when the main page itself is loaded. I can put a function call at the bottom of my 'changeTab' function, such as 'tabLoaded()'. But that obviously only calls the same one function each time.
I can name the functions 'tab_1_Loaded', 'tab_2_Loaded' etc. ,but then I need some way of dynamically modifying the function call so that the number of the tab is included (I already have the tab number, I just need to work out how to insert it into the function call).
What I am hoping for is a function call like:
tab_[insert tabNum dynamiclly here]_Loaded();
Is that possible in a few lines of code?
I have read articles on Stackoverflow, but they seem do address a different problem of creating (new?) functions with a dynamically derived name. I can be quite clear what my functions are called. I need a dynamically derived call. I suspect it may be possible with 'eval' but my reading also suggests eval is to be avoided, so I've not pursued it.
My fall-back is a series of conditionals:
if(tabNum == 1) tab_1_Loaded();
if(tabNum == 2) tab_2_Loaded();
etc.
but it seems inelegant (though simple) and it certainly works in this case where the number of possibilities is small. Is there a better way that's also simple?
LATER: I've subsequently realised there's an additional complication for the particular page/tabs I'm working on right now, (though it won't apply to the entire site). This page is for on-line booking. The first tab is the booking form (visitor enters dates, number of people). The second and subsequent tabs aren't populated until the visitor clicks 'Next' and moves on to the next stage. Consequently any function call in the 'changeTabs' function is made before the contents of the tab have actually loaded, so it does't work.
To deal with that I'm going to put the call into a script at the bottom of each tab contents. I expect there are more elegant ways of doing it, but it's only one line of code, whereas all the offered solutions are actually more verbose (and harder for me to understand). I will probably still need the call from 'changeTab' to cope with the visitor flicking through the tabs before finalising the booking.
When press the tab, the call back function will always be invoked, no matter what how many call back functions all will be invoked. You cannot conditionally invoke a callback function from a key press. Ideal way to implement this would be
i) Have a single call back function for the tab event
ii) Identify the id of the element, that is currently on focus when tab is pressed inside that call back function
iii) Add conditions based on that element on focus to have your logic of functions for respective elements
Yes it's possible to do what you're asking. All functions and variables declared with global scope are methods and properties of the window object, so you can build the name of the your function as a string and reference it via bracket notation.
So assuming you have tabNumber already stored in a variable:
var functionName = "tab_"+tabNumber+"_Loaded";
window[functionName]();
(See https://codepen.io/slynagh/pen/MMVEoE)
But a better approach would be to use callback functions or else use one tab_Loaded() function which accepts the tabNumber as a parameter, eg:
function tab_Loaded(tabNumber){
if(tabNumber === 1) { do something }
else if(tabNumber === 2 ) {do something else}
//etc
}
jQuery currently uses window as its default element so any call like $('div') will look for div tags inside window.
Is there any way to change defaults on jQuery like:
$.defaultRoot = $('.anyOtherRootElement');
$('div').text("Hello");
this will select any div inside the elements containing .anyOtherRootElement class.
Thanks in advance
Upate
just an update refining the question a bit more here:
I would like to perform the actions above based on external queries coming from external script which won't know what defaultRoot is so they can still be calling what is supposed to be the current base, so in this instance, I'm afraid adding the a second parameter wouldn't be an option, unfortunately.
And at the same time creating a function which returns defaultRoot.find(el) would prevent me of using first-level methods such $.trim, $.each, etc… so unfortunately that would not be possible as well.
Ideally (for performance reasons) you'd want to use find()
$.defaultRoot.find("div");
Otherwise you can use the 2 argument form that sets a context
$("div", $.defaultRoot);
In general you don't want to do these types of things implicitly since someone else could easily end up thoroughly confused when having to work with your code later. If you want to do it consistently and make it shorter you should create your own function to do so like:
var $s = function(selector) {
return $.defaultRoot.find(selector);
}
and then you'd just be able to use
$s("div")
or you could also do a scoped higher order function with something like
var withScope = function(scope$) {
return function(selector) {
return scope$.find(selector);
}
}
var $s = withScope($.defaultRoot);
$s("div")
If for some reason you really want to screw around with the default state for client code (begging for chaos IMO), you should look at the functional practice: currying.
$('SELECTOR', 'CONTEXT')
You can use context. As in your case $('div', '.anyOtherRootElement')
For more details, visit http://api.jquery.com/jQuery/
Given that you can pass the context as a second argument, you can easily overwrite the $() operator in Javascript with a version which internally calls JQuery using jQuery.noConflict(); and always passes your new root as the second argument.
I don't think jQuery provide such method or variable. But you can pass second parameter in jQuery method to set context.
$.defaultRoot = $('.anyOtherRootElement');
$('div', $.defaultRoot ).text("Hello"); // all div inside $('.anyOtherRootElement')
$('div' ).text("Hello"); //all div inside body tag
I've been using KendoUI and have been using they're command functions. However to call JS I must call named jS functions. No huge deal. When I use the "This" key word it brings back the entire grid and I mus find a value of a child from a sibling of the same parent elements and i wound up doing this ugly thing. The question I have is how can I turn this "thing" into something jqueryable readable and comprehensible
function AddRole(e) {
var $ParentNode = e.target.parentNode.parentNode.children[1].children[0].getAttribute("value", 0);
}
Sorry, but you have other problems.
If you rely on such a structure e.target.parentNode.parentNode.children[1].children[0], your Markup and JS do not scale at all.
Use the oppurtunity to create scalable and consistent code. Or at least, set some id, class or html5 data attribute on the children[0] element in order to identify it properly.
I am trying to bind a property of an object to a property that's bound in an ArrayController. I want all of this to occur after the object has already been created and added to the ArrayController.
Here is a fiddle with a simplified example of what I'm trying to achieve.
I am wondering if I'm having problems with scope - I've already tried to bind to the global path (i.e. 'App.objectTwoController.objectOne.param3') to set the binding to. I've also tried to bind directly to the objectOneController (which is not what I want to do, but tried it just to see if it worked) and that still didn't work.
Any ideas on what I'm doing incorrectly? Thanks in advance for taking the time to look at this post.
So in the example below (I simplified it a little bit, but same principles apply)... The method below ends up looking for "objectOne" on "objectTwo" instead of on the "objectTwoController".
var objectTwoController: Em.Object.create({
objectOneBinding: 'App.objectOne',
objectTwoBinding: 'App.objectTwo',
_onSomething: function() {
var objectTwo = this.get('objectTwo');
objectTwo.bind('param2', Em.Binding.from('objectOne.param3'));
}.observes('something')
});
The problem is that you can't bind between two none relative objects. If you look in the "connect" method in ember you will see that it only takes one reference object (this) in which to observe both paths (this is true for 9.8.1 from your example and the ember-pre-1.0 release).
You have few options (that I can think of at least).
First: You can tell the objects about each other and in turn the relative paths will start working. This will actually give "objectTwo" an object to reference when binding paths.
....
objectTwo.set('objectOne', this.get('objectOne');
....
Second: You could add your own observer/computed property that will just keep the two in sync (but it is a little more verbose). You might be able to pull off something really slick but it maybe difficult. Even go so far as writing your own binding (like Transforms) to allow you to bind two non-related objects as long as you have paths to both.
_param3: function(){
this.setPath('objectTwo.param2', this.getPath('objectOne.param3');
}.observes('objectOne.param3')
You can make these dynamically and not need to pre-define them...
Third: Simply make them global paths; "App.objectOneController.content.param3" should work as your binding "_from" path (but not sure how much this helps you in your real application, because with larger applications I personally don't like everything global).
EDIT: When setting the full paths. Make sure you wait until end of the current cycle before fetching the value because bindings don't always update until everything is flushed. Meaning, your alert message needs to be wrapped in Ember.run.next or you will not see the change.
I have a listview that has a nested listview which contain radcomboboxes in the itemtemplate. As such, the IDs (as far as I know) are useless to me.
For example, if I have 30 items, each one of those items is going to generate a new combobox so the names are going to be generated by asp. What I need is to be able to grab the selected value from whichever combobox is being worked by the user. I'm currently using jQuery and some absurd parent().parent().children() type nonsense in order to find the correct combobox in relation to the submit button.
When submit button is clicked, I need it to find the selected value of the it's respective combobox so that I can send that to the post submission handler. The problem is that the .val() jQuery method is not working. When I use that with something like:
$(this).parent().parent().children().children(".statusCbo").val();
I end up getting the text value, not the selected value. I triple checked to make sure that I had the fields bound correctly in the aspx file;
DataTextField = '<%#Eval("name") %>' DataValueField = '<%#Eval("id") %>'
But as I said, I'm ending up with the DataTextField value of the selected item. The best explanation I could get was that it had something to do with how the control is requesting the content (via ajax).
So at any rate, could anyone offer some suggestions on how to accurately get the selected value from the combobox?
UPDATE:
I was able to gain reference to the object through a different means:
$(".submitTag").click(
function () {
var topLevel = $(this).closest(".CommentTopLevel");
var status = topLevel.find(".StatusTag").get_value();
//stub to test value
alert(status);
return false;
});
from here, if use status.val(), it will give me the text instead of the value (same issue as before). The documentation implies that I should use status.get_value(); but this is blowing up saying that the method is not supported from the object. Any ideas?
UPDATE:
nevermind, I found that it is a jquery object being returned, so the method isn't included. Continuing to dig.
SOLUTION:
There was just an extra step i needed to do to use traditional methods. I don't know what it took so long for it to click with me:
$(".submitTag").click(
function(){
var topLevel = $(this).closest(".CommentTopLevelTag"); //gets the parent container
var comboBoxID = topLevel.find(".StatusTag").attr("ID"); //gets the clientID of the jQuery object
var comboBoxRef = $find(comboBoxID); //finds the control by id and brings back a non-jQuery object (useable)
var comboBoxSelectedValue = comboBoxRef.get_value(); //uses the Telerik method to get the selected value
});
Its been a little while since I've dealt with Telerik controls, but what you're doing is bypassing the apis Telerik has made for you to use, and that strikes me as a very bad thing. The next release of Telerik Controls could easily break your code.
Look, it shouldn't be that hard to pass the client id from the listview. There's several methods I'd tackle but I'll let you figure that on your own for now. Once you DO have the ClientID for the control, follow the example on telerik's site:
http://demos.telerik.com/aspnet-ajax/combobox/examples/programming/addremovedisableitemsclientside/defaultcs.aspx
Once you have that id do some
var combo = $find(someVarReferencingTheId);
Now you have a reference to the combobox in its clientside form. Now find some function that gets what you want from here:
http://www.telerik.com/help/aspnet-ajax/combobox-client-side-radcombobox.html
...
PROFIT!
EDIT: that first link to demos.telerik.com isn't really even needed, I just showed that because that's what I used to get that line of code (I could never remember if it's $get or $find I needed to use, unless I was doing a lot of Telerik clientside stuff at the time.).
EDIT 2: $get and $find are ASP.NET constructs, not Telerik's.