I did try every single option, and i'm tired of searching. I hope you could help me on this.
The code below:
<?= FORM::button('submit', __('SUBMIT YOUR AD'), array('type'=>'submit','class'=>'btn btn-large btn-primary btn-publish-new','action'=>Route::url('post_new',array('controller'=>'new','action'=>'index'))))?>
</div>
</div>
</fieldset>
<img src="//www.linkinads.com/images/loading-blue.gif" style="display: none;" id="loading">
<script>
$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});
</script>
Please let me know any solution please. I'm out of resources. Thank you
According to all documentations I have seen on jQuery, the ajaxSend and ajaxComplete events are applied directly to the $(document) not to a specific element since these are global events. You can use it like this:
$(document).bind("ajaxSend", function(){
$("#loading").show();
});
Though I dont know the real explanation but removing the
'data-ajax'=>'false'
solve my issue.
I hope you can explain to me guys about this solution.. i hope this is okay.
Thanks
Related
I have this :
window.onload = function() {
$("#show").load("show.php");
}
and my html :
<div id='loader'>Loading Data</div>
<div id='show'></div>
<div id='other'>some text.........</div>
What I want is, on page loaded, html show <div id='loader'> and <div id='other'> when JS/JQuery success loaded the <div id='show'> then hide <div id='loader'>
Can you help me?
.load() provide a callback you can use this. Just updated your js with following
$("#show").load("show.php", function(){
$('#loader, #show').toggle();
});
as #techLove's comment here, I found this working on me. I modified his answer into this:
$( "#show" ).load( "show.php", function() {$("#loader").css("display","none");});
load() has a callback that runs when it is complete. Use this to show and hide the relevant divs. You should also use jQuery ready function instead of window.onload so that the page won't have to wait for all resources (images etc) before it can load in the php:
$(document).ready(function() {
$("#show").load("show.php", function() {
$('#loader').hide();
});
});
EDIT: Super User's answer provides a better solution than using .hide(), wish I'd thought of it!
I have a structure, such as
<div class="entry">
<p class="entry-text"><div class="nonmatched-sentence">some text goes here...</div></p>
</div>
how do I show all the nonmatched-sentence elements if they were made invisible before?
I now use this:
$(this).('entry-text').children('.nonmatched-sentence').show();
But it's not working...
Thanks!
You could go with this approach: http://jsfiddle.net/oejm2wfu/
For example I have created an event on the button click:
$("#btn").click(function(){
$(".nonmatched-sentence").each(function(){
$(this).show();
});
});
but you could do that on any event you want. Hope that helps
I have tried to make working this jQuery script, but maybe there is something wrong. I wanted to make the script working by clicking on the arrow on the right side of the page. As you can see from the JavaScript code and jsfiddle test I have try to make slide down the hidden #top-bg.
The JavaScript code:
$(document).ready(function() {
$(".bottone").click(function() {
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
And this is the jsfiddle test: TEST
Where I'm doing wrong?
You are not using the right type of quotation marks.
There is a big difference between:
$(“.bottone”).click(function(){
And:
$(".bottone").click(function(){
You're using "smart quotes" as opposed to regular quotes. Also, there is no need for the a tag, you can remove it and apply the click function directly to triangolo
$("#triangolo").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
Updated jsFiddle
You use the wrong quotes and also you try to catch a click on an empty tag (so nothing in fact)... ;)
Here is a JsFiddle that works : http://jsfiddle.net/uazw6/11/
<div id="top-bg" class="bg"></div>
<div id="top" class="bg">
<div id="triangolo">test
</div>
</div>
Javascript :
$(document).ready(function(){
$(".bottone").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active");
});
});
I have fixed... I have updated your jsfiddle... test it...
your code is now like below...
$(document).ready(function(){
$("#triangolo").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
You can also fix this issue by changing below code
<div id="triangolo">
</div>
with
<a href="#" class="bottone"><div id="triangolo">
</div></a>
Maybe I'm too tired but I really can't understand why this thing is not working? I have the jsbin here: http://jsbin.com/ariret/19/edit
Thanks for your time!
<section class="">
<p>Hello there, this is your flight info.</p>
<div class="confirmation">
<h3>Hawaiian Vacation</h3>
<button class="btn">Flight details</button>
<div class="ticket">
View Boarding Pass
<img src="http://placekitten.com/g/100/100" alt=""/>
</div>
</div>
</section>
jquery:
$('.confirmation').on('click', 'button', function() {
console.log('works');
$(this).find('.ticket').hide(); //why is this not working?
});
find() is used for looking for child elements. The problem is .ticket is a sibling of button, so you need to use next():
$('.confirmation').on('click', 'button', function() {
$(this).next('.ticket').hide();
});
this inside the handler points to the button and ticket is not a decedent of button but it is the next sibling, so you need to use .next()
it should be
$('.confirmation').on('click', 'button', function(){
console.log('works');
$(this).next('.ticket').hide(); //why is this not working?
});
You can use both of them:
$(this).parent().find('.ticket').hide();
$(this).next('.ticket').hide(); //why is this not working?
You only can find for child of the current node.
Try this. I guess this is what you want
$('.btn').click(function(){
$('.ticket').slideToggle();
});
and the updated jsbin Demo
Hope this helps. Thank you.
I have this code, when user clicks on Show Comments, div with comments appears. Problem is that Show Comments stays diplayed after you click on it.
<html>
..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
<body>
...
<div class='comments-container' style='display: none;'>
comment 1: ...
comment 2: ...
</div>
<a class='show-comments'>Show Comments</a>
...
<script>
$(".show-comments").click(function(){
$(".comments-container").slideDown("slow");
});
</script>
</body>
</html>
How to make in javascript that element disappear after you click on link? Something like this:
<a class='show-comments' style='display: none;'>Show Comments</a>
Or even better, how to make that Show Comments change to Hide Comments and when you click on Hide Comments, comments are hidden (div with comments is set again to dispay: none), and Show Comments appears again.
Maybe that could be created easier with two elements:
<a class='show-comments'>Show Comments</a>
<a class='hide-comments' style='display: none;'>Hide Comments</a>
that changes to
<a class='show-comments' style='display: none;'>Show Comments</a>
<a class='hide-comments'>Hide Comments</a>
If there is a better way to do this with other language than javascript, please feel free to write it.
You should wrap the jQuery in the .ready function like this:
$(document).ready(function() {
$(".show-comments").click(function(){
$(".comments-container").slideDown("slow");
});
});
This should work.
To answer the rest of your question:
You can use the same element as link for both actions.
$(document).ready(function() {
$(".show-comments").on('click', function(){
$(this).removeClass().html('Hide Comments').addClass('hide-comments');
$(".comments-container").slideDown("slow");
});
$(".hide-comments").on('click', function(){
$(this).removeClass().html('Show Comments').addClass('show-comments');
$(".comments-container").slideUp("slow");
});
});
Note: I use the .on() method to attach the event handlers to the elements in the jQuery object.
I know this is a old post but I just found something really simple to do.
<a class='show-comments' onClick="$(this).hide()">Show Comments</a>
Hope it help someone like me who was trying to find about it.
Something like this:
$(document).ready(function() {
$(".show-comments").click(function(){
var oThisLink = jQuery(this);
oThisLink.toggleClass('someclassname');
if( oThisLink.hasClass('someclassname') ) {
oThisLink.text('Hide Comments');
jQuery(".comments-container").slideDown("slow");
}
else {
oThisLink.text('Show Comments');
jQuery(".comments-container").slideUp("slow");
}
});
});