Develop Reference

.click() Javascript function not working

I have been programming a website recently. However, when I add this function:
var getInput = function() {
$('#inputSubmit').click(function() {
return $('input[name=input1]').val();
)};
};
My text code breaks. Does anyone know what is wrong?

try this:
var getInput = function() {
$('#inputSubmit').click(function() {
return $('input[name="input1"]').val(); // added " "
}); // )} --> })
};

Why are my onclick methods returning Slider not defined?

I've got a fairly simple javascript creating a slider, but the onclick function is returning an error, and I can't figure out why.
http://jsfiddle.net/wxPWk/
var Slider = {
content: ["text", "img"],
current: 0,
render: function(){
view.innerHTML = this.content[this.current];
},
changeSlide: function(dir){
if(dir) {
this.current=0;
return
} else {
this.current=1;
}
this.render();
}
}
and in HTML I've got
<a onclick="Slider.changeSlide('back')"><</a> <a onclick="Slider.changeSlide()">></a>
but clicking the link I get a Slider is undefined error.

You need to set the JavaScript load parameter to 'No wrap - in ' so it's available:
http://jsfiddle.net/isherwood/wxPWk/2/
That raises other errors, unfortunately.

A quick fix is to declare Slider outside window.onload and assign it in window.onload:
var Slider = {};
window.onload = function() {
Slider = {
changeSlide: ...
}
}
A better solution is to define Slider outside window.onload as Isherwood proposed. Then you have to put the stand-alone Slider.render() inside window.onload.
var Slider = {
...
changeSlide: function(dir) {
if (dir) {
this.current = 0;
} else {
this.current = 1;
}
this.render();
}
}
window.onload = function() {
Slider.render();
}
Note that document.getElementById('slide') will only yield the correct div after the HTML has been rendered, so you should make the view variable part of the render function:
var Slider = {
content: ["text", "img"],
current: 0,
render: function() {
var view = document.getElementById('slide');
view.innerHTML = this.content[this.current];
}, ...
}
or assign a value to view in window.onload.

window.document in IE

I have this js to show a popup:
oauthpopup.js:
popup.show = function(options) {
this.destination_ = options.destination;
this.windowOptions_ = options.windowOptions;
this.closeCallback_ = options.closeCallback;
this.win_ = null;
this.win_ = window.open(this.destination_, "_blank", this.windowOptions_);
if (this.win_) {
// Poll every 100ms to check if the window has been closed
var self = this;
var closure = function() {
self.checkClosed_();
};
this.timer_ = window.setInterval(closure, 100);
}
return false;
};
popup.checkClosed_ = function() {
if ((!this.win_) || this.win_.closed) {
this.handleApproval_();
}
};
popup.handleApproval_ = function() {
if (this.timer_) {
window.clearInterval(this.timer_);
this.timer_ = null;
}
if (this.win_) {
this.win_.close();
//this.win_ = null;
}
try {
console.log(this.win_.document);
if (this.win_.document.scripts[0].innerHTML === 'window.close();') {
this.closeCallback_();
};
} catch (ex) { }
this.win_ = null;
return false;
};
page script
popup.show({destination: '/auth/' + channel, windowOptions: 'location=0,status=0',
closeCallback:function() {
switchView(divToShow);
}
});
function switchView(divtoShow) {
$("#" + divtoShow).addClass("hidden");
$("#" + divtoShow).removeClass("hidden");
};
It works perfectly in Chrome and Firefox, but in IE this line: this.win_.document.scripts[0].innerHTML doesn't works, I put this in a alert() but nothing happens.
EDIT:
The script tag 'window.close();' is rendered from rails controller in a html page.
The html page close the popup when is rendered, the popup is for twitter and google authentication.
How I can execute the callback after the page is rendered and it is closed?

empty() then run the rest of the function

I have some json that's loaded into li.ui-state-default pending user entry.
The user can then enter a new entry. I want it to empty li.ui-state-default every time a new entry is loaded but it seems to just stay empty.
//data for DOM
var timeout = '';
$('.call-json').keyup(function () {
clearTimeout(timeout);
var val = this.value;
timeout = setTimeout(function () {
$('.ui-state-default').empty();
$.getJSON('json/' + val + '.json', function (data) {
// load data
var items = [];
for (key in data[0].attributes) {
if (key.match('.stat.prop.type')) {
items.push(data[0].attributes[key])
}
};
displaySortLabel(items, "type-details");
function displaySortLabel(items, parentClass) {
$('<span/>', {
'class': 'el-data',
html: items.join('')
}).hide().fadeIn().appendTo('.' + parentClass + ' .sort-label');
}

Appending to li.ui-state-default by using .appendTo('.' + parentClass + ' .sort-label') will not work as it searches for a .sort-label to be present inside that parentClass variable.
Make sure you have the correct selector while trying to append.
Furthermore, you don't need to hide() and fadeIn():
$('<span/>', {
'class': 'el-data',
html: items.join(''),
'css': {
'display': none
}
}).fadeIn().appendTo('.' + parentClass + ' .sort-label');

Ajax.Request doesn't work in IE

I using prototype javascript
I am using ajax function which works perfectly in FF but not in IE
var MOList_VenuePostBox;
function getPreSearch(tid,tname){
include_js("http://" + getHostPath() + "/_scripts/lib/z_autocomplete_messagecenter.js",
function() {
//,{fetchFile:'/ajax/spot/getmyspots.aspx'}
MOList_VenuePostBox = new MOList('txtTagTheItem_VenueProfile', 'molist-auto1');
var counter = 0;
// fetch and feed
new Ajax.Request('/_service/getTagwordsByName.ashx', {
onSuccess: function(transport) {
transport.responseText.evalJSON(true).each(function(t)
{
MOList_VenuePostBox.autoFeed(t);
});
}
});
});
}
Thanks in advance

I just passed method as get
it solved my problem

include_js("http://" + getHostPath() + "/_scripts/lib/z_autocomplete_messagecenter.js",
function() {
//,{fetchFile:'/ajax/spot/getmyspots.aspx'}
MOList_VenuePostBox = new MOList('txtTagTheItem_VenueProfile', 'molist-auto1');
var counter = 0;
// fetch and feed
new Ajax.Request('/_service/getTagwordsByName.ashx', {
method:get,
onSuccess: function(transport) {
transport.responseText.evalJSON(true).each(function(t)
{
MOList_VenuePostBox.autoFeed(t);
});
}
});
});