Trying to write a basic jQuery plugin:
HTML:
<textarea>
<p>Hello World!</p>
</textarea>
jQuery:
$.fn.wysiwyg = function (options) {
var e = $(this).replaceWith("<iframe>");
console.log($(this)[0].contentDocument);
};
$("textarea").wysiwyg();
JSFIDDLE DEMONSTRATION
The Problem
var e = $(this).replaceWith("<iframe>");
console.log($(this)[0].contentDocument);
I am getting undefined at the console. If I set an id attribute to this iframe and target that id in console.log method, it works perfectly, but I want to use $(this). What can be done for this?
The problem is this will still refer to the textarea so
$.fn.wysiwyg = function (options) {
var $frame = $("<iframe>")
var e = $(this).replaceWith($frame);
console.log($frame[0].contentDocument);
};
Demo: Fiddle
Try This:
$.fn.wysiwyg = function (options) {
var $e = $("<iframe>");
this.replaceWith($e);
console.log($e);
};
$("textarea").wysiwyg();
:: JsFiddle ::
Related
I have the following code in a jQuery plugin:
$.fn.myForm = function() {
return this.each(function() {
var myForm = new MyForm(this);
$.data(myForm, 'myForm');
});
};
I thought that doing this, would allow me to then access the inner functions of myForm, such as getForm
var MyForm = function() {
//...
function getForm() {
return 'Hi';
}
}
But when I try to access myForm from outside the plugin, I get undefined:
$('#test').myForm();
$('#test').data('myForm')
> undefined
What am I doing wrong here?
set your data like this:-
$(this).data('myForm', myForm);
I have tried searching for what I am trying to accomplish, however I have not found what I am looking for.
I am looking to create a Next and Previous button inside the content of the Spry Accordion provided with Dreamweaver CS6. I have searched the SpryAccordion.js and found this code below:
Spry.Widget.Accordion.prototype.openNextPanel = function()
{
return this.openPanel(this.getCurrentPanelIndex() + 1);
};
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
return this.openPanel(this.getCurrentPanelIndex() - 1);
};
So I attempted to do this with "#acc-step-1-next" being my "Next" button in Panel 1.
<script>
$(document).ready(function(){
$("#acc-step-1-next").click(function(){
Spry.Widget.Accordion.prototype.openNextPanel = function(){
return ('#Accordian1').openPanel(this.getCurrentPanelIndex() + 1);
};
});
});
</script>
I was wondering if doing it this way might make it easy! How would I go about applying this? Would this work or not?
Also, with the "Next" button, could I just make it ".acc-step-next" and use it universally, instead of individually assigning new ID's?
EDIT:
Sorry, yes I read your answer incorrectly. I have tried searching for the init property, however have had no success.
This is what starts in the Accordion JS file:
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts)
{
this.element = this.getElement(element);
this.defaultPanel = 0;
this.hoverClass = "AccordionPanelTabHover";
this.openClass = "AccordionPanelOpen";
this.closedClass = "AccordionPanelClosed";
this.focusedClass = "AccordionFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.currentPanel = null;
this.animator = null;
this.hasFocus = null;
this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
this.useFixedPanelHeights = false;
this.fixedPanelHeight = 0;
Spry.Widget.Accordion.setOptions(this, opts, true);
if (this.element)
this.attachBehaviors();
};
Which I added this after, but still no luck:
var acc_next = document.getElementById("acc-step-next");
var acc_prev = document.getElementById("acc-step-prev");
$("acc_next").click(function(){
accordion.openNextPanel();
});
$("acc_prev").click(function() {
accordion.openPreviousPanel();
});
I have never worked with Spry.Widget.Accordion, but I would try something like the following.
Search for the code, where your accordion is initialized, it should look something like that:
var accordion = new Spry.Widget.Accordion("Accordian1",{});
And add this just below:
$(".acc-step-next").click(function(){
accordion.openNextPanel();
});
Together it could look something like that:
<script type="text/javascript">
$(document).ready(function(){
var accordion = new Spry.Widget.Accordion("Accordian1",{});
// Add a click handler to all buttons with the class 'acc-step-next' (yes you can do that)
$(".acc-step-next").click(function(){
// when the button is clicked, call the openNextPanel method of the accordion instance we saved above
accordion.openNextPanel();
});
});
</script>
Is it possible to change the order of events to invoke alert function with message Huh? first and only then next alert with 'Yeah!' message?
<div class="elem" onclick="alert('Yeah!')"></div>
My jQuery code.
$('.elem').click(function () {
alert('Huh?');
})
Link to jsFiddle: http://jsfiddle.net/84Lyq3n9/
How about this:
var inline_click_handler_src = $('.elem').attr('onclick');
var inline_click_handler = new Function('e', inline_click_handler_src);
$('.elem').removeAttr('onclick');
$('.elem').click(function () {
alert('Huh?');
inline_click_handler();
});
[Edit] Or without mucking with markup content:
var el = $('.elem').get(0);
var inline_click_handler = el.onclick;
el.onclick = null;
$('.elem').click(function () {
alert('Huh?');
inline_click_handler();
});
[One more edit] In case your inline click handler uses this, use function.call(), to set the execution context:
var el = $('.elem').get(0);
var inline_click_handler = el.onclick;
el.onclick = null;
$('.elem').click(function () {
alert('Huh?');
inline_click_handler.call(el);
});
But you can do it with many ways.
First you can remove the attribute "onclick".You can do it with javascript.
$('.elem').removeAttr("onclick");
$('.elem').click(function () {
alert('Whatever you want');
alert('Huh?');
})
Here is a link: http://www.w3docs.com/learn-javascript/javascript-events.html
When I call to the plugin in the document ready, It is working fine. But when I do the same thing in the button click event I am getting an error
TypeError: jQuery(...).coreFrame is not a function
Anyone having any idea about this ? thanx in advance.
My plugin
(function($) {
$.fn.coreFrame = function(dataObject, templateName) {
if (dataObject.Error.Status == 200){
var source = $("#"+templateName).html();
var template = Handlebars.compile(source);
var actualTemplate = template(dataObject);
return $(this).html(actualTemplate);
}else{
var notificationArray ={};
notificationArray["type"]= "info-box-red";
notificationArray["message"]= notificationDetails[0].msg;
var source = $("#error_template").html();
var template = Handlebars.compile(source);
var actualTemplate = template(notificationArray);
return $(this).html(actualTemplate);
}
}
}(jQuery));
$(document).ready(function(){
$("#station-list-container").coreFrame(obj ,list_template);
**It's working like this.**
$("button").on("click",function(){
$("#station-list-container").coreFrame(obj ,list_template);
**It's NOT woking.**
});
});
I'm trying to create an element onclick and hide the element when it is clicked but it does nothing?
Why does the hide() function do nothing?
<script type="text/javascript">
function show(){
var a = document.getElementById('foo');
var b = document.createElement("div");
b.setAttribute('id', 'bar');
b.setAttribute('onclick', 'hide()');
a.appendChild(b);
b.innerHTML = 'TEXT CONTENT';
b.onclick = function() {
hide();
};
}
function hide() {
var x = document.getElementById('foo');
var z = document.getElementById('bar');
x.removeChild(z);
}
</script>
<div id="foo" onclick="show()">CLICK ME</div>
Add
b.onclick = function() {hide();};
If this is occurring under IE, then see Stackoverflow - Why does an onclick property set with setAttribute fail to work in IE?
you can use jquery method to register function it will work in both IE,FF
A sample for u
$(b).click(function() {
//call your function like hide() i have made a separate function for cleaner code and re usability
});
function hide()
{
}