I open an html page using jquery dialog.
var url = "Popup.htm";
$('<div id=DialogDiv>').dialog({
dialogClass: 'DynamicDialogStyle',
modal: true,
open: function () {
$(this).load(url);
},
close: function (e) {
$(this).empty();
$(this).dialog('destroy');
},
height: 350,
width: 540,
title: 'Lookup'
});
The above code opens Popup.htm in a modal dialog.The Popup.htm has got a button but the click event is not firing.Please help.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
<title>PopUpView</title>
<script type="text/javascript">
$(function () {
$("#btnSearch").click(function () {
$.ajax({
type: "POST",
contentType: "application/json",
url: "http://localhost:3340/Service1.svc/FetchAllCompany",
dataType: "json",
success: function (data) {
alert('ok');
var div = $("#test").empty();
$(data.d).each(function (index, item) {
div.append(
$("<tr>").append($("<td>").html(item.COMP_CODE))
.append($("<td>").html(item.COMP_NAME))
.append($("<td>").html(item.COMP_FRZ_FLAG)));
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
});
})
</script>
<body>
<div id="MainContentDiv">
<label>Search</label>
<input />
<button id="btnSearch">...</button>
<div>
<table id="test">
</table>
</div>
</div>
The click event for btnSearch is not firing
Related
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>
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>
I am trying to disable a button to prevent multiple click in a synchronous ajax call. My code is as follows.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> <!-- optional font -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
var test = false;
$(document).on('click', '#test', function(e){
console.log(test);
if (test) {
return;
}
test = true;
ajax_call();
});
function ajax_call() {
$.ajax({
contentType: 'application/json;charset=utf-8',
type: 'POST',
url: 'https://validdomain',
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
data: JSON.stringify({'test' : 'test'}),
success: function(data, textStatus, jqXHR) {
console.log(data);test =false;
copypaste();
test = false;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
test = false;
},
async: false,
});
}
function copypaste() {
var tempInput = document.createElement("textarea");
tempInput.setAttribute('id', 'copyid');
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
tempInput.value = 'Text Copied';
console.log(tempInput);
document.body.appendChild(tempInput);
tempInput.select();
var result = document.execCommand('copy');
document.body.removeChild(tempInput);
if (result) {
alert('copied');
}
else {
alert('not copied');
}
return result;
}
});
</script>
</head>
<body>
<input type="submit" id="test"/>
</body>
</html>
But my button is not disabled on the second click(I am getting alert twice.). If I make the ajax request as an asynchronous call then button is disabled. Is there any way that I can disable my button during a synchronous call?
Thanks in advance!
I added the necessary statement but you could put it to another place for example inside the ajax callback function. Also I changed async: false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> <!-- optional font -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
var test = false;
$(document).on('click', '#test', function(e){
console.log(test);
if (test) {
return;
}
test = true;
ajax_call();
//Try adding this statement you can add wherever you want
$(document).off('click', '#test');
});
function ajax_call() {
$.ajax({
contentType: 'application/json;charset=utf-8',
type: 'POST',
url: 'https://validdomain',
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
data: JSON.stringify({'test' : 'test'}),
success: function(data, textStatus, jqXHR) {
console.log(data);test =false;
copypaste();
test = false;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
test = false;
},
async: true,
});
}
function copypaste() {
var tempInput = document.createElement("textarea");
tempInput.setAttribute('id', 'copyid');
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
tempInput.value = 'Text Copied';
console.log(tempInput);
document.body.appendChild(tempInput);
tempInput.select();
var result = document.execCommand('copy');
document.body.removeChild(tempInput);
if (result) {
alert('copied');
}
else {
alert('not copied');
}
return result;
}
});
</script>
</head>
<body>
<input type="submit" id="test"/>
</body>
</html>
Why not simply disable the button and re-enable it instead of declaring a global variable like $("#test").attr('disabled','disabled') ? Variable scopes can get tricky in javascript.
You happen to be looking for something simple like this?
PS: You have to enter the details for the ajax call yourself.
html
<button id="button">Button</button>
jQuery/js
$("#button").click(function(){
console.log("clicked");
// deactivate button
$("#button").attr("disabled", true);
ajaxCall();
});
function ajaxCall(){
$.ajax({
//...ajax call here,
complete: function(){
// reactivate button after you receive any reply from ajax
$("#button").attr("disabled", false);
}
})
}
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");
});
Okay, what I have here is a Ajax delete record. I've tried to add jquery dialog-confirm instead of using javascript confirm. The delete function works but the problem is the animation of deleting row was not working.
Here's what I have right now. http://jsfiddle.net/altaire/YJC44/
Any help will appreciate. Thanks!
Php
while($row = $result->fetch_assoc()){
echo'<tr class="records">';
echo'<td>'.$i++.'</td>
<td align="center"><img src="images/del.png" border="0" width="10" height="10" title="Delete"></td>
<tr>;
Jquery/Ajax
$(".delbuttons").click(function () {
//e.preventDefault();
var element = $(this);
var del_id = element.attr("name");
var info = 'prdelete=' + del_id;
$("#dialog").dialog({
buttons: {
"Confirm": function () {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".records").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow", function () {
setTimeout(function () {
window.location.reload();
}, 1000);
});
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
You have to add a js as "//code.jquery.com/ui/1.11.0/jquery-ui.js". see below demo.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#effect" ).animate({backgroundColor: "#aa0000",color: "#fff",width: 500},5000);
});
</script>
</head>
<body>
<div id="effect"style="border:1px solid red;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Try this
$('a[name="'+del_id+'"]').parents(".records")...
instead of $(this).parents(".records")...
You are trying to animate the $("#dialog") if you use $(this).
DEMO : http://jsfiddle.net/yeyene/YJC44/1/
$(".delbuttons").click(function () {
//e.preventDefault();
var element = $(this);
var del_id = element.attr("name");
//alert(del_id);
var info = 'prdelete=' + del_id;
$("#dialog").dialog({
buttons: {
"Confirm": function () {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {
// $(this).parents(".records")
$('a[name="'+del_id+'"]').parents(".records")
.css({'background': '#fbc7c7'})
.animate({
opacity: 0
}, 1000, function () {
setTimeout(function () {
window.location.reload();
}, 1000);
});
$(this).dialog("close");
}
});
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});