thanks so much in advance...here is the problem...
I am trying to add dynamic HTML element (EX. [delete]),everytime on a event call using FBJS.I am able to append the element using following code.
var oldFriendHtml = document.getElementById('friend_container');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").getValue()-1)+2;
numi.value = num;
var newElementId = "new"+num;
var newFriendHTML = document.createElement('div');
newFriendHTML.setId(newElementId);
newFriendHTML.setInnerXTML("HTML TO BE ADDED");
oldFriendHtml.appendChild(newFriendHTML);
The problem I am facing is that FBJS parses out the onClick part (event call ) out from the original HTML added .This stops me in the further activity on the added element .It also removes the styling added in the HTML ..
Regarding onclick being parsed out of setInnerXHTML, you can add the event later by using addEventListener.
Here is some sample:
var my_obj = document.getElementById('test');
// add a new event listener for each type of event you needed to capture
my_obj.addEventListener('click',my_click_func); // in your case is onclick
function my_click_func(evnt){
// some action
}
more details see http://developers.facebook.com/docs/fbjs#events
Related
i have been trying to create a div inside my DOM every time i press the button yet it says appendChild is not a function sorry for the rude code but thats where i am at the moment.
var btn = document.getElementsByTagName('button')[0];
function crtRow(){
var newDiv = document.createElement('div');
newDiv.className = 'row';
document.getElementsByClassName('container').appendChild(newDiv);
document.body.appendChild(container);
}
btn.addEventListener('click', crtRow)
In your example appendChild is trying to be executed with HTML Collection, which it can't. You need to specify index for html collection document.getElementsByClassName('container')[0]
Also, then you will see another error for this line of code document.body.appendChild(container);. That's because you didn't define a variable called as container. It will try to append undefined to the body.
I'm having trouble passing in the name of an element into a Dyanamics CRM web Resource javacript.
This code works:
function OnFormLoad()
{
var subGrid = window.parent.document.getElementById("Claims")
// do work
}
This code doesn't:
function OnFormLoad(GridName)
{
var subGrid = window.parent.document.getElementById(GridName)
// do work
}
How do I pass in the name of the element I want to work with?
Please refrain from using document.getElementById in Dynamics as it is not supported.
I believe you are trying to get GridContext and get Data from that Grid.
For Example on Account entity we have Contacts as Grid and then you wish to get data from that Grid.
I replicated the same on Account Entity (OnLoad) and get tried to get data from Contacts Grid.
When adding OnLoad event I have passed Grid name as Parameter as below.
I have added below onLoad Js on Account entity and was able to retrieve data from grid.
Note: I have added timeout because directly firing onload was not able to load complete page and then grid Name was not available.
function onLoad(executionContext,gridName){
setTimeout(function(){ getGridDatat(executionContext,gridName); }, 3000);
}
function getGridDatat(executionContext,gridName){
debugger
var formContext = executionContext.getFormContext();
var gridContext = formContext.getControl("Contacts"); // get the grid context
var myRows = gridContext.getGrid().getRows();
/*var myRow = myRows.get(arg);
var gridRowData = myRow.getData();*/
var firstRow =myRows.get(0).getData();
var firstRowAllAttributes = firstrow.entity.attributes.getAll()
var firstRowfirstAttributeValue = firstrow.entity.attributes.get(0).getValue()
}
If you want to perform some operation on change of data formGird then there is one more way to achieve this. Make your grid as Editable and then you can find Events for that gird as below and could perform your operations.
So I'm using a PHP API to interact with, to build a forum using MooTools. I can get comments from my database and add comments, but I want to inject an edit button to coincide with each comment.
I inject the comments using:
function domReady() {
$('newComment').addEvent('submit', addComment);
}
function addComment(e){
e.stop();
var req = new Request({
url:'control.php?action=insertPost',
onSuccess:addajaxSuccess
}).post(this);
}
function addajaxSuccess(idNo) {
new Element('span',{
'text':'Post successful.'
}).inject($(newComment));
$('commentList').empty();
domReady();
}
I want to attach an edit button to each comment injected, and add an event listener on the button to change the comment into a textarea for editting, with an update button.
Any ideas?
If you want to bind a global events to a dynamic content you have better look into Element Delegation In mootools.
Basically it's give you the ability to bind event to some container and "listen" to events of that children container base on selectors. I made you a little example here:
http://jsfiddle.net/xwpmv/
mainContainer.addEvents({
'click:relay(.mt-btn)': function (event, target) {
var btn = target;
if(btn.get('value') == 'Edit'){
btn.set('value','Done Editing');
var content = btn.getPrevious();
content.setStyle('display','none');
var textarea = new Element('textarea').set('text',content.get('text'));
textarea.inject(btn,'before');
}
else{
btn.set('value','Edit');
var textarea = btn.getPrevious();
var new_value = textarea.get('value');
textarea.destroy();
var content = btn.getPrevious();
content.set('text',new_value);
content.setStyle('display','block');
}
}
});
Here you can see the mainContainer listen to the click event of every element who has mt-btn class (the buttons)
You have several errors in your code but maybe it is just an example so I didn't relate to it.
A simple app:
function doGet() {
return(test());
}
function test(){
var smiley = UiApp.createApplication().setTitle("TT Bomgar Feedback");
var textIn = smiley.createTextBox().setName("text");
var textOut = smiley.createLabel().setId("label").setVisible(false);
var button = smiley.createSubmitButton("Submit");
var handler = smiley.createServerHandler("handler");
button.addClickHandler(handler);
smiley.add(button);
smiley.add(textIn);
smiley.add(textOut);
return(smiley);
}
function handler(e){
app = UiApp.getActiveApplication();
var text = e.parameter.text;
app.getElementById("label").setVisible(true).setText(text);
return(app);
}
In the handler function, var text is always undefined. This means that the following is returned:
So, undefined is printed instead of "some text".
I don't understand why though, because I have correctly set the name of the text box element in the test function ...
Any assistance is greatly appreciated.
You need to add a callBackElemnt to the handler so that its value will get passed to the handler function. In normal practice, we just add the top most element containing all other elements. But you can also add all the elements whose value you want to pass.
modified script
var handler = smiley.createServerHandler("handler");
handler.addCallbackElement(textIn);
button.addClickHandler(handler);
You have to add callback element to your server handler:
...
var handler = smiley.createServerHandler("handler");
handler.addCallbackElement(textIn);
button.addClickHandler(handler);
...
https://developers.google.com/apps-script/class_serverhandler#addCallbackElement
I don't think this is a Drupal-specific question, but more of a general jquery/ajax issue:
Basically, I'm trying to use javascript to add up form fields and display the result in a "subtotal" field within the same form. Everything is working fine until i click the option to add another field (via ajax), which then changes my "subtotal" field to zero, and won't work again until I remove the field.
Here is the function that adds up the fields:
function calculateInvoiceFields(){
var total = 0;
var rate = 0;
var quantity = 0;
var i = 0;
var $ = jQuery;
$("#field-aminvoice-data-values tr").each(function(){
// quantity field number
quantity = $("#edit-field-aminvoice-data-und-"+i+"-field-aminvoice-quantity-und-0-value").val();
// rate field as number
rate = $("#edit-field-aminvoice-data-und-"+i+"-field-aminvoice-rate-und-0-value").val();
if(!isNaN(quantity) && !isNaN(rate)){
total += quantity*rate;
}
i++;
});
return total;
}
And here are the functions that get fired for .ready and .live:
jQuery(document).ready(function(){
var $ = jQuery;
$(".field-type-commerce-price input").val(calculateInvoiceFields());
});
jQuery(function(){
var $ = jQuery;
$(".form-text").live('change', function(){
$(".field-type-commerce-price input").val(calculateInvoiceFields());
});
});
Any ideas would be a big help. Thanks in advance!
I recommend using 'on' for any binding statement. and 'off' for unbinding.
The reason it doesn't work after an AJAX call, is because you need to be watching for that element to be added to the DOM, and an event attached to it after it gets loaded. If you load a new element in, and there is nothing watching for it, it won't add the event watch to that new DOM element.
As below:
function calculateInvoiceFields(){
/*..*/
return total;
}
$(document).ready(function(){
$(".field-type-commerce-price input").val(calculateInvoiceFields());
$("body").on('change', ".form-text", function(){
$(".field-type-commerce-price input").val(calculateInvoiceFields());
});
});
usually it stops working when an error has been thrown. did you check out your javascript console (firefox firebug, or built in for chrome) for any indication of an error?