Can someone tell me which is the correct/better way to do it?
$(document.body).on("click", "string1", function() {
do function
});
$(document.body).on("click", "string2", function() {
do function
});
OR
$(document.body).on("click", "string1", function() {
do function
}).on("click", "string2", function() {
do function
})
I've been doing the 2nd for a while now and it seems to work fine. But I've also been sceptical about it for some reason. Any advise is appreciated!
In my first opinion,
if you try $(document.body) double time then it will traverse again in DOM which is not good idea. So second example is good to avoid second time traversal in DOM
Related
lately I have been studing nightmare module I think it's very simple and useful but I have question.
how to use callback when I click ajax button
MyCode
var Nightmare = require('nightmare'),
nightmare = Nightmare();
nightmare
.goto('https://motul.lubricantadvisor.com/Default.aspx?data=1&lang=ENG&lang=eng')
.click('input[title="Cars"]')
.wait(1000)
.evaluate(function () {
//return $('#ctl00_ContentPlaceHolder1_lstModel option');
var links = document.querySelectorAll('#ctl00_ContentPlaceHolder1_lstMake option');
return [].map.call(links, function (e) {
return {value: e.value, name: e.text};
});
})
.end()
.then(function (items) {
console.log(items);
});
there is wait method. most people use wait methed I searched googling
.wait(1000)
I don't use wait method. because If it's network disconnect or slow. It's not good code
Could you help me callback method??
Thanks. So I have motify the code but It's doesn't work
var Nightmare = require('nightmare'),
nightmare = Nightmare();
nightmare
.goto('https://motul.lubricantadvisor.com/Default.aspx?data=1&lang=ENG&lang=eng')
.click('input[title="Cars"]')
.wait('#result > #ctl00_ContentPlaceHolder1_lstMake option')
.evaluate(function () {
$(document).ajaxSuccess(function () {
var links = document.querySelectorAll('#ctl00_ContentPlaceHolder1_lstMake option');
return [].map.call(links, function (e) {
return {value: e.value, name: e.text};
});
});
})
.end()
.then(function (items) {
console.log(items);
});
There are many ways to solve this. The easiest would be the following.
Suppose when an Ajax request finishes, it always changes something on the page. Most of these changes can be easily detected when waiting for specific elements to appear which can be matched by CSS selectors.
Let's say you click something and the result is written into the element matched by "#result". If there wasn't such an element before the click then you can wait until the existence of this element:
.click("button")
.wait("#result")
// TODO: do something with the result
You can also use CSS selectors to count things. For example, let's say there are ten elements that can be matched with "#result > a". If a click adds 10 more, then you can wait for the 20th using:
.click("button")
.wait("#result > a:nth-of-type(20)")
// TODO: do something with the result
The world of CSS selectors is pretty big.
Of course, you could use evaluate to add a general Ajax event handler like $(document).ajaxSuccess(fn) to be notified whenever some callback finished, but the source code of a page changes all the time. It would be easier to maintain your code if you would look for the results that can be seen in the DOM.
Use this, ajax callback..
$.ajax(url,{dataType: "json", type: "POST" })
.then(function successCallback( data ) { //successCallback
console.log(data);
}, function errorCallback(err) { //errorCallback
console.log(err);
});
// console.log(2);
});
I'm trying to add a clientEvent filter to an already working AJAX fullCalendar. The idea is to allow the visitor to filter the events already displayed by selecting a choice in a droping list.
The code is currently as follows:
jQuery(document).ready(function($) {
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.post(
MyAjax.ajaxurl,
{
action: 'get_fullcalendar',
data: {
slotbegin: start.unix(), // données à compléter
slotend: end.unix()
}
},
function( events ) {
callback( events );
}
);
},
eventRender: function(event, element) {
element.qtip({
id: 'eventdetails',
content: {
text: event.image + event.description,
title: event.title
},
});
}
});
$("#cible_select").change(function() {
var cible = $(this).val()
var events = $('#calendar').fullCalendar('clientEvents', function(evt) {
return evt.public_cible == cible;
});
});
});
The fullCalendar works OK by itself. But I don't know how to integrate the clientEvents bit so it is used when the user makes change to the #cible_select selector.
I've been trying many things for the past hours, and would appreciate some help to solve this issue.
Thanks a lot for any hint.
This function might help you. call this function where ever you want.
function parseClientEvents(/*pass params here*/){
var clientArr = $('#calendar').fullCalendar('clientEvents');
for(i in clientArr){
console.log(clientArr[i]);
//all your logic goes here.
}
return true;
}
I seem to have misunderstood the way clientEvents works. I thought it would re-display the whole calendar with the selected events only, but that's not the case.
removeEvents works to hide/suppress events one doesn't want any more, but those are not available on the client side any more, so refetchEvents has to be used if the user changes his mind and makes another choice.
removeEventSource works only if you have a limited number of sources, and I want to be able to combine several filters, so there is quite a number of combinations.
So, I'm completely rethinking my filtering strategy: clientEvents is definitely not the way to toggle on/off events on a multicriteria basis.
I am trying to understand how to use a plugin like http://johnpolacek.github.io/superscrollorama/, with Backbone.js by integrating it into my Views. I know that I need to hook into the backbone View-Events, but I want to do a horizontal scroll with the plugin, and I don't know of a horizontal scroll-event. How can I still utilize the plugin? Thanks in advance for any ideas.
Views:
var ArtistsView = Backbone.View.extend({
tagName: 'ul',
initialize: function () {
this.cleanUp();
$("body").attr('id','artists');
this.render();
},
events: {
"click div.open" : "largeArtViewOpen",
"click div.close" : "largeArtViewClose",
},
render: function () {
this.collection.each(function(model) {
var artistView = new ArtistView({ model: model });
this.$el.append(artistView.render().el);
}, this);
console.log('and a new view was rendered!')
return this;
},
cleanUp: function(){
if (this != null) {
this.remove();
this.unbind();
console.log('View was removed!');
}
},
largeArtViewOpen: function(e){
var thisArt = $(e.currentTarget).parent().attr("class");
console.log(thisArt);
$("#open-view, li."+thisArt).show();
},
largeArtViewClose: function(e){
//var thisArt = $(e.currentTarget).parent().attr("class");
console.log('clicked!');
$("#open-view, ul#large li").hide();
},
scrollFx: function(){
var controller = $.superscrollorama({
isVertical:false
});
controller.addTween('h2#fade-it', TweenMax.from( $('h2#fade-it'), .5, {css:{opacity: 0}}), 800);
//$('h2#fade-it').css({'color':'#dbdbdb'});
console.log('scroll message!');
},
});
var ArtistView = Backbone.View.extend({
tagName:'li',
className:'artistLink not-active',
render: function(){
this.id = this.model.get('idWord')+"-menu-item";
this.$el.attr('id', this.id).html(this.template(this.model.toJSON()));
return this;
},
});
So, in the past 3 days since I've asked this question, I've spent some time trying different scrollable 'targets' for Superscrollorama...Document vs. Window vs. Body vs. other DOM elements within the HTML, and the questions that I've had to consider are, should the scroll event be bound to the View's top element? Should it be bound to the body, but initialized in the view? In both cases I tried, I couldn't get the scroll events to continuously fire...this may just be due to bad code, but I couldn't make it happen.
So, what I arrived at, was, avoiding the view entirely: I instantiating and called Superscrollorama in a function called scrollFx() within a separate 'helper.js' document, and then called scrollFx() from my view's router.
I'm thinking I will just empty the target's styles and unbind any existing scroll events in the beginning of scrollFx(), before I call the Superscrollorama function so that the resulting scroll styles/animations are cleaned up, and events aren't exponentially bound.
I'm still very much working through these issues, though now the scroll events are working, so if anyone happens to read through this train of thought, please feel free to add your two sense, especially, if you have better ideas about re-implementing the Superscrollorama function within the View itself.
Thanks.
$('.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){
...
});
I need to have a nice transition where I remove the first row and append to a table new item.
$.getJSON('/Home/GetRecentPosts/', { count:1 }, function(data) {
$('#recentPosts tr:first').fadeOut(2000);
$('#recentPosts').append($('<tr><td>'+data[0].SchoolName+'</td></tr>').hide().fadeIn(2000));
});
this works the first time i execute getJson only. Please help.
thanks
I've tried to separate each item of functionality you want onto a separate line. If this isn't what you are after, then hopefully it shouldn't be to hard to adjust the below code to suit your needs.
$.getJSON(
'/Home/GetRecentPosts/',
{ count:1 },
removeFirstRowAndAppendNewItem(data)
);
function removeFirstRowAndAppendNewItem(data)
{
console.log("in callback"); // to confirm we have reached here
$('#recentPosts tr:first').fadeOut(2000, function() {
$('#recentPosts tr:first').remove();
newRow = $('<tr><td>'+data[0].SchoolName+'</td></tr>').hide();
$('#recentPosts').append(newRow)
newRow.fadeIn(2000));
});
}
Basically:
Fade out the first row
Remove the first row from the DOM
Create a new element, with styling that hides it
Append the new element to the table
Fade in the new element
(Note: it's possible to combine these steps together)
Try this.
$('#recentPosts tr:visible:first').fadeOut(2000);
Because
$('#recentPosts tr:first').fadeOut(2000);
would have hidden the first element at the first JSON call. Now you are trying again to fadeOut the invisible first element. So you could use a :visible filter to achieve the expected result.
Alternatively, if you wanna remove the element from DOM, try this
$('#recentPosts tr:first').fadeOut(2000, function(){
$(this).remove();
});
Try this:
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});