Develop Reference

Why ajax reloads the page

I have an ajax + jquery script and when I execute it (click the button) it reloads the page.
script
jQuery(document).ready(function($) {
$(document).on('click', '.image-remove-btn', function (e){
var img = $(this).closest('.thumbs');
var id = img.attr('data-id');
$.ajax({
url: admin_url('admin-ajax.php'),
type: 'POST',
data: {deletedId : id},
success: function( data ) {
img.remove();
}
});
});
});
HTML of element that should be removed:
<div class="thumbs ui-droppable">
<div class="inner ui-draggable ui-draggable-handle" data-thumb="0">
<img data-id="32949" src="https://badzingerauto.com/wp-content/uploads/2021/05/NISSAN__QASHQAI__1-5_dCi_106_Acenta__inc-__inc-__2009__BC501CF-e01-350x205.jpg">
<div class="inner-hover">
<button class="image-remove-btn butterbean-remove-image"> <!-- <i class="fa fa-arrows"></i> Font Awesome fontawesome.com -->
</div>
</div>
</div>

I think #Charlieft is correct you can change your code as follows to prevent the reload
jQuery(document).ready(function($) {
$(document).on('click', '.image-remove-btn', function (e){
e.preventDefault();
var img = $(this).closest('.thumbs');
var id = img.attr('data-id');
$.ajax({
url: admin_url('admin-ajax.php'),
type: 'POST',
data: {deletedId : id},
success: function( data ) {
img.remove();
}
});
});
});

Load ajax after page load

This is the first time that I'm using ajax with jquery and I'm new on jquery I have a structure
$(document).ready(function(){
data_url = $('.lazy_content').attr("data-url");
data_id = $('.lazy_content').attr("data-target-id");
$.ajax({
url: data_url,
type: "POST",
beforeSend: function() {
$(".loaderDiv").show();
$("#" + data_id).html("");
},
success: function(data) {
$(data).each(function(index, el) {
$(".loaderDiv").hide();
$("#" + data_id).html(data);
});
}
});
});
<div class="lazy_content" data-url="/ajax/yorumlar/#Model.OtelBilgileri.seflink" data-target-id="ajax-content-1">
<h4 class="tur-main-baslik">COMMENTS</h4>
<div id="ajax-content-1"></div>
</div>
<div class="lazy_content" data-url="/ajax/trustyou/#Model.OtelBilgileri.seflink" data-target-id="ajax-content-2">
<h4 class="tur-main-baslik section-head">POSTS</h4>
<div id="ajax-content-2"></div>
</div>
as you see I have data-url this data url has my ajax-file and I'm getting my ajax file but after page loading nothing work..whats wrong with my code ?

Put your code inside $( document ).ready()
and I think you need to change your code like :
$(document).ready(function() {
data_url = $('.lazy_content').attr("data-url");
data_id = $('.lazy_content').attr("data-target-id");
$.ajax({
url: data_url,
type: "POST",
beforeSend: function() {
$(".loaderDiv").show();
$("#" + data_id).html("");
},
success: function(data) {
$(data).each(function(index, el) {
$(".loaderDiv").hide();
$("#" + data_id).html(data);
});
}
})
})
Or iterate with each class i.e .lazy_content
$( document ).ready(function() {
$('.lazy_content').each(function(){
data_url = $(this).attr("data-url");
data_id = $(this).attr("data-target-id");
$.ajax({
url: data_url,
type: "POST",
beforeSend: function() {
$(".loaderDiv").show();
$("#" + data_id).html("");
},
success: function(data) {
$(data).each(function(index, el) {
$(".loaderDiv").hide();
$("#" + data_id).html(data);
});
}
})
})
})

Depending on where the javascript is in the HTML the DOM may not have loaded at the point you run the script.
encapsulating your javascript within the jquery 'on DOM loaded' function ( $(document).ready( function() { ) will fix that problem, code as follows.
$(document).ready( function() {
$('.lazy_content').on("load", function() {
data_url = $(this).attr("data-url");
data_id = $(this).attr("data-target-id");
$.ajax({
url: data_url,
type: "POST",
beforeSend: function() {
$(".loaderDiv").show();
$("#" + data_id).html("");
},
success: function(data) {
$(data).each(function(index, el) {
$(".loaderDiv").hide();
$("#" + data_id).html(data);
});
}
})
});
});

Load evnet is Only usable in window,img element.
If You use Jquery load function, You can use callback function.
$("#target").load("append.html",function(){
// callback
});
another way, you append scripts below target html.

How to Get content External link to div from Listview Jquery

[question]: I can't get content external link to div=contentlink form listview Jquery. This code is below: ( or check at: http://jsfiddle.net/z36UK/2/ )
<div id="wrap">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search..." id="ds-canho">
</ul>
</div>
<script>
$(document).ready(function() {
$.mobile.loading( "show" );
$.ajax({
type: "GET",
url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%27http://saigonpearl.info/home/notype/-0-trang-chu.html%27%20and%20xpath%3D%22%2F%2Fdiv%5B%40class%3D%27tindang%27%5D%22&diagnostics=true',
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
$(xml).find("div.tindang").each(function() {
var url = $(this).find('a').attr("href"),
urlx= url.replace('#menutop','');
//find each instance of loc in xml file and wrap it in a link
$("ul#ds-canho").append('<li><a href='+ urlx +'>' + $(this).find('h3').text() + '</a></li>');
$('ul#ds-canho').listview('refresh');
console.log( this );
$.mobile.loading( "hide" );
});
}
});
</script></body>

jQuery .hide() and .show() not working

I have this code generate dynamically using php code:-
<div class="mailList" id="M_6">
<div class="mailListHeader" id="H_6">
<img style="float:right; display:none;" class="loaderIMG" id="LOADER_6" src="images/preloader.gif">
Sent by <strong>Admin</strong> on <strong>Oct 03 2013 02:53 PM</strong> to <strong>Received Response</strong> for Quarter <strong>3</strong> Year <strong>2013</strong>.<br>
Subject: <strong>Test Mail</strong><br>
</div>
<div class="mailListContent" id="C_6">
<div class="closeContent" id="CC_6">Close [x]</div>
<span id="SPAN_6"></span>
</div>
<div class="mailListFooter" id="F_6">
<span class="mailContentBtn" id="MCBTN_6" style="font-size:11px; color:#09C; cursor:pointer;">
View Content
</span>
<span class="mailListBtn" id="MLBTN_6" style="float:right; font-size:11px; color:#C06; cursor:pointer;">
Successfull-[0] Failed-[4]
</span>
</div>
</div>
Then, user can click View Content or Successfull-[0] Failed-[4] that will make a ajax request than display result in div mailListContent. Below is code for the jquery ajax request:-
$(".mailContentBtn, .mailListBtn").click(function(){
var currentId = $(this).attr('id');
currentId = currentId.split("_");
var actualId = currentId[1];
if($("#C_"+actualId).is(":visible")) {
$("#C_"+actualId).hide("slow","swing");
}
$("img#LOADER_"+actualId).show();
if(currentId[0]=="MCBTN") {
var dataString ="action=getMailContentByID&mailID="+actualId;
} else {
var dataString ="action=getMailListByID&mailID="+actualId;
}
$.ajax({
type: "POST",
url: "include/getMail.php",
data: dataString,
cache: false,
async: false,
success: function(html) {
$("#SPAN_"+actualId).empty();
$("#SPAN_"+actualId).append(html);
$("#C_"+actualId).show("slow","swing");
$("img#LOADER_"+actualId).hide();
}
});
});
The request and the events works fine, the problem is every time user click at View Content or Successfull-[0] Failed-[4] the loading image is not display. As you can see, I give a unique ID for every loading image than only 1 loading image will display on clik. There is no error in inspect code in Google Chrome. How can I solve this?
Thank you.

In your call to $.ajax, change the "async" option to "true". Because in your case, the $.ajax is blocking the ui thread in displaying the loading image as it is executed synchronously.

You have missed:
$(document).ready(function () {
});
try this:
<script>
$(document).ready(function () {
$(".mailContentBtn, .mailListBtn").click(function () {
var currentId = $(this).attr('id');
currentId = currentId.split("_");
var actualId = currentId[1];
if ($("#C_" + actualId).is(":visible"))
$("#C_" + actualId).hide("slow", "swing");
$("img#LOADER_" + actualId).show();
if (currentId[0] == "MCBTN") {
var dataString = "action=getMailContentByID" +
"&mailID=" + actualId;
}
else {
var dataString = "action=getMailListByID" +
"&mailID=" + actualId;
}
$.ajax({
type: "POST",
url: "include/getMail.php",
data: dataString,
cache: false,
async: false,
success: function (html) {
$("#SPAN_" + actualId).empty();
$("#SPAN_" + actualId).append(html);
$("#C_" + actualId).show("slow", "swing");
$("img#LOADER_" + actualId).hide();
}
});
});
})
</script>

Dynamically get thumbnails and titles of vimeo videos

Picking up from this question: Get img thumbnails from Vimeo?
I'm trying to create a page with several vimeo videos on it.
I want to have the videos in the HTML look like this:
<div id='12345678' class='vimeo'></div>
<div id='23423423' class='vimeo'></div>
And then I want the jQuery to populate the divs with an img where the src is the thumbnail from vimeo, and an a which points to the video, and whose text is the title of the video. That is, it should end up like this:
<div id='12345678' class='vimeo'>
<a href='https://vimeo.com/12345678'>
<img src='url-to-thumbnail.jpg' />
Video Title
</a>
</div>
(Indentation added for clarity)
This is my starting point from that other question:
<script type="text/javascript">
$.ajax({
type:'GET',
url: 'http://vimeo.com/api/v2/video/' + video_id + '.json',
jsonp: 'callback',
dataType: 'jsonp',
success: function(data){
var thumbnail_src = data[0].thumbnail_large;
$('#thumb_wrapper').append('<img src="' + thumbnail_src + '"/>');
}
});
</script>
<div id="thumb_wrapper"></div>

Try this:-
Assuming the div with id already exists.
success: function(data){
$('<a/>',{
href:data[0].url,
text:data[0].title }).append(
$('<img/>' ,{
src:data[0].thumbnail_large
})
)
.appendTo('#'+data[0].id)
}
If the div with id doesnot exist:-
success: function(data){
$('<a/>',{
href:data[0].url,
text:data[0].title })
.append(
$('<img/>' ,{
src:data[0].thumbnail_large
})
).appendTo($('<div/>',{
id:data[0].id,
class:'vimeo'
}))
.appendTo('.someContainer');
}
Fiddle

Append html to the corresponding div
var vimeo_content="<a>\
<img />\
<span></span>\
</a>";
// on success function
function(){
var vdata = data[0];
var thumbnail_src = vdata.thumbnail_large;
var video_title = vdata.title;
var video_url = vdata.url;
$vimeo_content = $(vimeo_content);
$vimeo_content.find('a').attr('href',url);
$vimeo_content.find('img').attr('src',thumbnail_src);
$vimeo_content.find('span').text(title);
//append to corresponding div
$vimeo_content.appendTo($('div#'+video_id));
}