Develop Reference

How to check a radio have onclick with caperjs?

This is my code:
Full code here: http://notepad.cc/casperjsstack1
this.thenOpen('https://www.1800flowers.com/webapp/wcs/stores/servlet/FDDeliveryOptionsDisplayCmd', function() {
this.waitForSelector('#BP-DeliveryCardMess_1', function() {
this.evaluate(function() {
var el = $('#giftMessages.noCard');
el.onclick();
});
});
});
Look at the picture: I want check No Gift Message
I try so much method but all false
Code HTML page here: http://notepad.cc/casperjsstack1_html
Thank you !

Have you tried click()?
this.thenOpen('https://www.1800flowers.com/webapp/wcs/stores/servlet/FDDeliveryOptionsDisplayCmd', function() {
this.waitForSelector('#BP-DeliveryCardMess_1', function() {
this.evaluate(function() {
this.click('#giftMessages.noCard'); // Click the radio button.
});
});
});

Try this.
//jQuery version using evaluation page context
this.thenOpen('https://www.1800flowers.com/webapp/wcs/stores/servlet/FDDeliveryOptionsDisplayCmd', function() {
this.waitForSelector('#BP-DeliveryCardMess_1', function() {
this.evaluate(function() {
$("#giftMessages.noCard").prop("checked", true).trigger("click");
});
});
});
//Casper version using click
this.thenOpen('https://www.1800flowers.com/webapp/wcs/stores/servlet/FDDeliveryOptionsDisplayCmd', function() {
this.waitForSelector('#BP-DeliveryCardMess_1', function() {
this.click("#giftMessages.noCard");
});
});

How can I reuse a variable in a different scope?

I am trying to figure out how I can reuse a variable within a function, right now I have to put it in each scope for it to work.
Say I have an jQuery Event handler:
$('.button').on('click', function() {
var btn = $(this).data('button');
$(this).addClass(btn+'-activate');
}).on('mouseup', function() {
var btn = $(this).data('button');
$(this).removeClass( btn+'-activate');
}).on('mouseleave', function() {
var btn = $(this).data('button');
$(this).removeClass( btn+'-activate');
}
How can I reuse the variable 'btn'? When I put it in the parent scope, it doesn't recognize $(this) anymore

The other answers have a bit of redundancy in them. Here is how I usually handle events that are related and have common variables:
$('.button').on('click mouseup mouseleave', function(event) {
var btn = $(this).data('button');
switch(event.type) {
case 'click': {
$(this).addClass(btn+'-activate');
break;
}
case 'mouseup':
case 'mouseout':
case 'mouseleave': {
$(this).removeClass(btn+'-activate');
break;
}
}
});
Listen to multiple events and use a switch statement to determine which event was called.

You can just iterate over the buttons, set the variable for each one and then use the variable inside the event handlers.
$('.button').each(function() {
var btn = $(this).data('button');
$(this).on('click', function() {
$(this).addClass(btn+'-activate');
}).on('mouseup mouseleave', function() {
$(this).removeClass( btn+'-activate');
});
});
But of course this is not exactly the same as your code. Here we are setting the value of btn at the time the handlers are attached while, in the code of the question, btn is set at the time the handlers are called. Therefore this is only a valid alternative if the value of .data('button') is not meant to change.

There's no special advantage to using a variable. You can pass a function to .removeClass() and .addClass() thereby removing the need to use a variable:
$(function() {
$('.button').on('click', function() {
$(this).addClass( function() {
return $(this).data('button') + '-activate';
});
}).on('mouseup mouseleave', function() {
$(this).removeClass( function() {
return $(this).data('button') + '-activate';
});
});
});
$(function() {
$('.button').on('click', function() {
$(this).addClass( function() {
return $(this).data('button') + '-activate';
});
}).on('mouseup mouseleave', function() {
$(this).removeClass( function() {
return $(this).data('button') + '-activate';
});
});
});
.one-activate {
background-color:black;
color:white;
}
.two-activate {
background-color:black;
color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="button" data-button="one">Man</button><br/>
<button class="button" data-button="two">Woman</button><br/>
BONUS:
As you can see the functions passed to .removeClass() and .addClass() are exactly identical. We could write a jQuery custom method and use it in place of the functions as follows:
$(function() {
$('.button').on('click', function() {
$(this).addClass( $(this).btnActivate() );
})
.on('mouseup mouseleave', function() {
$(this).removeClass( $(this).btnActivate() );
});
});
$.fn.btnActivate = function() {
return this.data('button') + '-activate';
};
$(function() {
$('.button').on('click', function() {
$(this).addClass( $(this).btnActivate() );
})
.on('mouseup mouseleave', function() {
$(this).removeClass( $(this).btnActivate() );
});
});
$.fn.btnActivate = function() {
return this.data('button') + '-activate';
};
.one-activate {
background-color:black;
color:white;
}
.two-activate {
background-color:black;
color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="button" data-button="one">Man</button><br/><br/>
<button class="button" data-button="two">Woman</button><br/>

Bind JQuery event to html created after pageload via jquery

I am developing a jquery module for add delete edit view etc.
My problem is when page load complete, a list of items populate. After selecting an item this item's subitems loaded via jquery and html built, appended. But on this table event not fired up. Jquery Live is no longer available. Instead "On" is not working.
I tried :
$(document).on('click', selector , function () { foo(); });
But when a button is clicked it triggers other buttons as well.
My code is below.
I have a working code except links on table which loaded by jquery.
var myModule = {
el: {
listbutton: $('#list-button'),
listcontainer: $('#list'),
detailbutton: $(".item-detail"),
deletebutton: $(".item-delete"),
editbutton: $(".item-edit")
},
init: function() {
...
myModule.el.listbutton.on("click",myModule.getMainData);
},
getMainData: function() {
...
success: function(data) {
myModule.BuildTable(data.Value.DataList);
}
...
},
BuildTable: function (hws) {
var c = "";
c += "<table>";
$.each(hws, function() {
c +=
'<tr>' +
'<td>' + this.Title + '</td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<tr>';
});
c += "</table>";
myModule.el.listcontainer.empty().append(c);
myModule.TableLinks();
},
itemDetails: function () {
alert("Detail clicked");
},
itemDelete: function () {
alert("Delete clicked");
},
itemEdit: function () {
alert("Edit clicked");
},
TableLinks: function () {
$(document).on('click', myModule.el.detailbutton, function () { myModule.itemDetails(); });
$(document).on('click', myModule.el.deletebutton, function () { myModule.itemDelete(); });
$(document).on('click', myModule.el.editbutton, function () { myModule.itemEdit(); });
},
};
myModule.init();

Can you try following:
TableLinks: function () {
$(document).on('click',
".item-detail",
function (ev) {
myModule.itemDetails();
ev.stopPropagation();
}
);
$(document).on('click',
".item-delete",
function (ev) {
myModule.itemDelete();
ev.stopPropagation();
});
$(document).on('click',
".item-edit",
function (ev) {
myModule.itemEdit();
ev.stopPropagation();
});
},

you need the delegation
$("selector on which item is added").on("click", "new item selector", function(){
});
ON and Delegate

You have to do something like this to use the "on" method.
$("table").on("click", myModule.el.detailbutton, myModule.itemDetails());
UPDATE: Just noticed, you have to used a selector not a jQuery object in the second parameter.
So $("table").on("click", ".item-detail", myModule.itemDetails());

your approach using on is exactly what you need, but should have been bit more careful on constructing the element object
el: {
listbutton: '#list-button',
listcontainer: '#list',
detailbutton: ".item-detail",
deletebutton: ".item-delete",
editbutton: ".item-edit"
},
and use it like this
init: function () {
$(myModule.el.listbutton).on("click", myModule.getMainData);
},
what you did is
TableLinks: function () {
$(document).on('click', myModule.el.detailbutton, function () { myModule.itemDetails(); });
...
},
which is similar to and which is wrong
TableLinks: function () {
$(document).on('click', $(".item-detail"), function () { myModule.itemDetails(); });
....
},
working fiddle

Trying to condense javascript into for loop

I've got the following code that I am trying to condense to a for loop but am having no luck:
$("#motion1-sub1-1").hover( function () {
$("#motion1-sub1-1 div").show();
},
function () { $("#motion1-sub1-1 div").hide();
}
);
$("#motion1-sub1-2").hover( function () {
$("#motion1-sub1-2 div").show();
},
function () { $("#motion1-sub1-2 div").hide();
}
);
$("#motion1-sub1-3").hover( function () {
$("#motion1-sub1-3 div").show();
},
function () { $("#motion1-sub1-3 div").hide();
}
);
$("#motion1-sub1-4").hover( function () {
$("#motion1-sub1-4 div").show();
},
function () { $("#motion1-sub1-4 div").hide();
}
);
$("#motion1-sub1-5").hover( function () {
$("#motion1-sub1-5 div").show();
},
function () { $("#motion1-sub1-5 div").hide();
}
);
Here's the for loop code that have to condense the above code:
for (var i = 1; i <= 5; i++) {
$("motion1-sub1-" + i).hover( function () { $("motion1-sub1-" + i + "div").show();
},
function () { $("motion1-sub1-" + i + "div").hide();
}
);
}

No need for a for-loop, just bind to those elements that have a certain id pattern, and use this to reference them from within the hover functions:
$("[id^='motion1-sub1-']").hover(
function(){
$("div", this).show();
},
function(){
$("div", this).hide();
}
);
I don't know what type of element we're binding to, but you should provide that tag as part of the selector. For instance, if this is a div we're hovering, modify the selector to include that:
$("div[id^='motion1-sub1-']")
Or an even shorter, more DRY version:
$("[id^='motion1-sub1-']").on("mouseenter mouseleave", function(e){
$("div", this).toggle( e.type === "mouseenter" );
});

How about giving all your divs a class of motion-sub and then doing
$(".motion-sub").hover(function() {
$(this).show() }, function() { $(this).hide(); }
});

You're missing a space on motion1-sub1-x div selector right before the div
$("motion1-sub1-" + i + " div")

How can I trigger a 'focusout' after I click on an element?

I have the following markup:
<select style="display:none">
<option value='1'>1</option>
<option vlaue='2'>2</option>
</select>
<input type="text" id="comboBox" />
<ul id="comboBoxData" style="display:none">
<li id='1'>1</li>
<li id='2'>2</li>
</ul>
and the following JQuery code:
$(document).ready(function() {
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
});
When I click on one of the LI's the 'comboBoxData' element disappears before the click trigger happens. Is there a way around this or an alternate event that I can use instead to have the same effect as a focusout?

Put mouseenter and mouseleave events and change the value of a global variable say isOver.
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBoxData').mouseover(function(){
isOver = true;
}).mouseleave(function(){
isOver = false;
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
if(!isOver){
$('#comboBoxData').hide();
}
});

You do not require this:
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
instead use this inside $('#comboBoxData').on('click', 'li', function() {
if you are fine with plugin , you could just use this way:
$('#menu').bind('clickoutside', function (event) {
$(this).hide();
});
You can get that plugin here
Also, I have changed the code without using the plugin:
Please check the updated answer:
DEMO

try with blur() function
$('#comboBox').blur(function () {
$('#comboBoxData').hide();
});
The blur event is sent to an element when it loses focus.
from http://api.jquery.com/blur/

Not exactly elegant but it works.
$("body").click(function(event){
if(!$(event.target).is("#comboBoxData") && !$(event.target).is("#comboBox") ){
$("#comboBoxData").hide(); }
});
$(document).ready(function() {
$('select').each(function() {
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
});