Getting undefined even though it is defined ( JavaScript ) - javascript

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

jQuery Plugin: Add method with .each

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);

Accordion Next Button

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>

How to change the order of events?

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

Creating a custom jQuery plugin: "pluginName is not a function"

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.**
});
});

Javascript doing something strange? works in IE but not firefox?

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()
{
}

Categories

Resources