How to use SpyOnEvent to spy on events with jquery-jasmine - javascript

I'm using the jQuery-Jasmine extension to spy on events but i can't get the correct syntax.
// Get a button
var $button = $( '#ai1ec_subscribe_users' );
// Call the function
utility_functions.block_all_submit_and_ajax( $button.get(0) );
// check that all submit are disabled
var first_multi = $( '.ai1ec-facebook-refresh-multiselect:first' );
spyOnEvent( '.ai1ec-facebook-refresh-multiselect:first', 'click' );
first_multi.click();
expect( 'click' ).toHaveBeenTriggeredOn( '.ai1ec-facebook-refresh-multiselect:first' );
This gives me back
Expected event click to have been triggered on
.ai1ec-facebook-refresh-multiselect:first
but i clicked it on the row before the check so i must be doing something wrong.

The problem was that I wasn't triggering the event in the right way.
This worked:
it( "Prevent all ajax functionality", function() {
// Get a button
var $button = $( '#ai1ec_subscribe_users' );
// Call the function
utility_functions.block_all_submit_and_ajax( $button.get(0) );
// check that all submit are disabled
spyOnEvent( $( '.ai1ec-facebook-refresh-multiselect:first' ), 'click' );
$( '.ai1ec-facebook-refresh-multiselect:first' )[0].click();
expect( 'click' ).toHaveBeenTriggeredOn( $( '.ai1ec-facebook-refresh-multiselect:first' ) );
} );

Related

jQuery Ajaxstop inside of click event fired multiple times

On the woocommerce cart page I would like to add a notice if you use the quantity plus button and it is reaching the max stock. But I have an auto update on the cart, so I have to wait until the ajax load finishes to show the notice. What I realised using my script that the more you press the button after each ajax call the more times it is fired and the notice will be displayed more and more times. How to handle this? Thank you.
jQuery( document ).on( 'click', '.plus.button.is-form', function(e) {
var inputval = jQuery(this).closest('div.quantity.buttons_added').find('input[name^="cart"]').val();
var inputmax = jQuery(this).closest('div.quantity.buttons_added').find('input[name^="cart"]').attr('max');
if(inputval==inputmax){
jQuery( document ).ajaxStop( function($) {
alert("TeSZT");
jQuery('.woocommerce-notices-wrapper').html('<div class="woocommerce-info"><div class="woocommerce-info-text">Sajnos ebből a termékből jelenleg nincs több raktáron</div><span class="close-message"></span></div>');
});
}
});
You can try to disable to element to prevent multiple clicks. Enable this once ajaxStop is triggered for future use.
jQuery( document ).on( 'click', '.plus.button.is-form', function(e) {
var $this = $(this);
$this.prop( "disabled", true );
...
jQuery( document ).ajaxStop( function() {
$this.prop( "disabled", false );
});
...
})

Is it possible to create real dropdown fire handler with jquery?

With the following example, I want to change the dropdown val, like the way, if I click at it - but the script seemes not to fire like a mouseclick at the dropdown, because the alert message doesn´t appear.
$("#Filters").change(function() {
alert( "Handler for .change() called." );
});
$(".button.two").click(function () {
$("#provider").val(".option_two");
});
$(".button.three").click(function () {
$("#provider").val(".option_three");
});
My fiddle
I also try:
$(document).on('change', '#Filters', function(){
alert( "Handler for .change() called." );
});
After changing the value trigger change event manually.
$("#Filters").change(function() {
alert( "Handler for .change() called." );
});
$(".button.two").click(function () {
$("#provider").val(".option_two").change();
});
$(".button.three").click(function () {
$("#provider").val(".option_three").change();
});

Javascript - Hide a div with a reset button

I need a UL, containing the search results (ul.job_listings) to hide after a reset button is pressed.
So far a reset has been set up to reset the search form:
$( '.job_filters' ).on( 'click', '.reset', function () {
var target = $( this ).closest( 'div.job_listings' );
var form = $( this ).closest( 'form' );
form.find( ':input[name="search_keywords"], :input[name="search_location"], .job-manager-filter' ).not(':input[type="hidden"]').val( '' ).trigger( 'chosen:updated' );
form.find( ':input[name^="search_categories"]' ).not(':input[type="hidden"]').val( 0 ).trigger( 'chosen:updated' );
$( ':input[name="filter_job_type[]"]', form ).not(':input[type="hidden"]').attr( 'checked', 'checked' );
target.triggerHandler( 'reset' );
target.triggerHandler( 'update_results', [ 1, false ] );
job_manager_store_state( target, 1 );
return false;
} );
How would I add to it to also hide the results div?
Thanks for any help,
Liz.
Since you seem to be using jQuery, it you could just add
target.hide();
before the return statement.
edit - see comments above :-)

Input (button) check and uncheck event (JQuery)

I need to do different things depending on whether a checkbox with an ID attribute is checked or unchecked by a mouse. An event needs to be fired when either a check or an uncheck is performed. I suppose one could use a single check event handler and just see what the check state is but I don't know how.
You can use the change event which will be fired when the checkbox state is changed, so register a change event handler using the id of the checkbox
//dom ready handler
jQuery(function ($) {
//change event handler
$('#myid').change(function () {
if (this.checked) {
//checked do something
$('span').text('checked');
} else {
//unchecked do something else
$('span').text('unchecked');
}
})
})
Demo: Fiddle
Document Ready
change event
change event handler
id selector
Probably you should start with
jQuery API
Learn jQuery
function check_preconf() {
if(document.getElementById("step1_full").checked) {
$( "#step2_half" ).prop( "disabled", true );
$( "#step3_half" ).prop( "disabled", true );
$( "#step4_half" ).prop( "disabled", true );
$( "#step5_half" ).prop( "disabled", true );
}
}

How to add a toggle button with jQuery

I have a button in Google Map which is suppose to set the Drawing Manager to NULL when clicked
$("#pauseedit").on("click",function(){
drawingManager.setDrawingMode(null);
});
and it is working fine but I would like to make it toggle like
$("#pauseedit").on("click",toggle(){
drawingManager.setDrawingMode(null); ,
drawingManager.setDrawingMode(Polygon);
});
I don't remember if you can access drawingManager.drawingMode value. If you do, you can by testing it with an if:
$( "#pauseedit" ).on( "click", function () {
if ( drawingManager.drawingMode === null ){
drawingManager.setDrawingMode( Polygon );
}else{
drawingManager.setDrawingMode( null );
}
} );
If you can't, you could use a class on your #pauseedit to control that:
$( "#pauseedit" ).on( "click", function () {
if ( $(this).hasClass('drawingModePolygon') ){
//if has the class, it is on edit mode, turn it off
$(this).addClass('drawingModeNull').removeClass('drawingModePolygon');
drawingManager.setDrawingMode( null );
}else{
//otherwise add the class and change the drawing
$(this).addClass('drawingModePolygon').removeClass('drawingModeNull');
drawingManager.setDrawingMode( Polygon );
}
} );

Categories