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>',
'Format: ',
'</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.
Related
I'm using jQuery auto-complete, bundled with jquery-ui. Any way, I need to customize this little bit to pop-up links instead of just texts.
I have a multi dimensional PHP array which contains some texts and corresponding id of that text in MYSQL database.
$js_array = json_encode($php_array);
echo "var javascript_array = ". $js_array . ";\n";
So, now I have a multidimensional js array. But I have no idea how to use those values to create links.
The text items in the array should be the text part of the links, and the IDs should be the URL of the links.
This is my existing code. How to customize this to achive my puurpose...
$("#search_query").autocomplete( {
source: javascript_array
});
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
you can use any custom attributes value,labels are must remaining all are as per your requirement(here we are using desc and icon).
Use the _renderItem option:
Method that controls the creation of each option in the widget's menu.
The method must create a new <li> element, append it to the menu, and
return it.
_renderItem: function( ul, item ) {
return $( "<li data-value='"+item.value+"'><a href='#'>"+item.label+"</a></li>" )
.appendTo( ul );
}
1) Remove this:
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
2) Add it up here instead. Make sure you have a href parameter or most browsers won't knowledge it as a link.
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
},
_renderItem: function( ul, item ) {
return $( "<li data-value='"+item.value+"'><a href='#'>"+item.label+"</a></li>" )
.appendTo( ul );
}
});
Applied DataTable (jquery.dataTables.min.js) to the existing table, so having that table paged and sorted:
$( '#news_table' ).DataTable( {
"order": [[ 5, "asc" ]],
"lengthMenu": [5, 10, 20],
} );
Everything works smoothly on first page of the table. Some JQuery scripts stop working correctly when change page. So, there are related chunks of code:
<td>
<a href="#myModal" class="editNews" role="button" data-toggle="modal" data-id="${news.id}">
<img src="resources/img/edit.png"></img>
</a>
</td>
By clicking on image (edit.png) modal window appears. The next part converts the modal to the edit flavour.
$( '.editNews' ).click(function(e) {
e.preventDefault();
$( '#deleteNews' ).removeClass( 'notShow' );
var dataId = $( this ).attr( 'data-id' );
$( '#resetNews' ).addClass( 'notShow' );
$.ajax({
type: "GET",
dataType: "json",
url: "admin/update/" + dataId,
success: function( response ) {
console.log( response );
$( '#myModalLabel' ).html( "Edit post with id:<span style='color: rgb(255, 0, 0);'>" + response.id + "</span>" );
$( '#newsId' ).text( response.id );
$( '#incomingDate' ).text( response.incomingDate );
$( '#changeDate' ).text( response.changeDate );
$( '#messageTitle' ).val( response.title );
$( 'div#messageStatus button' ).each(function( index ) {
if ( response.messageStatus == index + 1) {
$( this ).addClass( 'active' );
}
});
$( '.note-editable' ).html( response.message );
$( '#messageOrder' ).text( response.messageOrder );
$( '#myModal' ).modal( 'show' );
},
complete:function() {
}
});
return false;
});
I mean, that clicking, say on the link (edit.png) on any page excepting first one modal window will still appear, but will be empty, so looks like scripts just missed. I tried to figure it out, but stuck.
There are also some other scripts which also stopped acting properly.
Thanks for the any advice.
Images below illustrate the situation:
Hi this is quite common problem, you use your jQuery code once (on DOM ready I suppose).
When you click pagination table is generated again and that new elements are not bind to your jQuery code.
You have to 1) run jQuery code after each ajax request maybe using ajax complete:function() {//put me here...
or 2)
use jQuery "on"
$( "body" ).on( "click", ".editNews", function() {
//put your code here
});
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');
});
I have folders with tooltips such as '0 entries' or '5 entries' and so on. I need this tooltip number to update by 1 every time something is dropped into the folder. The title doesn't always start at zero, and I need $(this) drop div updated, as I have many. Here is the working fiddle http://jsfiddle.net/4ehSG/3
jQuery
$(document).tooltip();
var dropped =0;
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
dropped++;
$( this )
.attr('title',dropped+' entries')
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$( ".draggable" ).fadeOut();
}
});
HTML
<div class="draggable ui-widget-content">
<p>Drag me to my target</p>
</div>
<div class="droppable ui-widget-header" title='2 entries'>
<p>Drop here</p>
</div>
Here is an example of what you can do: http://jsfiddle.net/4ehSG/9/
drop: function( event, ui ) {
var dropped = parseInt($(this).attr('title')) + 1;
$( this )
.attr('title',dropped+' entries')
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$( ".draggable" ).fadeOut();
}
You could increase a variable every time an element is dropped
try this
$(document).tooltip();
var num = 0;
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
num++;
$( "#draggable" ).fadeOut();
$( "#droppable" ).attr("title", num + " entries");
}
});
your updated example: http://jsfiddle.net/4ehSG/4/
If you have multiple instances of droppable and draggable, you may want to give each droppable an array associated with it. That way you don't need to rely on a count object and you could drop the same draggable on multiple droppable objects.
DEMO
$(document).tooltip();
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
if(!$(this).data('droplist')){ //check for array
$(this).data('droplist', []); //if doesn't exist, create array
}
var droplist = $(this).data('droplist'),
drag = $(ui.draggable)[0];
if(droplist.indexOf(drag) === -1) //check if element exists in array
droplist.push(drag);
$( this )
.addClass( 'ui-state-highlight' )
.find( 'p' )
.html( 'Dropped!' )
.end()
.attr('title', droplist.length + ' entries');
$(this).data('droplist', droplist); //set list
}
});
DEMO
$(document).tooltip();
var count = 0;
$("#draggable").draggable();
$("#droppable").droppable({
drop: function (event, ui) {
count++;
$(this)
.attr('title', count + ' entries')
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
$("#draggable").fadeOut();
}
});
You can use:
document.getElementById('droppable').title = value;
The above line of code is without using jQuery.
If you want to use jQuery, use the following:
$("#droppable").attr( 'title', value );
I have to use two jquery API's, "jquery-1.8.3.js" and "jquery-ui.js" in my code.
But there are already older versions of jquery. And because of this the form is not working properly.
So I search on net for solution and found, we can use
<script>
var jq13 = jQuery.noConflict(true);
</script>
But I have to api's, so I created two variables but still it is not working.
This is my code:-
<script>
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
var input,
that = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "",
wrapper = this.wrapper = $( "<span>" )
.addClass( "ui-combobox" )
.insertAfter( select );
function removeIfInvalid(element) {
var value = $( element ).val(),
matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( element )
.val( "" )
.attr( "title", value + " didn't match any item" )
.tooltip( "open" );
select.val( "" );
setTimeout(function() {
input.tooltip( "close" ).attr( "title", "" );
}, 2500 );
input.data( "autocomplete" ).term = "";
return false;
}
}
input = $( "<input>" )
.appendTo( wrapper )
.val( value )
.attr( "title", "" )
.addClass( "ui-combobox-input" )
.autocomplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
that._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item )
return removeIfInvalid( this );
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
$( "<a>" )
.attr( "tabIndex", -1 )
//.attr( "title", "Show All Items" )
.tooltip()
.appendTo( wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-combobox-toggle" )
.click(function() {
// close if already visible
if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
input.autocomplete( "close" );
removeIfInvalid( input );
return;
}
// work around a bug (likely same cause as #5265)
$( this ).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
input.focus();
});
},
destroy: function() {
this.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );
$(function() {
$( "#driver_uuidHOS" ).combobox();
});
</script>
And I have declared two variables:-
<script src="js/new/jquery-1.8.3.js"></script>
<script>
var jq13 = jQuery.noConflict(true);
</script>
<script src="js/new/jquery-ui.js"></script>
<script>
var jq131 = jQuery.noConflict(true);
</script>
So please tell me where I have to use jq13 and where jq131 in my code. This code is for searchable autosuggest.
Thanks in advance.
After you load the first version, you can assign it to a variable.
var jq13 = jQuery.noConflict(true); // as you did
And then load your second jQuery version. The first one you load can be accessed with jq13(...) while the second one can be accessed with $(...).
No need for assgning variable to second script...
You want to load one version of jQuery, then all the plugins for that version, then turn on no conflict mode. You can repeat this process as many times as you'd like (once for each version of jQuery core that you need to load).
So, for your specific case what you want to do is:
<script src="js/new/jquery-1.8.3.js"></script>
<script src="js/new/jquery-ui.js"></script>
<script src="path/to/your/code.js"></script>
<script>jQuery.noConflict(true);</script>
The path/to/your/code.js refers to the block of code you have above which defines the combobox widget. In terms of supporting multiple jQuery version, it doesn't matter if this is included in-page as your example does, or as an external file as my example does. The anonymous function wrapper that you have (and all plugins should have), which stores the reference to jQuery is what makes this work. At the time those files are executed, jQuery points to the correct version, and the files stores a local reference to it as $. Later, when you can jQuery.noConflict(true), those files continue to hold their references, even though the global jQuery variable has changed. If you follow this pattern of invoking no conflict mode after loading all other files, you don't need to assign jQuery to a new variable, since all of your code will already have the necessary references. The benefit to this approach, is that you never end up with variable-specific names in your wrapper functions, and it's guaranteed to work with all existing plugins that were developed with this model, which is all official jQuery projects and likely any plugin that has thought about no conflict support.
One last thing: At the bottom of your script, you're referring to jQuery as $, but you're outside of the function wrapper that is storing the $ reference. If this is really two separate files in your app, make sure to include the wrapper in each file. If this is actually a single script as shown above, make sure to move the document ready block inside the wrapper.