logo
down
shadow

Ajax call not executed always when hovering over a link


Ajax call not executed always when hovering over a link

Content Index :

will help you Ok let's try to solve this issue my way .. you can try the next code .. and please try to add //comments to your code
$(function() {
  // href mouse enter event
  $(document).on('mouseenter', 'a', function(){
      // remove all data-value and empty spans
      $('a[data-value=10]').removeAttr('data-value').find('.hov').remove();
      // set the data-value
      $(this).attr('data-value', '10');
      // get a user name .. using var
      var username = $(this).attr('href').trim();

      // post to hovercard page
      $.post("includes/handlers/hovercard.php", {username:username}, function(data){
        var data = data.trim(); // trim data to avoid right/left white spaces
        if(data === "yes"){
        // run the next ajax post to response
          $.post("includes/handlers/hovercard_response.php", {username:username}, function(response){
             // append .hov with span with response
             $('a[data-value=10]').append("<div class='hov' style='display:inline-block;'><span>"+response+"</span></div>");
           });
        }else{
          $('a[data-value=10]').removeAttr('data-value').find('.hov').remove();
        }
      });  

  }).on('mouseleave', 'a', function(){ // mouse leave event
      $('a[data-value=10]').removeAttr('data-value').find('.hov').remove();
  });

  // stop .hov propagation without need to .each
  $(document).on('mouseover', '.hov', function(e){
      e.stopPropagation();
  });
});

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Tag : asp.net-mvc , By : Nougat
Date : March 29 2020, 07:55 AM
wish help you to fix your issue Use jQuery to fire the click event of the link
$(selector).mouseover(function () { 
    $(this).click(); 
});
$(selector).mouseover(function() {
    $.ajax({
        type: "GET",
        url: "/my/path/to/someplace",
        complete: UpdateUI});
}).click(function() {
    alert("tada");   
});

function UpdateUI(XMLHttpRequest, textStatus) {
    //Update Your UI
}

$.ajax Call Error while my Call get successfully executed


Tag : jquery , By : Jarques
Date : March 29 2020, 07:55 AM
it should still fix some issue After looking at the response and code for more time, i got the problem ,my webmethod response in the json format while i am looking data in xml format,as u can see in above code dataType: "xml" which i change to json and now i am getting it correctly. thanks every one

AJAX call not being executed


Tag : javascript , By : Michael
Date : March 29 2020, 07:55 AM
wish help you to fix your issue Your AJAX request is being cancelled because immediately after the AJAX is initiated, your form does its standard form submission, with the browser reloading the page. You need to either return false or prevent default, in the submit event:
$('form').bind('submit',function(){
    ...
    ...
    return false;
});
$('form').bind('submit',function(e){
    e.preventDefault();
    ...
    ...
});

Popover won't hide after ajax call and not hovering action


Tag : jquery , By : Morbo
Date : March 29 2020, 07:55 AM
hop of those help? Instead of using hover event, you can use mouseenter and mouseleave events.
$('[data-toggle="popover"]').on("mouseenter", function() {
    var e=$(this);  
    $.ajax({
        url: '/comentario/1',
        dataType: 'html',
        success: function (data) {
            e.popover({content: data}).popover('show'); 
        }
    });
});

$('[data-toggle="popover"]').on("mouseleave", function() {
    var e=$(this);
    $(this).popover('hide'); 
});

JS not executed after AJAX call


Tag : javascript , By : August
Date : September 12 2020, 01:00 PM
it fixes the issue From what I can see, you are calling addEventListener before .cities-select exists (you load the page -> tries to loop over .cities-select but it doesn't exist). You need to add your event listeners in your $.Ajax#success function, after you have set .innerHTML.
const search = document.querySelector("#city-search");
const results = document.querySelector(".result");

// works
search.addEventListener("keyup", e =>{
    let city = search.value;
    if(city != ""){
        loadCities(city);
    }
});


// works
const loadCities = (city) => {
    $.ajax({
        url: "config/fetch-cities.php",
        method: "GET",
        async: true,
        data: {
            query: city
        },
        success: function(data){
            results.innerHTML = data;
            const cities = document.querySelectorAll(".cities-select");
            cities.forEach(city => {
                city.addEventListener("click", e =>{
                    console.log("hello world");
                })
            })
        }
    });
}

Related Posts Related QUESTIONS :
  • How to write if statement for when a specified option is selected in select tag in JQuery
  • HTML tags remove from textarea using jQuery
  • ShareThis not display properly when initially hidden
  • jquery - Bind datepicker event
  • How can I cause an element to move on mouse scroll using transform matrix?
  • How to add Custom summaries for autogenerated colums?
  • How to update table row with data from an array using jQuery
  • Cannot get the element in jQuery
  • How to search for two values in array at the same time?
  • Creating a floating document property control that is available in all tabs of Spotfire dashboard
  • Add a "wrapper" div tag to wrap other html div tags?
  • Reload form if I get an error when validate email
  • jQuery animate height in percentage scrolls to the top
  • How to add class for per string after comma?
  • ("ID").Value not working in ASP.net user control
  • HTML Color-picker with colors box
  • Initialize Kendo Grid grouped
  • jQuery click event triggers for all picture objects
  • addClass with the full match of id in jquery
  • Function is not called on click
  • jQuery ajax.error() for all errors except 403
  • Disable other option in same div, when first one is selected
  • How to clear input text
  • Rails Nested Forms Attributes not saving if Fields Added with jQuery
  • Jquery FancyBox target specific DIV ID?
  • jQuery table paging
  • Using Jquery UI Tab control in ASP.NET MVC
  • jQuery Datatable dynamic edit button attached to each row
  • JQUERY: Setting Active state on animated menu tabs
  • Filtering data with jquery
  • JQuery punctuation for spanish (ó, í, etc.) not working in IE8
  • Intro Bar like Stack Overflow
  • Jquery .filter() Question
  • ckeditor blur and dialog
  • How do I make a textbox take only numeric characters using jQuery?
  • jquery: how to include other .js-files into .js
  • Strip domain name from url (string)
  • jQuery regex over multiple lines
  • How to use the jquery .load() function to return the innerHTML of an element
  • jQuery: how to get all stylesheet classes+ids into an array
  • Taking a comma separated list and creating a unordered list
  • Why doesn't jQuery work in Chrome user scripts (Greasemonkey)?
  • jquery load event sometimes dont work, why?
  • Rounded corners on Divs. Problem with Internet Explorer only!
  • Insert span next to textbox using jquery
  • Use jQuery to open PDF links with Google Docs
  • jquery performing calculation on dynamically generated elements
  • jqGrid dynamic select option - beforeEditCell not firing
  • getting date from JQueryUI Datepicker
  • jQuery.html() gets inner html. but i need the entire html
  • How to show javascript warning , if user click on link which will open in new window?
  • Unobtrusive horizontal scrolling with CSS and jQuery
  • How do I change an attribute in an HTML table's cell if I know the row and column index of the cell?
  • What is jQuery for Document.createElementNS()?
  • jQuery accordion link issue
  • using JQuery and Prototype in the same page; more explanation needed!
  • CSS / jQuery Vertically and Horizontally Center DIV
  • Height of JQuery UI Tab Content Panel
  • How can I filter using the current value of a text box in a jQuery selector?
  • fullCalendar Font size
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com