Can anyone help me translate this to prototype
var btn = $('#onestepcheckout-button-place-order');
var btnTxt = $('#onestepcheckout-button-place-order span span span');
var fewSeconds = 10;
btn.click(function(){
btn.prop('disabled', true);
btnTxt.text('Even geduld A.U.B.');
btn.addClass('disabled');
setTimeout(function(){
btn.prop('disabled', false);
btnTxt.text('Bestelling plaatsen');
btn.removeClass('disabled');
}, fewSeconds*1000);
});
Prototype is confusing the sh*t out of me
Try this:
var btn = $('onestepcheckout-button-place-order');
var btnTxt = $$('onestepcheckout-button-place-order span span span')[0];
var fewSeconds = 10;
Event.observe(btn, 'click', function(){
btn.setAttribute('disabled', 'disabled');
btnTxt.innerHTML = 'Even geduld A.U.B.';
btn.addClassName('disabled');
setTimeout(function(){
btn.removeAttribute('disabled');
btnTxt.innerHTML = 'Bestelling plaatsen';
btn.removeClassName('disabled');
}, fewSeconds*1000);
});
I haven't tested it though.
I'm not going to give you the direct copypasta snippet for your problem but you only probably just need to do the following swaps:
$(selector) with $($$(selector))
prop to attr
addClass to addClassName
I'm omitting one more replacement so you can look for it yourself, for added challenge! Protip: search google for "Prototype to jQuery equivalent". So many resources!
Alternatively, you can just use jQuery in jQuery.noConflict mode and wrap the above in a jQuery closure.
(function($) {
// your code above goes here.
})(jQuery)
Related
My question is, Why doesn't the click event work when other events do work using the same code? Consider the following code examples from http://www.pricelearman.com/__dev (2 underscores)
For Square 2 using "click" event
function showWorkPane() {
var _workID = document.getElementById("workID");
_workID.addEventListener("click", showWorkPaneHandler, false);
}
function showWorkPaneHandler(e) {
var _workPane = document.getElementById("workPane");
e.preventDefault();
_workPane.style.display = "block";
}
Clicking on the link "Work" does not show the workPane.
For Square 3 using "mouseover" event
function showAboutPane() {
var aboutID = document.getElementById("aboutID");
aboutID.addEventListener("mouseover", showAboutPaneHandler, false);
}
function showAboutPaneHandler(e) {
e.preventDefault();
var v = document.getElementById("aboutPane");
v.style.display = "block";
}
Rolling-Over the link "ABOUT" shows the aboutPane hover effect as expected
For Square 4 using "mousedown" event
function showConnectPane() {
var connectID = document.getElementById("connectID");
connectID.addEventListener("mousedown", showConnectPaneHandler, false);
}
function showConnectPaneHandler(e) {
e.preventDefault();
var v = document.getElementById("connectPane");
v.style.display = "block";
}
Holding mouse down on the link "CONNECT" shows the connectPane as expected
What am I missing about the click event. It's counterintuitive to me that it would not follow the same pattern as the other mouse events.
I'm trying to preclude interference from the link's default action by using e.preventDefault();
I know a click event is a sequence of simple events: mousedown,mouseup,click.
Is there something blocking this sequence?
The full code can be reviewed at http://www.pricelearman.com/__dev (2 underscores). The code may not be optimum, but it is functionally correct – binding is accomplished and functions are called, etc – else the above code would not be working at all.
Thanks for your time and expertise. This is a vexing question to me. It seems so fundamental and simple. I'm new to javascript and I must be missing something.
For Square 2 using "click" event
function showWorkPane() {
var _workID = document.getElementById("workID");
_workID.addEventListener("click", showWorkPaneHandler, false);
}
function showWorkPaneHandler(e) {
var _workPane = document.getElementById("workPane");
e.preventDefault();
_workPane.style.display = "block";
}
Clicking on the link "Work" does not show the workPane.
Well what I currently can find at http://www.pricelearman.com/__dev/_js/main.js is
// Show work navigation
function showWorkPane() {
var workID = document.getElementById("workID");
workID.addEventListener("mouseover", showWorkPaneHandler, false);
// ^^^^^^^^^
}
function showWorkPaneHandler(e) {
e.preventDefault();
var v = document.getElementById("workPane");
v.style.display = "block";
}
Looks quite obvious to me why click events show no effect. There are none bound.
$('.collapse').each(function() {
var title= $(this).siblings('.accordion-heading').find('a');
$(this).on('show hide', function (e) {
if(!$(this).is(e.target))return;
title.parent().toggleClass('active', 300);
title.parent().hasClass('active') ? $('input.party').prop('value', '') : $('input.party').val(title.siblings('.delete').prop('id'));
var id = title.siblings('.delete').prop('id');
var data = {id: id};
$.post("times.php", data, function(result) {
if(title.parent().hasClass('active')){
$('.times').html('');
} else {
$('.times').html($.parseJSON(result));
}
})
})
})
So I am adding a new accordion-group to my html by adding a new party and I wan't all this to work on the newly added elements as well. I didn't find topics that could help me since it is a bit more specific than any random each function (I think).
This future elements thing is new to me, so I would appreciate some explanations or a good link to a place other that the jquery website which I already checked.
Thank you for your time!
Basically what I want to do this replace $(this).on('show hide', function (e) { with something like $(document).on('show hide', $(this), function (e) {. What I just wrote doesn't work though.
If it is just about the event handler, then you can use event delegation to capture the event on dynamically created elements as well.
There is not reason why you have to use .each here, so just omit it:
$(document.body).on('show hide', '.collapse', function() {
var title = $(this).siblings('.accordion-heading').find('a');
if(!$(this).is(e.target))return;
// rest of the code...
});
this will apply on any new objects matching selector
jQuery(document).on('show hide', '.accordion-heading a', function(event){
...
});
For some reason when I try running the following code:
var casper = require('casper').create();
var x = require('casper').selectXPath;
var links = [];
casper.start('http://www.website.com');
function getLinks() {
var links = document.querySelectorAll(x('//*[#id="horizontalList"]/li[#class="paddingRight6"]/a');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('href')
});
}
casper.then(function() {
links = this.evaluate(getLinks);
this.echo(links);
}
casper.run();
Returns a null object, but when I use the very same xpath selector in conjunction with the thenClick method, everything works fine and the url changes. Why on earth is that?
So, it turns out that the querySelectorAll method doesn't actually support XPath. In fact it doesn't come from casperjs at all, and is supported by the browser, which is why it accepts CSS3 selectors, and not XPath. It was tough for me to figure that out so I figured I would put this up in case anyone else had this problem. You have to use CSS3 selectors for this within casperjs so the line:
var links = document.querySelectorAll(x('//*[#id="horizontalList"]/li[#class="paddingRight6"]/a');
Needs to be changed to:
var links = document.querySelectorAll('ul#horizontalList li.paddingRight6 a');
Happy hacking
The below function works for me with Xpath.
function getLinks() {
var links =__utils__.getElementsByXPath('//*[#id="horizontalList"]/li[#class="paddingRight6"]/a');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('href');
});
}
I have a Wordpress blog at http://themes.visualise.ca/visualise and when a user clicks on a thumbnail the post is loaded with AJAX (using the jQuery address plugin) . I would like the URL to change at the same time to i.e. for the second thumbnail the url should change to http://themes.visualise.ca/visualise/portfolio/samuel but with the following code it changes to http://themes.visualise.ca/visualise/visualise/portfolio/samuel.
1) So my question is there a way to make the jQuery address replace the current pathname by the destination url's pathname instead of simply adding it at the end? I would like the solution to work also with http://themes.visualise.ca/ to http://themes.visualise.ca/visualise/portfolio/samuel because the blog might not be hosting in a folder like it is right now.
2) Or maybe there is another way to achieve this?
Here is the jQuery code:
$('.ajaxed,li.menu-item-object-page a').live('click', function(event) {
var link = $(this).attr('href');
var rewritepath = $(this)[0].pathname;
$("html,body").animate({scrollTop: 0}, 300);
$('#content,.plus').stop().fadeOut('slow', function(){
$('#board-wrapper').slideDown('slow');
$('#board').fadeOut('slow', function(){
$('#board').stop().load(link, function(){
$('#board').delay(1000).fadeIn('slow', function(){
var board_h2 = $('#board').height();
$('#board-wrapper').css('height', board_h2 + 'px');
});
});
});
});
$.address.crawlable(true).path(rewritepath);
return false;
});
Many thanks for your time and help.
What I did is that I removed the root site url from link url and it works.
$('.ajaxed,li.menu-item-object-page a').live('click', function(event) {
var link = $(this).attr('href');
var toRemove = MySettings.url;
var url_pathname = MySettings.url[0].pathname;
var rewritepath = link.replace(toRemove,'');
...
});
Preface: I am sure this is incredibly simple, but I have searched this site & the jQuery site and can't figure out the right search term to get an answer - please excuse my ignorance!
I am adding additional form fields using jQuery's ajax function and need to then apply additional ajax functions to those fields but can't seem to get jQuery to monitor these on the fly form fields.
How can I get jQuery to use these new fields?
$(document).ready(function() {
$('#formField').hide();
$('.lnk').click(function() {
var t = this.id;
$('#formField').show(400);
$('#form').load('loader.php?val=' + t);
});
//This works fine if the field is already present
var name = $('#name');
var email = $('#email');
$('#uid').keyup(function () {
var t = this;
if (this.value != this.lastValue) {
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(function () {
$.ajax({
url: 'loader.php',
data: 'action=getUser&uid=' + t.value,
type: 'get',
success: function (j) {
va = j.split("|");
displayname = va[1];
mail = va[2];
name.val(displayname);
email.val(mail);
}
});
}, 200);
this.lastValue = this.value;
}
});
});
So if the is present in the basic html page the function works, but if it arrives by the $.load function it doesn't - presumably because $(document).ready has already started.
I did try:
$(document).ready(function() {
$('#formField').hide();
$('.lnk').click(function() {
var t = this.id;
$('#formField').show(400);
$('#form').load('loader.php?val=' + t);
prepUid();
});
});
function prepUid(){
var name = $('#name');
var email = $('#email');
$('#uid').keyup(function () {
snip...........
But it didn't seem to work...
I think you are close. You need to add your keyup handler once the .load call is complete. Try changing this...
$('#form').load('loader.php?val=' + t);
prepUid();
To this...
$('#form').load('loader.php?val=' + t, null, prepUid);
What you are looking for is the jquery live function.
Attach a handler to the event for all elements which match the current selector, now or in the future
You can do something like this:
$('.clickme').live('click', function() {// Live handler called.});
and then add something using the DOM
$('body').append('<div class="clickme">Another target</div>');
When you click the div added above it will trigger the click handler as you expect with statically loaded dom nodes.
You can read more here: http://api.jquery.com/live/