Develop Reference

Polymer how to re-render element/template

I'm trying to dynamically add a page to iron-pages, but the element doesn't recognize the dynamically added content. I think this happen during html rendering, but I don't know how to trigger it again. The jsbin below demonstrates what I'm trying to do: http://jsbin.com/nuhone/4/edit?html,console,output. Basically, I have an iron-pages with one existing page. I'm trying to add a second page dynamically, but unable to do so because iron-pages doesn't recognize this newly added div.

Took a look at your code - basically 2 issues.
Polymer.domAPI
When inserting or removing nodes, use it.
Race Condition
iron-pages extends IronSelectableBehavior - ie MutationObservers have already been setup nicely to detect whenever you add/remove pages. However, this takes time to trigger. Wrap your next steps with Polymer.async() to place them at the end of the microtasks queue.
document.addEventListener("WebComponentsReady", function() {
var newDiv = document.createElement("div");
newDiv.innerHTML = "Def";
var ironPage = document.querySelector("iron-pages");
Polymer.dom(ironPage).appendChild(newDiv);
Polymer.Base.async(function () {
console.log(ironPage.items.length); // shows 2
ironPage.select(1);
});
});
Your jsbin fixed: http://jsbin.com/viqunoxesi/edit?html,console,output

It might help to use the Polymer DOM API like
Polymer.dom(document.querySelector("iron-pages"))
.appendChild(newDiv);

Click event added to appended html; element not working as anticipated

OK I am sure I am doing something simple fundamentally wrong but am unable to resolve this issue on my own. I have tried googling and searching this forum and reading through the relevant parts of the jquery documentation.
If you need any further information please let me know. Many thanks in advance.
What I am trying to do:
I have a table showing details of various tests at the bottom of which I have a button to ad a new test. As each test comprises several rows of the table I have a template in a hidden div which I have cloned and appended to the live table. I am the using jquery to add appropriate classes and ids based on a variable integer for the sake of uniqueness. I am also attempting to add a click event to an image within one of the table cell to delete the rows relating to that particular test.
My current function
function newTest(sampleID){
var testID = $("#testCount").val();
$("#newTest tr").clone(true)
.addClass("test"+testID)
.appendTo("#testsTable"+sampleID);
$(".newdelbox:first")
.attr("id","testDelete"+testID)
.addClass("delbox")
.removeClass("newdelbox");
$(".test"+testID).on('click',"#testDelete"+testID,delSample(testID));
testID++;
$("#testCount").val(testID);
}
What I need to happen
Function to be called when image is clicked.
What is happening
Function is called only when script is assigned (not clicked). Function will not subsequently run when clicked. I am seeing no errors within the console.
What I have tried
chained to preceeding code:
.click(delSample(testID));
.on("click",delSample(testID));
.bind("click",delSample(testID));
As new line within function:
$(".test"+testID).on('click',"#testDelete"+testID,delSample(testID));
document.getElementById("testDelete"+testID).onclick(delSample(testID));
document.getElementById("testDelete"+testID).addEventListener("click",delSample(testID),false);

try this:
.click(function(){
delSample(testID);
});
OR
.on("click",function(){
delSample(testID);
});

i do not know of your html but i supose something like
.on("click",function(){
var current_id = jQuery(this).attr('id');
delSample(current_id);
});
just locate your id

Automate page turning with jFlip

I want to have a page turn effect like the one seen on this page: jFlip demo except I want to automate the page turning, like make it happen every second, 20 times (or however many images I have). I want to be able to trigger this animation to run either on page load, when a button is clicked, etc.
Unfortunately I don't understand jQuery all that well and the plugin's events seem rather complicated to me, probably mostly due to my inexperience with jQuery. Any help on which direction I should go, methods I should try? I am not limiting myself to jQuery or even Javascript, this is just the example I have found that achieves my desired effect.

You can find the updated code here. replace this with old one.
Usage :
var jFlip = new Flip("#g1",300,300,{background:"green",cornersTop:true,scale:"fit"});
// here #g1 is a jquery selector (make sure it returns only one).
// The structure is Flip(JQselector,width,height,options)
then use the jFlip object to flip slides/pages
jFlip.flipMe() // for next slide
jFlip.flipMe(true) // for prev slide
for binding a function to slide change event you can use
$("#g1").bind("flip.jflip",function(event,index,total){
$("#l1").html("Image "+(index+1)+" of "+total);
});
// here the selector is same as the one passed inside jFlip function.
Try this and let me know the feedback.

JavaScript seem just to react after MouseMove

probably the strangst thing I've ever seen: I want to load a grid after the document is loaded. Since the grid (infragistics) seems to delay, I set a interval, in the interval I try to get the needed element, if I cant find it, I wait another 500 ms:
function trySetEditMode(obj) {
var testObj = $('#' + obj.btnId).parents("tr[type='row']").get(0);
if (testObj && testObj._object){
clearInterval(_intervalId);
The funny thing is: Even if I see the with the IE debugging tool the row is there, it justdoenst find it. It works just when I move arround with the mouse. This effect seems totally random.
Has anyone an idea how this is possible? I tried to tinker arorund with .focus, .blur etc, but nothing seems to work.
btw: obj is a custom object from me, the button id is the clientid of the button and is there. For example:
$('#' + obj.btnId).parents('tr').length
returns a length.
Can this be a bug from the infragistics control? If yes, how could I simulate this mouseMove?
Best regards
Matthias

Creating the row objects is costly on the client and as such they are created on demand to avoid a large performance hit if all row objects were created initially. The actual creation of these objects is on mouse over or when you use the get_row() method that is provided as part of the client side object model. As such the recommended approach is to use the client side object model to get a reference to the row, for example the following will get the first row:
var grid = $find("webDataGrid1");
var row = grid.get_rows().get_row(0);

probably someoneelse will have this problem as well with infragistics webdatagrid:
Sidenote: I cant believe the ig support couldnt tell me that:
The Grid is kinda lazyLoaded, the dom gets loaded but the ig relevant attributes AND the object behind just get loaded when you go with the mouse over. So it didnt matter how long I waited, the object wasnt just there.
Since I had no time to get a proper solution, I basically fired manually the mouse over event on a cell. It doesnt matter on what you do this, but I tested it with the first one and it worked proper.
//The grid doesnt load data (except the first row) until the mouse did hover over it
//Get a cell, and hover over it
var parentTd = btn.parents('td').first();
var cell = parentTd.siblings()[0];
var rows = $find('dgrRoles').get_rows();
if (cell && rows) {
cell.target = cell;
rows._onMouseOver(cell);
}

Removing data attributes from HTML using jQuery

Can't seem to get this one to work...
I have a page that hides certain links. When the DOM is loaded, I'm using jQuery to toggle some of those elements. This is driven by using a data attribute like so:
<div class="d_btn" data-usr='48'>
<div class="hidden_button">
Then, I have the code:
$.each($(".d_btn"), function() {
var btn = $(this).data('usr');
if ( btn == '48' ){
$(this).children('.hidden_button').toggle();
}
The above all works as planned. The problem is that I am trying to remove the data-usr from the class .d_btn once the if statement is evaluated. I've tried the following and nothing works (i.e., after the page is loaded, the source still shows the data-usr attribute:
$(this).removeAttr("data-usr");
$(this).removeData("usr");
I've been working on this for a couple of hours now and...nothing! Help is greatly appreciated!
UPDATE
I've tried the great suggestions of setting the data attribute to an empty string but I'm still not getting the desired result.
To explain a little further, The reason I'm trying to remove the attribute is so when an ajax response adds another item to the page, the previously added items would already have the button either shown or hidden. Upon AJAX response, I'm calling the same function once the DOM is loaded.
Currently, when something is added via AJAX, it toggles all the buttons (showing the ones that were hidden and vice versa.) Ugh...
I'm also fully willing to try alternatives to my approach. Thanks!
UPDATE
Well, the light bulb just flashed and I am able to do what I want to do by just using .show() instead of .toggle()
Anyway, I'd still like to find an answer to this question because the page will be potentially checking hundreds of items whenever something is added - this seems horribly inefficient (even for a computer, hahaha.)

Why don't you set the value to a random value or empty variable instead if removeAttr does not work..
$(this).attr("data-usr" , '');
$(this).prop("data-usr" , '');

Changing the DOM doesn't affect the source. It affects the DOM, which you can view with the Inspector/Developer Tools. Right click => View Source will give you the original source of the page, not the actual current source as modified by JavaScript.

Set it to a blank string:
$(this).attr("data-usr", "");
I second what Kolink said: check the DOM, not the source. (Chrome: Ctrl + Shift + i).

As others have stated. Checking the source will only show the original unedited source for the webpage. What you need to do is check the DOM using developer tools.
I've just checked everything in Chrome's inspector on jsfiddle here and the attribute is definitely being removed as well as the data.