We Keep Coding

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 :-)

JavaScript event handling and Firefox

I have a form on my site that allows visitors to upload media using the Filestack/filepicker.io API (filestack.com). After the upload is successful, Filestack returns a JSON object that provides details on the upload.
It works in Chrome, Safari, iOS, however is not working in Firefox. In Firefox it generates this error:
ReferenceError: event is not defined
My understanding is that Firefox handles events differently than browsers using Webkit (see this article: ReferenceError: event is not defined error in Firefox), however my Javascript skills aren't developed enough to help me troubleshoot this without some help.
I'm using an onchange event that triggers the function setVideoUrl(); Can anybody help me understand how to update this code so that it declares event handlers correctly and will work in Firefox?
<input type="filepicker" data-fp-apikey="xxx" data-fp-mimetypes="video/*" data-fp-container="modal" data-fp-services="COMPUTER" data-fp-store-location="azure" data-fp-store-container="app1" data-fp-button-text=" " data-fp-button-class="select-your-video-button" onclick="uploadVideo()" onchange="return setvideourl();">
function setVideoUrl(){
var myvideourl = event.fpfile.url;
var myvideofilename = event.fpfile.filename;
jQuery("#input_1_14").val(myvideourl);
jQuery("#input_1_11").val(myvideofilename);
jQuery("#input_1_11").attr("readonly", true);
jQuery("#input_1_11").show();
jQuery("#videochoice").hide();
jQuery("p.required-field").hide();
jQuery("#choosedifferentvideo").show();
}
Update:
I am now using the code below however when the media is uploaded to Filestack and it returns the JSON the function never triggers in any browser.
<input type="filepicker" data-fp-apikey="xxx" data-fp-mimetypes="video/*" data-fp-container="modal" data-fp-services="COMPUTER" data-fp-store-location="azure" data-fp-store-container="app1" data-fp-button-text=" " data-fp-button-class="select-your-video-button" onclick="uploadVideo()">
jQuery( 'input[type="filepicker"]' ).on( "change", function(event){
alert('function triggered');
var myvideourl = event.fpfile.url;
var myvideofilename = event.fpfile.filename;
jQuery( "#input_1_14" ).val( myvideourl );
jQuery( "#input_1_11" ).val( myvideofilename );
jQuery( "#input_1_11" ).attr("readonly", true);
jQuery( "#input_1_11" ).show();
jQuery( "#videochoice" ).hide();
jQuery( "p.required-field" ).hide();
jQuery( "#choosedifferentvideo" ).show();
});

Use the jQuery on method instead of using in-HTML event attributes:
<input type="filepicker" data-fp-apikey="xxx" data-fp-mimetypes="video/*" data-fp-container="modal" data-fp-services="COMPUTER" data-fp-store-location="azure" data-fp-store-container="app1" data-fp-button-text=" " data-fp-button-class="select-your-video-button" onclick="uploadVideo()" />
jQuery( 'input[type="filepicker"' ).on("change", function(event){
var myvideourl = event.fpfile.url;
var myvideofilename = event.fpfile.filename;
jQuery( "#input_1_14" ).val( myvideourl );
jQuery( "#input_1_11" ).val( myvideofilename );
jQuery( "#input_1_11" ).attr("readonly", true);
jQuery( "#input_1_11" ).show();
jQuery( "#videochoice" ).hide();
jQuery( "p.required-field" ).hide();
jQuery( "#choosedifferentvideo" ).show();
});

jQuery multiple toggle hide all / show only one

Hello Dear Programmers,
I have a header menu, with "Search", "Language", "Time" toggle functions.
Regarding display onClick it works correctly, but I need If I Click on "Search" show only "Search" and hide all "Language", "Time".
My code
.js
$( '.search-toggle' ).on( 'click.twentyfourteen', function( event ) {
var that = $( this ),
wrapper = $( '.search-box-wrapper' );
that.toggleClass( 'active' );
wrapper.toggleClass( 'hide' );
if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
wrapper.find( '.search-field' ).focus();
}
} );
$( '.language-toggle' ).on( 'click.twentyfourteenn', function( event ) {
var that = $( this ),
wrapper = $( '.language-box-wrapper' );
that.toggleClass( 'active' );
wrapper.toggleClass( 'hide' );
} );
$( '.time-toggle' ).on( 'click.twentyfourteennn', function( event ) {
var that = $( this ),
wrapper = $( '.time-box-wrapper' );
that.toggleClass( 'active' );
wrapper.toggleClass( 'hide' );
} );
and html
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
<div class="language-toggle">
<?php _e( 'Search', 'twentyfourteenn' ); ?>
</div>
<div class="time-toggle">
<?php _e( 'Search', 'twentyfourteennn' ); ?>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
<div id="language-container" class="language-box-wrapper hide">
<div class="language-box">
language
</div>
</div>
<div id="time-container" class="time-box-wrapper hide">
<div class="time-box">
time
</div>
</div>

If I understand what you mean you want to hide two different elements when clicking search you want the others to hide?
By using add you can group elements together then add classes to show or hide:
$('#element1_id').add('#element2_id').removeClass('show');
$('#element1_id').add('#element2_id').addClass('hide');
or just straight up hide them with jQuery.
$('#element1_id').add('#element2_id').hide();
You could also give the element you want to hide together a common class name:
ie: toggle
then you can simply use the class toggle to hide them:
$('.toggle').removeClass('show');
$('.toggle').addClass('hide');
or
$('.toggle').hide();

i think this will hide other parts, i have not tried this but hope will work for u
$( '.search-toggle' ).on( 'click.twentyfourteen', function( event ) {
var that = $( this ),
wrapper = $( '.search-box-wrapper' );
that.toggleClass( 'active' );
$( '.search-box-wrapper' ).hide();
$( '.time-box-wrapper' ).hide();
$( '.language-box-wrapper' ).hide();
if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
wrapper.find( '.search-field' ).focus();
}
} );
$( '.language-toggle' ).on( 'click.twentyfourteenn', function( event ) {
var that = $( this ),
wrapper = $( '.language-box-wrapper' );
$( '.search-box-wrapper' ).hide();
$( '.time-box-wrapper' ).hide();
$( '.language-box-wrapper' ).hide();
that.toggleClass( 'active' );
} );
$( '.time-toggle' ).on( 'click.twentyfourteennn', function( event ) {
var that = $( this ),
wrapper = $( '.time-box-wrapper' );
$( '.search-box-wrapper' ).hide();
$( '.time-box-wrapper' ).hide();
$( '.language-box-wrapper' ).hide();
that.toggleClass( 'active' );
} );

This should solve the problem. You can view working demo with this link Working Demo
Summary of what I did.
I added some text as link in the html (just for testing)
I added .hide() Jquery class to hide the three wrapper classes before the click events
I added a little bit of animation to wrapper.toggle('slow')
I changed wrapper.toggleClass('slow') to wrapper.toggle('slow')
$('.search-box-wrapper').hide();
$('.language-box-wrapper').hide();
$('.time-box-wrapper').hide();
$('.search-toggle').on('click.SearchLink', function (event) {
var that = $(this),
wrapper = $('.search-box-wrapper');
that.toggleClass('active');
wrapper.toggle('slow');
if (that.is('.active') || $('.search-toggle .screen-reader-text')[0] === event.target) {
wrapper.find('.search-field').focus();
}
});
$('.language-toggle').on('click.LangLink', function (event) {
var that = $(this),
wrapper = $('.language-box-wrapper');
that.toggleClass('active');
wrapper.toggle('slow');
});
$('.time-toggle').on('click.TimeLink', function (event) {
var that = $(this),
wrapper = $('.time-box-wrapper');
that.toggleClass('active');
wrapper.toggle('hide');
});

Variable from jquery to PHP wordpress

I'm building in Wordpress, I know I need to use AJAX, but not how to do so.
I have a drop down select box, when the user selects an option a div appears.
The data in that div needs to be pulled from a custom post, so I have a php variable to do this.
What I need to do, is be able to change that php variable based on the selection of the drop down.
I can do this in jQuery, but I don't know how to transfer the jQuery var to php.
Any assistance would be much appreciated.
$(document).ready(function(){
$('select').change(function(){
$( 'select option:selected').each(function(){
if($(this).attr('value')=='choose'){
hide_visible();
}
var val = $('#course_select option:selected').val();
var course_id;
if (val == 'CPR'){
course_id = 106; <!-- I need to send this to php -->
$( '#course_id' ).val(course_id);
};
if($(this).attr('value') == val){
if ($( '.course-info ' ).is(':visible')) {
$( '.course-info' ).slideUp( 'slow' ).delay(700);
$( '.iframe' ).slideUp( 'slow' );
$( '.form' ).slideUp( 'slow' );
$( '.'+ val ).slideDown( 'slow' );
}else{
$('.iframe').slideUp( 'slow' );
$( '.course-info' ).slideUp( 'slow' );
$( '.'+ val ).slideDown( 'slow' );
};
}
});
}).change();
});

From your edited question, you can just do something like the following:
$('.result-element').load('my-page.php?courseid=' + courseId);
Look into api.jquery.com/load for more information is using jQuery.load().
Your my-page.php can get "courseid" from $_GET['courseid'] and you can just echo your raw HTML as a "partial" which jQuery will automatically add to the '.result-element' element.

You won't need your PHP variable.
On the change event of your drop down, fetch the value selected, then build your ajax query and send it to the server.
Checkout the following functions of jQuery: ajax(), change(), val(), html(), show().
You also need to setup an endpoint for jQuery to request the data. Something like http://domain.com/api/get-my-data. That's a wordpress task (ie. PHP). This endpoint / script should return a JSON encoded object that contains the content of your div.

Maybe this helps additional that you're using jquery also. cheers men :)
$(document).ready(function(){
$('select').change(function(){
$( 'select option:selected').each(function()
{
if($(this).attr('value')=='choose')
{
hide_visible();
}
var val = $('#course_select option:selected').val();
var course_id;
if (val == 'CPR')
{
course_id = 106; // Sample code where you can send your jquery variable to php page
$.post("send_variable.php", {id:val}, function(data){
alert(data) //shouts the data from send_variable.php page
$("#hiddenTextbox").val(data); //this passes the value from send_variable.php to a textbox with Id(hiddenTextbox) into the page
});
$( '#course_id' ).val(course_id);
}
if($(this).attr('value') == val)
{
if ($( '.course-info ' ).is(':visible'))
{
$( '.course-info' ).slideUp( 'slow' ).delay(700);
$( '.iframe' ).slideUp( 'slow' );
$( '.form' ).slideUp( 'slow' );
$( '.'+ val ).slideDown( 'slow' );
}
else
{
$('.iframe').slideUp( 'slow' );
$( '.course-info' ).slideUp( 'slow' );
$( '.'+ val ).slideDown( 'slow' );
}
}
}
});
}).change();
Here's the code for send_variable.php
<?php
$val1 = $_POST['id'];
echo $val1; //thus returning the data that depends on your selected from dropdown
?>
Hopes this helps :)

What's wrong with the jQuery in markdown preview gem?

Working on a Rails tutorial as part of an online course. They suggest using this gem for implementing a live markdown editor. I couldn't get the gem to work so I started inspecting it. The repository is two years old, so I'm not surprised the gem isn't working right off. I followed the installation instructions and the appropriate files are loading, I just don't understand why it's not working.
It would be really convenient if it did work because installation is really simple. The way it's set up, all you have to do after installing the gem, running the rake task and adding uses_markdown_preview to the appropriate controller is add a class "markdown_preview" to the textarea you want to preview.
What should happen is, once you've added the "markdown_preview" class to your text area, a jQuery file executes the function markdownPreview on that class, which creates a kind of control bar with three buttons. An editing button, which is on at default so you can edit the textarea. A preview button, which once you click it should take the input text and render a preview of the text, applying the markdown on the text. And a help button, which once you click, will reveal instructions for how to use markdown.
The first thing I noticed was that the jQuery was using out of date selectors, i.e. .live(). When I changed those to .on(), the jQuery file loaded the buttons I described above, but still none of the events work. I'll post the file below:
(function( $ ){
$.fn.markdownPreview = function( type ) {
return this.each(function() {
var $this = $(this);
$this.wrap( '<div class="markdown_wrap editing"></div>' );
$this.before( '<div class="markdown_wrap_menu"><div class="markdown_wrap_menu_help">Help</div><div class="markdown_wrap_menu_edit">Write</div><div class="markdown_wrap_menu_preview">Preview</div></div>' );
var help_text = [
'<div class="content cheatsheet">',
'<h2>Markdown Cheat Sheet</h2>',
'<div class="cheatsheet-content">',
'<div class="mod">',
'<div class="col">',
'<h3>Format Text</h3>',
'<p>Headers</p>',
'<pre># This is an <h1> tag',
'## This is an <h2> tag',
'###### This is an <h6> tag</pre>',
' <p>Text styles</p>',
' <pre>*This text will be italic*',
'_This will also be italic_',
'**This text will be bold**',
'__This will also be bold__',
'',
'*You **can** combine them*',
'</pre>',
'</div>',
'<div class="col">',
'<h3>Lists</h3>',
'<p>Unordered</p>',
'<pre>* Item 1',
'* Item 2',
' * Item 2a',
' * Item 2b</pre>',
' <p>Ordered</p>',
' <pre>1. Item 1',
'2. Item 2',
'3. Item 3',
' * Item 3a',
' * Item 3b</pre>',
'</div>',
'<div class="col">',
'<h3>Miscellaneous</h3>',
'<p>Images</p>',
'<pre>![GitHub Logo](/images/logo.png)',
'Format: ![Alt Text](url)',
'</pre>',
'<p>Links</p>',
'<pre>http://github.com - automatic!',
'[GitHub](http://github.com)</pre>',
'<p>Blockquotes</p>',
'<pre>As Kanye West said:',
'> We\'re living the future so',
'> the present is our past.',
'</pre>',
'</div>',
'</div>',
'<div class="rule"></div>',
'</div>',
'</div>' ].join( "\n" );
$this.before( '<div class="markdown_wrap_help">' + help_text + '</div>' );
$this.wrap( '<div class="markdown_wrap_content"></div>' );
$this.after( '<div class="markdown_wrap_preview"></div>' );
$this.wrap( '<div class="markdown_wrap_editor"></div>' );
/*
if ( !type || type == 'width' ) {
$this.width( $this.width() );
}
if ( !type || type == 'height' ) {
$this.height( $this.height() );
}*/
});
};
$( '.markdown_wrap_menu_help' ).live( 'click', function(){
//console.log( 'Clicked Help' );
$( this ).closest( '.markdown_wrap' ).toggleClass( 'helping' );
$( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_help' ).slideToggle( 'fast' );
});
$( '.markdown_wrap_menu_edit' ).live( 'click', function(){
//console.log( 'Clicked Edit' );
$( this ).closest( '.markdown_wrap' ).removeClass( 'previewing' ).addClass( 'editing' );
$( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_preview' ).hide();
$( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_editor' ).show();
});
$( '.markdown_wrap_menu_preview' ).live( 'click', function(){
//console.log( 'Clicked Preview' );
$( this ).closest( '.markdown_wrap' ).removeClass( 'editing' ).addClass( 'previewing' );
var editor = $( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_editor' );
var preview = $( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_preview' );
preview.html( 'Loading...' );
editor.hide();
preview.show();
var editor_content = editor.find( 'textarea' ).val();
$.ajax({
type: 'POST',
url: '/markdown_preview/convert',
data: { 'format' : 'json', 'markdown_text' : editor_content },
success: function( data, textStatus, jqXHR ){
preview.html( data['html'] );
},
error: function(jqXHR, textStatus, errorThrown){
//console.log( "ERROR" );
//console.log( jqXHR );
//console.log( textStatus );
//console.log( errorThrown );
},
dataType: 'text json'
});
});
})( jQuery );
$( document ).ready( function(){
$( '.markdown_preview' ).markdownPreview();
});
Besides the .live() selectors, what else is wrong with this file? And why does it seem like the code works until it gets to these events, i.e.:
$( '.markdown_wrap_menu_help' ).live( 'click', function(){
//console.log( 'Clicked Help' );
$( this ).closest( '.markdown_wrap' ).toggleClass( 'helping' );
$( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_help' ).slideToggle( 'fast' );
});
I can add code above that first event, like an alert() function, and I've confirmed that will execute, but when I click on any of the buttons, nothing happens.

Figured it out. This:
$( '.markdown_wrap_menu_help' ).live( 'click', function(){
//console.log( 'Clicked Help' );
$( this ).closest( '.markdown_wrap' ).toggleClass( 'helping' );
$( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_help' ).slideToggle( 'fast' );
});
Should be:
$( document ).on('click', '.markdown_wrap_menu_help', function(){
$( this ).closest( '.markdown_wrap' ).toggleClass( 'helping' );
$( this ).closest( '.markdown_wrap' ).find( '.markdown_wrap_help' ).slideToggle( 'fast' );
});
I've been focusing mostly on Rails and my jQuery's lacking. If anyone could actually explain why the old code worked in the previous jQuery library and why this change works for the current version, that'd be helpful.