I am creating a table run time in the memory and later appending it to dom.
Something like this :
var myTable = $('<table></table>').attr({ id: "dataMatrixtable" }).attr({class: "tipTable",cellpadding: "5",cellspacing: "0"});
myTable.appendTo(this.top.$("#tableContainer"));
This.top because table is in a iframe.
Now I wrote a plugin something like this.
(function($){
$.fn.extend({
mailServer : function() {
this.addClass("blah");
},
})
})(jQuery)
when i am calling this function mailServer after appending the table to dom
$("#dataMatrixtable").mailServer();
or
this.top.$("#dataMatrixtable").mailServer();
either way its not working (not appending the class)
Where as it works for the elements which is already in the dom when page loads..
How to solve this issue.please help
Actually I found a way its working now ..
What I did is
myTable.mailServer(); (its working and I am able to access the plugin funciton mailServer()
In place of doing
$("#dataMatrixtable").mailServer();
Related
my apologies for any mistake in english, I am brazilian.
I have a website with DOJO library, I use it in many things.
I am having some dificulty to create buttons in javascript.
I wrote a function to create the buttons, it is working, creating buttons.
But, when a new button is created, the former button lost the event "onclick".
It can be viewed here: http://jsbin.com/xuzevi/edit?html,js,output
To create the button, I used this code:
require([ 'dojo/dom', 'dojo/parser', 'dijit/form/Button', 'dojo/domReady!' ],
function( dom, parser, Button)
{
var div_Compra = document.getElementById(p_Div);
if( ! div_Compra ) { console.log('ERRO - div_Compra: '+p_Div); return false; }
var botao = new Button({ label: '' });
if( ! botao ) { console.log('ERRO - botao'); return false; }
botao.startup();
botao.set('iconClass', 'dijitEditorIcon dijitEditorIconSelectAll');
botao.set('showLabel', false);
botao.placeAt(div_Compra);
botao.on('click', function() { Mensagem(p_Indice); });
}
);
Thanks.
The issue is not in the above mentioned code. Main problem is your usage of innerHTML in CPR_Compra.Cadastro method. You cannot think, the dojo dijits as just HTML tags, they are DOM objects, nodes and more. When you updated the div_Cadastro.innerHTML, it kind of destroyed the wigit, but retained the HTML tags, so the onclick event stopped working.
Instead of using innerHTML use appendChild, that way the dom nodes wont be destroyed. below is the JSBin with working implementation.
http://jsbin.com/butacuquza/edit?js,output
from https://davidwalsh.name/dojo-widget
To create a widget programmatically, you create DOM nodes which act as placeholders for the future widget
and read this: https://davidwalsh.name/dojo-behavior
Widget Creation with dojo.behavior
Widget creation is an even better opportunity to use dojo.behavior:
for others who came to here like me, a few more links:
HTML DOM appendChild() Method
https://www.w3schools.com/jsref/met_node_appendchild.asp
The Node.appendChild() method adds a node to the end of the list of children of a specified parent node.
https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
I'm sure this sounds a little odd, but here's the background...
We utilize a company that loads their chat program, so we can support our customers, into our page. This is done via javascript and jquery, and creates a structure like this:
<div id="myid" style="...; right: 0px;..."><div><iframe></iframe></div></div>
There's a WHOLE lot more to that, but those are the important parts. Now the tool allows us to put custom scripting, which will be placed in the iframe. My goal is to just remove the "right: 0px", which I have done via the below code, but I don't want to put that code on every page that this tool integrates with. I would like to load it into the tool, and have it run when the iframe and divs are created.
working code on parent:
$(document).ready(function() {
function checkPos() {
$('#myId').each(function() {
var oldstyle = $('#myId').attr('style');
var newstyle = oldstyle.replace(' right: 0px;','');
$('#myId').attr('style', newstyle);
});
setTimeout(checkPos, 100);
};
$(document).ready(function() {
setTimeout(checkPos, 100);
});
});
Once placed in the code include method they provide, I have trouble having it wait until the div tag actually has the "right: 0px;" in its style tag. the only thing I need to run is the three lines in the $('#myId').each(function()
Basically, I need help with having the script in the iframe target the div that the iframe is nested in.
Assuming that whatever tool your using actually lets you pass in a custom script to the content rendered in the iframe (seems fishy to me), a better way of modifying the style in jquery is to use the css function:
$('#myId').css('right', '0px');
Notice I removed the $.each function as well. You are targeting an element with an id, so there isn't any need to iterate.
Edit:
Anyways, back to the problem of delaying execution to when the target, #myId, actually exists. If they are really injecting your javascript into their page (again, seems fishy), then attaching the above code to the $(document).ready() event should do the trick, as long as this listener is attached to their document.
If all else fails, try to use the waitUntilExists plugin, here:
Source:
https://gist.github.com/buu700/4200601
Relevant question:
How to wait until an element exists?
fairly new to Polymer -- I'm having an issue that I can't seem to figure out. I have this bit of javascript code at the end of the file I am importing for my custom polymer element:
Polymer('metafaq-name', {
ready: function (){
var subby = document.querySelector('.classname');
console.log(subby);
subby.onclick = function () {
console.log('clicky');
}
}
});
and despite me being relatively new to javascript I'm pretty sure there's no (major) errors because it works on any class that's in the main html file, just not on the classes IN the custom polymer element html file where I create it.
Any ideas? I can't seem to get it to recognize any class or ID that's in the file. My thoughts have been that there might be an issue with how the custom element is actually getting imported, like maybe it's adding the script before the rest of the element, but I thought by adding a 'ready' it would fix this issue, so now I'm out of ideas.
Any help would be appreciated! Thanks!
Shan
Your node resides in shadow DOM (in template, if you will), so you should do a query on shadowRoot.
Like this:
this.shadowRoot.querySelector('.className')
If you just want to assign a click handler, you could just say so in in your tag as an on-click - (check under 'Declarative event mapping') - attribute.
For example:
<button on-click="{{hiThere}}">
And then:
Polymer('your-element)', {
hiThere: function() {
alert('hi')
}
})
I can't use new version of jQuery. I have 1.6.
I have in head ui.core, ui.slider, but when I call $('#min-price').slider(); I am getting:
$("#min-price").slider is not a function
I call it when DOM is ready.
Could somebody help?
code added
$(document).ready(function() {
var wrapper = $('<span id="snuper-sorter-wrapper">Sort by: </span>'),
dealsDivCopy = $('.view .views-row').clone(true),
dealsCategories = $('#deals-categories'),
currentDeals = Drupal.settings.snuper_filter.deals;
$('#min-price').slider(); //here it fails
//rest of code
How can I examine that jquery ui object exists and get function list?
EDIT
My fault, I need to load it in different way.
In Drupal you add jQuery element this way:
jquery_ui_add(array('ui.slider'));
Check if you have loaded both libraries (jQuery and the jQueryUI) and also make sure the paths to the files are correct.
I'm using the cluetip jQuery plugin.
I'm trying to add my own close button. The the jquery I'm trying to call is:
$(document).bind('hideCluetip', function(e) {
cluetipClose();
});
There are many references to cluetipClose() through the code and the button that the jquery inserts uses it and works so that function as far as I'm aware works fine.
I'm trying to trigger that using
$('a.close-cluetip').trigger('hideCluetip');
I've created my link:
Close
But it isn't doing anything.
Am I calling it incorrectly?
The problem here is that in the cluetip plugin, the function clueTipClose() is inside a closure, so you have no access to it unless you're inside the closure (i.e. inside the plugin's code). Now I've gotta admit, this plugin doesn't seem to be set up to be all that extensible. If they made this function accessible via a "clueTip" object that was set up for each element that uses it, you'd be able to add another jQuery method to the end of the closure like this:
$.fn.cluetipClose = function() {
return this.each(function() {
var thisCluetip = findCluetipObj(this);
if (thisCluetip)
thisCluetip.cluetipClose();
});
};
But you have the unfortunate luck of not being able to do this easily. It looks like this guy wrote his jQuery plugin with non-OO code inside of a closure. Poor you.
Now on the plus side, it seems this plugin is already running this code directly after it instantiates the cluetipClose() function. Have you tried just doing this from your code:
$('a.close-cluetip').trigger('hideCluetip');
Without redeclaring the document hideCluetip bind? I think that should probably work.