How to avoid www and non-www problems? - javascript

<script type="text/javascript">
$(function () {
$("#citynm1").autocomplete("http://www.mywebsite.com/getcity.php", {
width: 160,
autoFill: false,
selectFirst: false
});
});
</script>
This script is working when site URL start with WWW but if WWW is not available this script is not working. So what can I do?

<script type="text/javascript">
$(function () {
var url="http://www.mywebsite.com/getcity.php"
urlExists(url,function(exist){
if(!exist){
url="http://mywebsite.com/getcity.php"
}
urlExists(url,function(exist2){
if(exist2){
$("#citynm1").autocomplete(url,{
width: 160,
autoFill: false,
selectFirst: false
})
}
});
});
});
</script>
Known that :
function urlExists(url, callback){
$.ajax({
type: 'HEAD',
url: url,
success: function(){
callback(true);
},
error: function() {
callback(false);
}
});
}

Related

beautifulsoup - how i remove js code in my crawling data?

i use find_all but there is some problem on my data.
i only need text, but js script was copied too
crawled js data is like this.
how can i remove this?
window.__mugFnList__.push(function() { !function($, window) { if (mug.common.isDev()) { console.log("asyncGet funding"); } function asyncGet() { $.ajax({ url: "getSe3FundingView.nhn", dataType:"html", data: { authorNo: "11166748", seriesNo: "368342" }, success: function(resultHtml){ if (mug.common.isDev()) { console.log("asyncGet funding success!!"); } $.trim(resultHtml); $("#__tmp_fundingView").replaceWith(resultHtml); $(window).trigger("viewerFundingLoad"); }, error: function(resp) { console.log(resp); } }); } $(window).load(function() { setTimeout(asyncGet, 1); }); }(jQuery, window); });
window.__mugFnList__.push(function() {
!function($, window) {
if (mug.common.isDev()) {
console.log("asyncGet event");
}
function asyncGet() {
$.ajax({
url: "getEventView.nhn",
dataType:"html",
data: {
volumeNo: "13440747",
memberNo: "11166748"
},
success: function(resultHtml){
if (mug.common.isDev()) {
console.log("asyncGet event success!!");
}
$.trim(resultHtml);
$("#__tmp_eventView").replaceWith(resultHtml);
"") {
try {window.__viewer._resizePan();}catch(e){};
}
$(window).trigger("viewerEventLoad");
},
error: function(resp) {
console.log(resp);
}
});
}
$(window).load(function() {
setTimeout(asyncGet, 1);
});
}(jQuery, window);
});

JS changes cursor only when js function is completed

I have the following code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body style="background-color:yellow;width:100%;height:100%;">
test
<script>
function test() {
$("body").css("cursor","wait"); //cursor must be changed here
$.ajax(...);
}
</script>
</body>
</html>
The problem with this code is that cursor changes from default to wait in browser only when function test() is completed, but I need it to change in certain point of function. I tried in FF 58 on Ubuntu 14 and in Opera in Windows 7. I've read many posts about it and tried also this solution
$(document).ajaxStart(function() {
$(document.body).css({'cursor' : 'wait'});
}).ajaxStop(function() {
//$(document.body).css({'cursor' : 'default'});
});
but without success. How to fix it? Any ideas?
I found the answer. I had in my ajax async:false -
$.ajax({ ...
async: false,
...
});
When I changed to
$.ajax({ ...
async: true,
...
});
everything started to work as expected.
$(document).ajaxStart(function (event, jqxhr, settings) {
$(document.body).css({ 'cursor': 'wait' });
});
$(document).ajaxComplete(function (event, jqxhr, settings) {
$(document.body).css({ 'cursor': 'normal' });
});
$(document).ajaxError(function (event, request, settings) {
$(document.body).css({ 'cursor': 'normal' });
});
function AjaxCall() {
$.ajax({
type: "POST",
url: '/home/AjaxURL',
contentType: "application/json; charset=utf-8",
global: true,// this makes sure ajax set up ajaxStart/ajaxComplete/ajaxerror will triggered
dataType: "json",
success: function () { },
error: function () { }
});
}
$(document).ready(function () {
AjaxCall();
});
Note- Setting the cursor to document.body as you did means it will only apply in document and did not apply in other dom elements like anchor, textbox etc
You can use before send like this:
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......`enter code here`
});
OR use when and timeout:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function ajaxready() {
setTimeout(function() {
$.ajax({
url: "https://www.w3schools.com/jquery/demo_test.txt",
beforesend: function() {},
success: function(result) {
$("#div1").html(result);
$("body").css("cursor", "");
}
});
}, 500);
}
function loading() {
$("body").css("cursor", "wait"); //cursor must be changed here
}
$(document).ready(function() {
$("button").click(function() {
$.when(loading()).done(function() {
ajaxready();
});
});
});
</script>
<style>
button {
cursor: inherit
}
</style>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2>
</div>
<span></span>
<button>Get External Content</button>
</body>
</html>

croppie plug-in does not work using ajax /innerHtml content

I'm using croppie plug-in but does not work when content is overwritten using ajax/php (result show with innerHtml). What I should doing? Please help me!
read more about croppie: https://foliotek.github.io/Croppie/
Content of data.php : Compilation of php and html code
<?php
if(isset($_POST['id']) && $_POST['id'] == 1){
?>
<div id="upload-demo" style="width:350px"></div>
<strong>Select Image:</strong>
<br/>
<input type="file" id="upload">
<?php
}
?>
My Codes:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css">
</head>
<body>
<div id="div1"></div>
<button>Get External Content</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type: 'get',
url: 'php/data.php',
data: {
id: '1'
},
success: function(response) {
document.getElementById("div1").innerHTML = response;
}
});
});
});
$uploadCrop = $('#upload-demo').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
</script>
</body>
</html>
Your problem will be solved with the following code:
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type: 'get',
url: 'php/data.php',
data: {
id: '1'
},
success: function(response) {
document.getElementById("div1").innerHTML = response;
}
});
});
});
var $uploadCrop;
$uploadCrop = $('#upload-demo').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$(document).on('change', '#upload', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
</script>

How can I implement a wait mechanism until receiving confirm dialog response?

Here is my code:
$(function () {
$(document).on('click', '.fa-times', function(e){
e.stopPropagation();
var result = ConfirmDialog('Are you sure?');
if (result) {return false}
var row = $(this).closest('tr');
row.css('opacity','0.3');
var word = $(this).closest('td').siblings('.word').text();
$.ajax({
url : '../../te_addStopWord',
type : 'GET',
data: {word : word},
dataType : 'JSON',
success : function () {
row.remove();
}, // success
error : function ($a,$b,$c) {
alert($b);
row.css('opacity','1');
}
}); // ajax
})
function ConfirmDialog(message) {
$('<div></div>').appendTo('body')
.html('<div><h6>'+message+'?</h6></div>')
.dialog({
modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
$(this).remove();
return true;
},
No: function () {
$(this).remove();
return false;
}
},
close: function (event, ui) {
$(this).remove();
}
});
};
})
But my code run that ajax request without waiting for the response of ConfirmDialog(message) function. How can I force it to wait?
You have 2 functions which get triggered depending on which confirm button is selected. Handle your ajax code from there.
I liked how Abhijit's answer abstracted out the code, but I think he missed something.
$(function() {
$(document).on('click', '.fa-times', function(e) {
e.stopPropagation();
function getConfirmHandler(element){
return function handleConfirm(result) {
if (result) {
return false
}
var row = element.closest('tr');
row.css('opacity', '0.3');
var word = element.closest('td').siblings('.word').text();
$.ajax({
url: '../../te_addStopWord',
type: 'GET',
data: {
word: word
},
dataType: 'JSON',
success: function() {
row.remove();
}, // success
error: function($a, $b, $c) {
alert($b);
row.css('opacity', '1');
}
}); // ajax
}
}
ConfirmDialog('Are you sure?', getConfirmHandler($(this)))
});
function ConfirmDialog(message, callback) {
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function() {
$(this).remove();
callback(true);
},
No: function() {
$(this).remove();
callback(false);
}
},
close: function(event, ui) {
$(this).remove();
}
});
};
})
Try move ajax into your ConfirmDialog:yesfunction. Or Try to use promise.
buttons: {
Yes: function () {
var row = $(this).closest('tr');
row.css('opacity','0.3');
var word = $(this).closest('td').siblings('.word').text();
$.ajax({
url : '../../te_addStopWord',
type : 'GET',
data: {word : word},
dataType : 'JSON',
success : function () {
row.remove();
}, // success
error : function ($a,$b,$c) {
alert($b);
row.css('opacity','1');
}
}); // ajax
$(this).remove();
return true;
},
No: function () {
$(this).remove();
return false;
}
},

open jquery-ui dialog based on ajax response

I'm trying to open a jquery-ui dialog when the response of checklatestnews.php meets the condition rec != "0". I created a test checklatestnews.php file where the response is always "1", yet a jquery-ui dialog will still not open. Any help would be appreciated.
<div id="dialog">
<script type="text/javascript">
$("#dialog").dialog(
{
bgiframe: true,
autoOpen: false,
height: 100,
modal: true
}
);
</script>
<script type="text/javascript">
var check_latestnews;
function CheckForLatestNewsNow() {
var str="chklatestnews=true";
jQuery.ajax({
type: "POST",
url: "checklatestnews.php",
data: str,
cache: false,
success: function(res){
if(res != "0") {
$("#dialog").html(response).dialog("open");
}
}
});
}
check_latestnews = setInterval(CheckForLatestNewsNow, 5000);
</script>
$.post("checklatesnews.php", {action: "check"}, function(response) {
.....
$("#dialog").dialog("open");
});

Categories

Resources