I have a page which contains several divs (each with a unique ID and the same class, 'parent'). Underneath each "parent" div, is a div with class "child" and unique ID name -child. This DIV is upon page load empty.
Whenever you click on a parent DIV, the following code is executed.
$$('div.parent').each(function(s){
$(s).observe('click', function(event){
event.stop();
var filer = $(s).readAttribute('filer');
var currentElement = $(s).id;
var childElement = currentElement + '-children';
new Ajax.Updater ({success: childElement}, root + '/filers/interfacechildren', {
parameters: {parentId: currentElement, filer: filer}
});
});
});
Of course, it's possible that a child node is again a parent ont its own. The response looks like this (Smarty with Zend Framework):
{foreach from=$ifaces item=interface}
<div id="{$interface->name}" filer="{$interface->system_id}" class="parent">{$interface->name}</div>
<div id="{$interface->name}-children" class="child"></div>
{/foreach}
Whenever I click on a "parent" div that is loaded inside a child, nothing happens :( Any suggestions / fixes how to fix this?
Move event.stop() after the Ajax.Updater?
Fixed.
I put the code inside a function, and made it recurse itself onSuccess. That way, when the new parents are loaded with AJAX, the observer function takes into account the new created divs.
Related
I want my text area to be empty after I press OK button.
I have try this line this.byId("id").setValue("")
onWorkInProgress: function (oEvent) {
if (!this._oOnWorkInProgressDialog) {
this._oOnWorkInProgressDialog = sap.ui.xmlfragment("WIPworklist", "com.sap.FinalAssestments.view.WorkInProgress", this);
//this.byId("WIP").value = "";
//this.byId("WIP").setValue();
this.getView().addDependent(this._oOnWorkInProgressDialog);
}
var bindingPath = oEvent.getSource().getBindingContext().getPath();
this._oOnWorkInProgressDialog.bindElement(bindingPath);
this._oOnWorkInProgressDialog.open();
},
//function when cancel button inside the fragments is triggered
onCancelApproval: function() {
this._oOnWorkInProgressDialog.close();
},
//function when approval button inside the fragments is triggered
onWIPApproval: function() {
this._oOnWorkInProgressDialog.close();
var message = this.getView().getModel("i18n").getResourceBundle().getText("wipSuccess");
MessageToast.show(message);
},
The text area will be in popup in the fragment. I am expecting the text area to be empty.
If you instantiate your fragment like this:
sap.ui.xmlfragment("WIPworklist", "com.sap.FinalAssestments.view.WorkInProgress", this);
You can access its controls like this:
Fragment.byId("WIPworklist", "WIP").setValue(""); // Fragment required from "sap/ui/core/Fragment"
Source: How to Access Elements from XML Fragment by ID
The better approach would be to use a view model. The model should have a property textAreaValue or something like that.
Then bind that property to your TextArea (<TextArea value="{view>/textAreaValue}" />). If you change the value using code (e.g. this.getView().getModel("view").setProperty("/textAreaValue", "")), it will automatically show the new value in your popup.
And it works both ways: if a user changes the text, it will be automatically updated in the view model, so you can access the new value using this.getView().getModel("view").getProperty("/textAreaValue");.
You almost have it, I think. Just put the
this.byId("WIP").setValue("") line after the if() block. Since you are adding the fragment as a dependent of your view, this.byId("WIP") will find the control with id "WIP" every time you open the WIP fragment and set its value to blank.
You are likely not achieving it now because A. it is not yet a dependent of your view and B. it is only getting fired on the first go-around.
I'm creating a dom element programatically using dojo and I can "see" it in the dom with its id, but when I attempt a dom.byId("myId") it returns null.
I have a similar jsfiddle that is actually working (so it doesn't reproduce my problem, but it gives an idea of what I'm trying to do): if you click the button (ignore the lack of styling) in the run output panel, it alerts the content of the element retrieved by dom.byId. But similar code within my dojo widget is not working. Here's the code:
var content = lang.replace(selectFilterTemplate, {
"layer-id": layer.id,
"layer-index": idx,
"filter-name": filter.name
}); // this gets template HTML code similar to what's in the HTML panel of the jsfiddle, only it has placeholder tags {} instead of literals, and the tags are replaced with the attributes of the layer, idx, and filter objects here
// Use dojo dom-construct to create a div with the HTML from above
var node = domConstruct.create("div", { "innerHTML": content });
// put the new div into a dojo ContentPane
var filterPanel = new ContentPane({
"id": layer.id + "-filter-" + idx + "-panel",
"content": node,
"style": "width: 200px; float: left;"
});
// Get the dom element:
var mstag = dom.byId(layer.id + "-filter-" + idx + "-ms-tag")
// this is the same as the "var ms = dom.byId("IssuePoints-filter-1-ms-tag")" in the jsfiddle, but this one returns null. If I view the contents of the 'node' variable in the browser debugging console at this point, I can see the <select> tag with the id I'm referencing.
Why would I be getting null in my dom.byId() if I can see that element in the dom in the debugging console?
It seems that the element is added to the dom at a later point. You may see it with the debugger but it is not yet available the moment you call byId().
In the code you posted you create the filterPanel element but you do not place it in the dom. I assume this happens at a later stage. In contrast, the jsfiddle places the Button element with placeAt() directly after constructing it.
In my Polymer 1.0 app, I have an on-tap function which dynamically adds another button into the page based on a few parameters in the form. The problem is that after adding the element and its event listener to the page, the new button won't actually fire the on-tap event.
JSFiddle for testing: https://jsfiddle.net/dme6tb7z/
index.html
<template is="dom-bind" id="app">
<div id="output"></div>
<paper-button id="myButton" on-tap="_addButton">Add Button</paper-button>
</template>
<script src="app.js"></script>
Here is where I create the new button and give it a listener in JS. Is there some kind of extra step I need to take so that Polymer can "see" the new on-tap event listener?
app.js
app._addButton = function(e) {
var el = document.createElement('paper-button');
el.innerHTML = "New Button";
el.id = "newbutton";
el.addEventListener('on-tap', '_testEvent');
this.$.output.appendChild(el);
// I also tried adding the event listener after appending
// the element to the page, like so...
// this.$.newButton.addEventListener('on-tap', '_testEvent');
};
app._testEvent = function(e) {
console.log(e);
};
EDIT
I'm thinking maybe I need to use something like Polymer.dom(parent).appendChild(node) to keep the two DOMs in sync. I did this in my app.js like so, but the event still doesn't fire.
app.js scope
(function(document) {
'use strict';
var app = document.querySelector('#app');
...
app._addButton = function(e) {
var el = document.createElement('paper-button');
el.innerHTML = "New Button";
el.id = "newbutton";
el.addEventListener('on-tap', '_testEvent');
var parentNode = document.getElementById('output');
Polymer.dom(parentNode).appendChild(el);
};
...
})(document);
Surely, there must be some way to add event listeners after initial page load? I've done this same thing countless times in other setups, but there's something weird going on with Polymer... I understand there are two DOMs to update, but I'm using the Polymer.dom method, so what in the world is preventing this from happening?
More Info
I noticed that after appending the new button to the page, I can successfully run this:
document.getElementById('newbutton').innerHTML = 'Hello World';
whereas this:
document.getElementById('newbutton').addEventListener('on-tap', '_testEvent');
has no effect (and no errors). Isn't that bizarre? Is there some sort of reinvented registration process in Polymer to add event listeners?
Okay, I think I figured it out.
First of all, on-tap in this context should be tap.
Second, the function name from JS should be formatted like this: this.functionName, or app.functionName if your template has an id of "app" and app is defined as var app = document.querySelector('#app');
All together, it looks like this:
var newElement = document.getElementById('newbutton');
newElement.addEventListener('tap', this._testEvent );
This doesn't work in the JS Fiddle for some reason, but does work in a real Polymer environment.
I'm using ember latest and jquery.ui's Draggable and Droppable. I am also using some mixins that a talented ember person created to make a Draggable and Droppable view in ember. Here's the fiddle:
http://jsfiddle.net/inconduit/6n49N/7/
I need to attach the view's content to the drag event so that I can access it in the drop event. With straight up jquery, I know you'd do $(..).draggable({ .. }).data("myData","some data here"); but I don't know how to reference the view's content in this ember implementation.
Here's a snippet from App.Draggable in the fiddle:
App.Draggable = JQ.Draggable.extend({
appendTo: 'body',
helper: function() {
$(this).data("myData","this is where actual data would go");
JQ.Draggable extends Ember.View. Inside the helper() function, 'this' refers to the actual DOM element, I don't know how to refer to the View's variables. I want to pass the view's content so that it can be retrieved here:
App.Droppable = JQ.Droppable.extend({
drop: function(event,ui) {
alert('Dropped! ' + $(ui.draggable).data("myData"));
The template for the draggable looks like this:
{{#view App.Draggable contentBinding="App.anObject"}}Drag me{{/view}}
and I would like to pass that content. Please have a look at the fiddle, the pertinent functions are defined at the bottom of the javascript.
answering my own question here.
i attached the data in the didInsertElement callback as follows:
App.DraggableDataView = App.Draggable.extend({
didInsertElement: function() {
this._super();
var element = this.get('element');
$(element).data('myData',this.get('content'));
},
});
I'm new to Dojo and have a problem with my onChange() event, it runs when the page loads and not when the value in the Select box is changed. Here's my code, its all in the body section section of the page. Thanks for your help.
<div id="supportCentersListBox" data-dojo-type="dijit.form.Select"></div>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.Select");
function populateSupportCenters() {
var supportCenters = new dijit.form.Select({
maxHeight:"300",
id: "supportCenters",
onChange: changeTest(),
store: new dojo.data.ItemFileReadStore( { url: "some url address here" })
}, 'supportCentersListBox');
}
function changeTest() {
alert("Changed");
}
populateSupportCenters();
</script>
Fix your code so that the onChange is not a function call but instead a function pointer/reference
You have this 'problem':
<div id="supportCentersListBox" data-dojo-type="dijit.form.Select"> DOM renders (data-dojo-type is for parseOnLoad (dojo.parser) only, dont need it since youre creating it yourself
you instantiate a store
you instantiate a Select and render in supportCentersListBox - with store set, that fetches the url
fetch completes and Select is filled in
the item which has attribute selected:true or the first in index is set as value
onChange fires