JQuery load only last n lines of a page - javascript

I have a div in a webpage where I need to load only the last n-th lines of a textfile.
For example:
<div id="contentdiv" style="white-space: pre-wrap;">here comes the output of the logfile</div>
<script>
$(function() {
$( "#contentdiv" ).load( "logs/logfile.log" );
});
</script>
But I only need the last 5 lines of the logfile.

Assuming that line separator is \n
Using the load method will limit you to first load everything and then remove
try
$( "#contentdiv" ).load( "logs/logfile.log", function(response){
$( "#contentdiv" ).html(response.split("\n").slice(-5).join("\n"));
} );
But this will show all the lines first and then only last 5.
So, you need to hide this div first
$( "#contentdiv" ).hide();
$( "#contentdiv" ).load( "logs/logfile.log", function(response){
$( "#contentdiv" ).html(response.split("\n").slice(-5).join("\n"));
$( "#contentdiv" ).show();
} );
Another option could be
$.get( "logs/logfile.log", function(data) {
$( "#contentdiv" ).html(data.split("\n").slice(-5).join("\n"));
})
This will load the div only once with last 5 lines.

Related

Passing value to anonymous function in jQuery

I just updated the code and below is the full version of the code
If data returns 0 I want to get the text value of the selected option and append it to a div. Now data returns 0 and the div with class iconSuccess shows up but the value of $a cannot be gotten. I try to alert($a) or even alert(1) in the if condition statement but nothing happens. I need to get the value of $a in the if condition statement. How can I pass the value to the function that return data?
below is the full version of the code
$('#categoryList').change(function () {
$a = $("#categoryList option:selected").text();
$( ".iconSuccess" ).hide();
$("#categoryList5,#categoryList4,#categoryList3,#categoryList2" ).hide();
$.post( "/trobay/categories/default/lists?parent_id="+$(this).val(), function(data) {
if(data !=='0'){
$( "select#categoryList1" ).show();
$( "select#categoryList1" ).html( data );
}else{
$("#categoryList5,#categoryList4,#categoryList3,#categoryList2,#categoryList1" ).hide();
$( ".iconSuccess" ).show();
$( ".mydiv" ).append($a);
alert(1);
alert($a);
}
//alert($a);
});
});
The below image is a screenshot of the message i got back from the server and the green icon only shows up when data return "0"
I hope this put more light on the question and any help will be apppreciated

Customize redundant Checkbox input Jquery Code

i have this working code bellow and i think he is a little bit too long and redundant can i customize it ?
$( "#unique" ).click(function() {
if ( $( this ).is(':checked') ) {
$( ".lotud" ).show();
$( "#add_lot" ).hide();
$( "#lots_rows_contnr" ).hide();
$(".lotud input").prop({disabled: false})
$("#lots_rows_contnr input").prop({disabled: true})
}
else {
$( ".lotud" ).hide();
$( "#add_lot" ).show();
$( "#lots_rows_contnr" ).show();
$(".lotud input").prop({disabled: true})
$("#lots_rows_contnr input").prop({disabled: false})
}
});
You can shorten it slightly through the use of ternaries, using the checked property on the DOMElement itself, joining selectors and using the checked property as the basis for the disabled property. Try this:
$("#unique").click(function() {
$(".lotud").toggle(this.checked);
$("#add_lot, #lots_rows_contnr").toggle(!this.checked);
$(".lotud input").prop({ disabled: !this.checked });
$("#lots_rows_contnr input").prop({ disabled: this.checked });
});
Which of the two versions, your original or the above, is more readable is a matter of opinion.

By selecting a class, another div display none in jquery

jQuery(document).ready(function() {
jQuery( "li.post_link_history.current" ).click(function() {
jQuery( "div#rating-anchor" ).css( "display", "none !important" );
});
});
//or
jQuery(document).ready(function() {
if(jQuery('li.post_link_history.current').attr('class')=='current')
{
jQuery('div#rating-anchor').not(jQuery(this)).css('display','none !important');
}
});
How can I "By selecting a class, another div display none in jquery"?
Your display style value is not valid for inline styles
jQuery( "div#rating-anchor" ).css( "display", "none" );//or just call the hide() method
jQuery(document).ready(function() {
jQuery( "li.post_link_history" ).click(function() {
jQuery( "div#rating-anchor" ).hide();
});
//or
jQuery( "li.current" ).click(function() {
jQuery( "div#rating-anchor" ).hide();
});
//or use an common class for "li" ex:"commonli"
jQuery( ".commonli" ).click(function() {
if(jQuery(this).hasClass("current")){
jQuery( "div#rating-anchor" ).hide();
}
});
});
.hide() method will hide the division.
edited... current and post_link_history are different classes..so use any one

How to reload script after ajax call?

I'm using infinite scroll and social share buttons after loading more results aren't appearing. I need to reload the script for the buttons to appear? I'm using the add to any plugin and they script is <script type="text/javascript" src="http://static.addtoany.com/menu/page.js"> </script> How do i reload this script so that the buttons appear? I added this code but only the facebook and twitter buttons appeared after ajax loaded new results not the google plus and pinterest...
jQuery('body').trigger( 'post-load');
How do i solve this?
You can use the .ajaxComplete(function().
$( document ).ajaxComplete(function() {
$( ".log" ).text( "Triggered ajaxComplete handler." );
});
See more here.
Or you can use the jQuery.GetScript()
$.getScript( "ajax/test.js" )
.done(function( script, textStatus ) {
console.log( textStatus );
})
.fail(function( jqxhr, settings, exception ) {
$( "div.log" ).text( "Triggered ajaxError handler." );
});
See more here.
$( document ).ajaxComplete(function() {
a2a.dom.ready(function(){a2a.init_all();a()});
});
or
$( document ).ajaxComplete(function() {
if(document.body){a2a.init();a()} a2a.dom.ready(function(){a2a.init_all();a()});
});

Calling a jQuery function multiple times

So, I have this function in jQuery:
$(function(){
$( ".unfocused" ).click(function ClickHeader () {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
});
It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!
Change it like this:
$( document ).on("click", ".unfocused", function() {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.
Here is a jsfiddle using the delegate operation for handling the event like you need.
http://jsfiddle.net/MN9Zt/2/
$("body").delegate(".unfocused", "click", function() {
$(this).addClass("focused");
$(this).removeClass("unfocused");
$(".header").not(this).addClass("unfocused");
$(".header").not(this).removeClass("focused");
});

Categories

Resources