How to use Hover and click using Jquery - javascript

Hi all i am using the hover and click function for a tool tip from here
ToolTips
Now as per my requirement i would like to combine both hover and click event in one method. When hover i don't want to show close button but when user click i would like to show close button. How can i do this in one event can any help me or if any examples or samples please share
I tried this for Tooltip on Click
<script type="text/javascript">
$(document).ready(function() {
$('#foobar2').click(function() {
var url = $(this).attr('href');
$(this).formBubble({
url: url,
dataType: 'html',
cache: false
});
return false;
});
});
</script>
I tired this but not working can you edit please
<script type="text/javascript">
$(document).ready(function() {
$('#foobar2').bind('mouseover click',function(e) {
if(e.Type=='click')
{
var url = $(this).attr('href');
$(this).formBubble({
url: url,
dataType: 'html',
cache: false
});
return false;
}
if(e.Type=='mouseover')
{
var url = $(this).attr('href');
$(this).formBubble({
closebutton:false;
url: url,
dataType: 'html',
cache: false
});
$.fn.formBubble.text('hover hover hover hover');
}, function() { //mouse out
var thisBubble = $.fn.formBubble.bubbleObject;
$.fn.formBubble.close(thisBubble);
});
}
});});
</script>
hi i tried this but didn't work
if(e.type=='mouseout')
{
var url = $(this).attr('href');
$(this).formBubble.hide()
}

instead of binding with: .click(function(){ ... })
bind with: .bind('mouseover click',function(e){ ... })
then inside the function use: e.type which will be a string determining what event type was triggered
<script type="text/javascript">
$(document).ready(function() {
$('#foobar2').bind('mouseover click',function(e) {
if(e.type == 'click'){
// do some click event stuff
var close = true
} else {
// do some hover event stuff
var close = false
}
var url = $(this).attr('href');
$(this).formBubble({
url: url,
dataType: 'html',
cache: false,
closeButton: close
});
return false;
});
});
</script>

Related

Button JQuery event only working once, why?

<script>
$("button").on("click", function() {
   $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
$(".author").html(json[0].title);
$(".quote").html('"'+json[0].content+'"');
});
});
</script>
Situation: I click, the data is loaded. I click again, nothing changes.
Codepen: http://codepen.io/anon/pen/vxGgaZ
Reference: https://quotesondesign.com/api-v4-0/
The problem is because the first response is being cached. You can solve that by adding a $.ajaxSetup() call which stops the caching:
$.ajaxSetup({
cache: false
})
Updated Codepen
Alternatively, use $.ajax() and set cache directly in the settings:
$("button").on("click", function() {
$.ajax({
url: 'http://quotesondesign.com/wp-json/posts',
type: 'get',
cache: false,
data: 'filter[orderby]=rand&filter[posts_per_page]=1',
success: function(json) {
$(".author").html(json[0].title);
$(".quote").html('"' + json[0].content + '"');
}
});
});
Try Like This:
Maybe it's help you
<script>
$(document.body).on("click", 'button', function() {
   $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
$(".author").html(json[0].title);
$(".quote").html('"'+json[0].content+'"');
});
});
</script>

jQuery event binding with dynamically loaded elements when scroll down at the end of window

<script type="text/javascript">
$(document).ready(function() {
var page = 0;
$(window).scroll(function () {
if ($(document).height()-$(document).height()*0.2 <= $(window).scrollTop() + $(window).height()) {
$.ajax({
type: "POST",
url: "/",
dataType: "json",
data: { 'page' : page, 'csrfmiddlewaretoken': '{{csrf_token}}'},
success: function(data) {
obj1 = JSON.parse(data.fulldata);
var newHTML = '<a href = "" >somecode</a>';
$(".newdata").append(newHTML);
},
error: function(data) {
// alert("error")
}
});
}
}
});
</script>
i have readed this link for dynamically added elements, that we must bind the function to one of it's parents
...but no success
i am not pasting the entire code here. suppose code is correct and working fine. only when i am clicking the loaded element its not working..
Thanks in advance
full code

why this code is not loading pages ajax jquery

Guys What I am trying to do is load a page on navigation click with ajax and put some delay in it loading
when nothing is clicked I want load home page following loading animation with jquery and a delay with PHP code
and if something on nav is clicked I want to load that particular file
but this code don't seem to be working
var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
});
$('ul#nav_a li a').click(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
var page=$(this).attr('href');
$('.content').load('templates/pages/'+page+'.php');
return false;
});
});
}
});
I will not discuss the code itself, but just improve it.
Try this code and tell me if you get what you want : ( comments inside the js code )
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
// beforeSend and success are keys with functions as values that's why we use ":" and not ","
// the "," comma is used to separate ajax settings
});
$('ul#nav_a li a').click(function(){
var page = $(this).attr('href');
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/'+page+'.php');
// old code
// return false;
// });
// we close our ajax.success function
}
})
// old code
// }
// return false is used to prevent browser to run the a href that's why we use it in the a.click function and not inside the ajax block
return false;
})
})
var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
res.container.append(res.loader);
$('.content').load( "templates/pages/home.php", function() {
res.container.find(res.loader).remove();
});
$('ul#nav_a li a').click(function(){
var page=$(this).attr('href');
$('.content').load( 'templates/pages/'+page+'.php', function() {
res.container.find(res.loader).remove();
});
});
}
});
Just copy and paste it.

Second jQuery function failing to run

I have created two user-defined functions within the "head" section of an HTML page and I am calling them with a script just before the closing "body" tag. The trouble is that the second function is not working, unless I include an "alert" statement in the first function (which halts the execution until I dismiss the alert).
I am guessing it is caused by the first function not actually finishing completely before the second one starts and by having my alert statement it gives the first function time to finish.
Function one is to build a list of images in DIV tags.
Function two implements FlexSlider to initiate a slideshow of the images.
Calling the below as it is will render a page with all images shown. If I uncomment the alert box and run it again, the screen is rendered with my images, I dismiss the alert box, and then FlexSlider kicks in and starts the slideshow.
Here are the two functions defined in the "head" section.
<script type="text/javascript">
var buildslider = function () {
$.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
});
}
});
//alert("buildslider finished");
};
var runslider = function() {
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
};
</script>
And here is the code near the closing "body" tag.
<script>
$(document).ready(function() {
buildslider();
runslider();
});
</script>
What am I doing wrong and how do I correct this so it can be done properly?
Thank you in advance.
David.
Return the ajax() returned object from the first function. This is a jQuery "promise" object which will then expose done and fail methods. These methods take a function, so you can just insert your second function into done. See example below:
<script type="text/javascript">
var buildslider = function () {
return $.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
});
}
});
};
var runslider = function() {
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
};
</script>
Then run with:
<script>
$(document).ready(function() {
buildslider().done(runslider);
});
</script>
It also makes it easier to handle failures in a more general way:
<script>
$(document).ready(function() {
buildslider().done(runslider).fail(function(){
alert("#%&£ happens!");
});
});
</script>
Using promises is far more flexible than using callbacks, and supports multiple done() functions, so is now the preferred way to do this.
Note: A simpler shortcut for DOM ready is $(function(){ your code here }); or if you want it to have a locally scoped $ use jQuery(function($){ your code here }); which acts as both a DOM ready handler and provides a locally scoped $ to avoid clashes (e.g. with other plugins).
<script type="text/javascript">
var buildslider = function () {
$.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
});
}
});
//alert("buildslider finished");
};
var runslider = function() {
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
};
$( document ).ajaxComplete(function( event, xhr, settings ) {
if ( settings.url === "/myImages/homepageslider/PhotoGallery.xml" ) {
runslider();
}
});
</script>
Now Just call the buildslider() only no need to call the runslider() in your document.ready..
try something like this
var buildslider = function () {
$.ajax({
type: "GET",
url: "/myImages/homepageslider/PhotoGallery.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/myImages/homepageslider/';
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides');
$('.flexslider').flexslider({
selector: '.slides > .slide-group',
controlNav: false,
directionNav: false
});
});
}
});
};
final script block
$(document).ready(function() {
buildslider();
});
Note : execute slider code after ajax is successfully completed.

Reset Bootstrap loading state button when AJAX call is completed

I have a simple AJAX request and I'm wondering if it's possible to combine the loading state button with my request. Is it possible to make the button reset to default when the request is completed, instead of choosing for example 5 seconds before reset as per now?
Loading state button
$("button").click(function() {
var $btn = $(this);
$btn.button('loading');
// simulating a timeout
setTimeout(function () {
$btn.button('reset');
}, 1000);
});
AJAX request
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
dataType:'html',
url: '/m/core/_processEditEntry.php',
data: $('form').serialize(),
success: function () {
$(".message").fadeIn(0);
$(".message").delay(5000).fadeOut('slow');
}
});
});
});
It's best to keep your code in the same place. Remove the click handler and add these lines to the ajax call:
$(function () {
$('form').on('submit', function (e) {
//save button so we can use later
var my_button = $(this).find("button");
//give button loading state
my_button.button('loading');
e.preventDefault();
$.ajax({
type: 'POST',
dataType:'html',
url: '/m/core/_processEditEntry.php',
data: $('form').serialize(),
success: function () {
//reset state
my_button.button('reset');
$(".message").fadeIn(0);
$(".message").delay(5000).fadeOut('slow');
}
});
});
});
You can add a span with a class to the button when it was clicked
if ($(this).is(".btn, .page-link, .df-link")) {
// disable button
$(".btn").prop("disabled", true);
// add spinner to button
$(this).html(
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ` + $(this).text()
);
}
and then in Ajax complete remove that element:
complete: function(response) {
$(".btn").prop("disabled", false);
$(".spinner-border").remove();
}

Categories

Resources