window.onSelection() in Template.myTemplate.onRenderd() in blaze - javascript

I have a template (blogContent.html) which loads the text on the page using helpers in (blogContent.js). Once the page has loaded, I'm trying to select some text on blogContent.html and highlight it.
To get the selected text, I'm trying to do something like this
Template.blogContent.onRendered(function(){
if (window.onSelection) {
var selectedText = window.onSelection().toString();
console.log(selectedText);
}
});
However, I'm encountering two issues with it.
1. The if block is always executed when the page is loaded and never afterwards i.e. not when I selected some text.
2. Because of (1), console.log outputs a null string on client console only once when the page loads and nothing heppens afterwards.
Any pointers are much appreciated. I'm new to webdev and meteor. Thanks a lot.

window.onSelection is not a valid function or property. You may be thinking of window.getSelection().
Meteor doesn't re-render the template unless the data inside of it changes, so the onRendered function won't be called.
What you want here is plain old jQuery -- see this question for how to create a listener for text selection.

Related

Kendo UI bind drop down value from PopupEditor

I have a Kendo Grid which has an option to add a new record using the Popup Editor.
One field from the popup editor is a DropDownList. I have the first record from the dropdown list pre-selected when I open the Popup Editor. Since I pre-selected it, I would like it to be automatically created (bound) within the grid (when pressing "Update") without having to manually select it again.
I have the example script here
Working script: https://dojo.telerik.com/OFinidew/28
Here's a few things that are useful to know:
1. Defining schemas for your dataSources
A schema is a way to define what structure to expect from your data. When a schema is defined, your data will be "bound". As much as possible you'll want to bind your data, because as a last resort you'll end up having to use templates. Normally, Kendo UI will try to figure things out and get things bound automatically, but in special cases you'll have to give it a schema. This is one of those cases.
From the code sample, it seems like the approach of the workaround was to try change the "edit" event of the kendoGrid to immediately select the "Processing" status - Instead, you can define the "Processing" status (value "2") as the defaultValue of the "status" field in your model. But then, you'll need to make sure your custom editor template CAN be bound to, which leads us to..
2. Using the HTML property: data-bind="value:(nameOfYourField)"
When you're making your own editor templates for the kendo popup, it has no way of knowing what part of your HTML to bind to. See the statusDropdownEditorTemplate in the link provided as an example of how this is done.
3. What valuePrimitive means
Normally, a kendoDropDownList will return an object containing both the Text and Value of the selected choice. But this is not what we want in this case, because status is defined as "0", "1", "2" - so we just wanted the value. When you set valuePrimitive to true, you're instructing the kendoDropDownList to only return the value itself, not an object containing everything.

Issue with Fliter link cliks in adobe DTM?

when I am clicking first time on filter
s.eVar55 showing value as 'undefined'
however when I am calling my data element which is _satellite.getVar("payal evar55/prop55 test")
I am getting the correct value
this data element has been mapped to s.eVar55
Please see the attached screenshot
but s.eVar55 is not showing value when first time filter click happened
but from second time onwards it shows the previous value
"Code which i have written in adobe DTM custom editor"
if(_satellite.getVar("payal evar55/prop55 test") && _satellite.getVar("payal evar55/prop55 test") !== null){
s.linkTrackVars='eVar55,prop55';
s.eVar55=_satellite.getVar("payal evar55/prop55 test");
s.prop55=_satellite.getVar("payal evar55/prop55 test");
}
You aren't giving enough information to be sure what you're trying to do, but I assume you've set up a data element and you're trying to use it to store the filters that you've clicked. The fact that you're always one step behind is telling me that your load order is what is causing the issue.
The data element is trying to set when the page refreshes but your rule is firing on the click, so its blank the first time and one behind after that.
Personally, I would just set the prop and eVar on the click rule, if you need the data element for some reason, you can set that in the click rule as well:_satellite.setVar("Element Name",value);
If you want help setting the values in the click rule, you'll need to give more information and I will update my answer. If the filter value is in an attribute of the target of your click rule, you can use this.getAttribute('your attr name'), and if it is simply a text value, you can use %this.#text% in the UI to get your desired value.

AngularJS edit and save values inside ng-repeat

I'm working on my first angular app and i dont know the best way to handle this problem.
I have a long hierarchical json becouse the tables of the database are like a pyramid, looks similar to this:
I have the view represented pretty well using ng-repeat, I want to be able to edit the last rows of the last table which correspond with last level of JSON.
To do this I have implemented a edit modal that works fine, it saves and updates the database perfectly, the problem is that to see the updated value i have to refresh the page losing scroll position and collapsing accordions which is very bad.
Images of accordions:
When i click edit icon a promise stores in $scope.objEdit = {}; the object and launches the modal, which is linked to this object by ng-model.
So I think that the next step is that when modal is closed, i have to override the old object placed in the $scope variable that contains the entire json for the edited one, but im not sure how to do it.
I would appreciate your help to learn the standard way to do this, thx mates.
I Just solved it, I used a similar procedure to the oen that #AnikIslamAbhi sugested, in the fiddle that #Harshad shared in the comments is solved, but i have a much more dificult json to handle, i had to go with things like those to get the index of all levels of the json:
$scope.positionEvaluacion = $scope.dataEvaluacion.indexOf(args.levelOne);
$scope.positionAsignaturaevaluacion = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion.indexOf(args.levelTwo);
$scope.positionTarea = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea.indexOf(args.levelThree);
And after this override this object with the edited one:
$scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea[$scope.positionTarea] = $scope.objEdit;
You can try this procedure
Pass the selected object on edit click from UI to Controller.
Clone it and pass that object to modal.
OnModal close pass the modal object back to the UI.
Copy the values of modal object to the previous selected object
Like this
for(var i in modalObj){
selectedObj[i]=modalObj[i];
}

How to edit selectize input after calling selectize()

My goal is to reset selected values in selectize input. I called selectize function in seperate js file (working with Ruby on Rails), so there is no option to create some global selectize input variable (at least I want to avoid it).
In select2 I would solve similar issue like that:
$(".select2").select2("val", "")
but when I call selectize() second time on the input all previous options and collection loaded via ajax just dissappear.
Thanks for help
Selectize uses .selectized as its identifying class.
Unfortunately, selectize is not accessible via $('.selectized').selectize - you need to go directly to the <select>/<input> element - $('.selectized')[0].selectize as shown in the docs.
I don't believe you can access all selectize items at once, you need to iterate through them. I recommend using the map function, such as something like:
$.map($('.selectized'), function(item, index) {
item.selectize.setValue('');
});

jQuery not updating SOME spans

I am building a web-based tool for the role-playing game GURPS. Data is maintained in several XML files that are loaded into arrays. Based on changes the user makes, data is re-populated into various spans, inputs and dropdowns from the arrays. No problem so far.
To give the user more feedback, I have a added an anchor that does a hover pop-up that shows the details of the current weapon. For the initial coding, these values were hard-coded while I worked out the rendering issues. Still no problems yet.
Now I am trying to actually populate the hover pop-up with real data. I can not get it to load the real data into the span! I have debugged the function and am certain that I have extracted the data I want. I have used similar lines of code to populate other parts of the web page.
Specifics: I want to replace the "aa" in the span below:
<span id="weaponName1" name="weaponName1" class="weaponName">aa</span><img src="Images/Firearms/Makarov_Suppressed.jpg">
The code I am using to try to re-populate the span is:
function loadWeaponStats(person, weaponID) {
// Load stats of the current weapon into the "Details" anchor fly-out
for (xx1=0; xx1<WeaponsArray.length; xx1++) {
if (weaponID == WeaponsArray[xx1][0]) {
weaponName = WeaponsArray[xx1][1];
alert("weaponName: "+weaponName+"\nperson: "+person);
$("#weaponName"+person).val(weaponName);
xx1 = WeaponsArray.length; // Kill the loop
}
}
}
The alert() is simply to confirm that I have the correct data. The following line should re-populate the span, but it does not.
All HTML, CSS & JavaScript can be found at GURPS Combat Calculator
Pulling out what little hair I have left.
Thanks
You can also do as below:
$("#weaponName"+person).text(weaponName);
you can't use Val() method here.

Categories