I have the following code in Javascript and jquery
function abc() {
alert("called 1");
$.ajax({
url: "abc.htm",
context: document.body
}).done(function () {
alert("done");
});
}
and my html button code is as follow
<input type="button" value="click" onclick="return abc();" />
for some reason the ajax call is not successful. I have added the required jquery files to the page.
Please help thanks.
Modify it like this...
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("called 1");
$.ajax({url:"abc.htm",success:function(result){
$("#div1").html(result);
}}).done(function(){alert("d")});
});
});
</script>
</head>
<body>
<div id="div1"></div>
<button>Get External Content</button>
You don't need to return anything to your html markup's onclick handler. Simply call abc() as in
<input type="button" value="click" onclick="abc();" />
Also, if you want more precise error handling then you can use the error and success ajax functions.
function abc() {alert("called 1");
$.ajax({
url: "abc.htm",
context: document.body,
success: function (data, status, xhr ) {
console.log(data.SomeValue);
},
error: function (xhr, status, error) {
console.log(error);
}
}).done(function () {
alert("done");
});
}
Related
I want to enable and disable the buttons using jquery or javascript.
The real scenario is
If i click the start button it goes to the php table coloumn if the status is in running state the start button get's disabled same if the status is in stopped state the start button need to enable.
jQuery('#button-id').attr('disabled', true);
jQuery('#button-id').attr('disabled', false);
You just needs to change the disabled attribute value
Please use Ajax by JQuery.
$('#btn').click(function (e) {
e.preventDefault()
let btn = $(this)
btn_disable(btn)
$.ajax({
url: 'your_url',
method: 'your_method',
data: {your_data}, //if you haven't data please type {}
success: function (response) {
btn_enable(btn)
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
btn_enable(btn)
},
complete: function (response) {
btn_enable(btn)
}
})
})
function btn_disable(btn) {
btn.attr('disabled', 'disabled')
btn.addClass('disabled')
}
function btn_enable(btn) {
btn.removeAttr('disabled')
btn.removeClass('disabled')
}
Here you can read more about Ajax :
https://api.jquery.com/jquery.ajax/
Please check the below sample. If the API response is true then the button gets disabled and if it's false then it gets enabled
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "ur_Api, success: function(result){
if(result === true){
$("#btn_status").attr('disabled', true);
}
else {
$("#btn_status").attr('disabled', false);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button id="btn_status">Status</button>
</body>
</html>
I have an ajax call which grabs data from a php file that connects to an api. I have a success handler that receives the data from the ajax call and then loads a function from the API library. The issue is, I want the user to click a button and then run the function inside of the success call (using the same data from the ajax call earlier).
I believe my ajax call needs to stay inside the window.onload = function(), it doesn't work if I try to run the ajax call when the user clicks the button.
<html>
<head>
<title>hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.screenleap.com/js/screenleap.js"></script>
<script>
function hello(){
alert("hi");
}
function successHandler(data){
screenleap.startSharing('DEFAULT', data, {
nativeDownloadStarting: hello
});
}
window.onload = function() {
$.ajax({
type: "POST",
url: "key.php",
data: '',
success: successHandler,
dataType: "json"
});
};
</script>
</head>
<body>
<input type="submit" value="submit" id="submit">
</body>
</html>
Please let me know how I can do this, any help would be greatly appreciated.
Update:
so I have tried adjusting my code, but for some reason nothing happens anymore when I click the button. It doesn't even shoot out my console.log confirming I had even clicked the button.
<html>
<head>
<title>hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.screenleap.com/js/screenleap.js"></script>
<script>
var dataFromServer;
function hello(){
alert("hi");
}
function successHandler(data){
dataFromServer = data;
console.log("data from server: ")
console.log(dataFromServer);
}
window.onload = function() {
$.ajax({
type: "POST",
url: "key.php",
data: '',
success: successHandler,
dataType: "json"
});
};
$("#submit").click(function(){
console.log('clicked submit');
if(dataFromServer)
{
console.log(datafromserver);
screenleap.startSharing('DEFAULT', dataFromServer, {
nativeDownloadStarting: hello
});
}
});
</script>
</head>
<body>
<input type="submit" value="submit" id="submit">
</body>
</html>
all the best,
-- 24x7
You can store data to some global variable and on button click use same variable.
var dataFromServer;
function successHandler(data){
dataFromServer = data;
}
jQuery("#submit").click(function(){
if(dataFromServer)
{
screenleap.startSharing('DEFAULT', dataFromServer, {
nativeDownloadStarting: hello
});
}
});
Update:
Instead of window.onload use jquery onload function to populate data.
http://jsfiddle.net/ZGggK/
$(function() {
$.ajax({
type: "GET",
url: "https://api.github.com/users/mralexgray",
data: '',
success: successHandler,
dataType: "json"
});
});
Trying to send a simple Jquery GET request, which doesn't work.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#clk").click(function() {
$.get('http://www.abelski.com/courses/ajax/emailajaxservice.php', { email: 'mymail#example.com'}, function() {
alert("Sent");
});
});
});
</script>
</head>
<body>
<input type="text" id="email" />
<input type="button" id="clk" />
<span id="res"></span>
</body>
</html>
http://www.abelski.com/courses/ajax/emailajaxservice.php is on.
I don't get any alert. what is the problem in my code?
Why don't you try this one:
$.ajax({
type: "GET",
url: RequestURL,
dataType: "html",
success: function(htm) {
alert(htm);
}
}
});
In your code snippet, the function
function() { alert("Sent"); }
will be called when the request succeeds. If it fails for any reason (cross-domain requests are forbidden, answer returns with a non OK code, ...) nothing will be executed.
You can add a .fail() listener to see if an error was triggered :
$.get( ... ).fail(function(){ alert("Error"); });
Check your web console to have more detail on the failure.
I am using JavaScript with ZK framework. In some scenario, I want to post URL from JavaScript in ZK. How to call ZUL file from JavaScript?
Is there any way to post URL using JavaScript in ZK?
Assume you have a content.zul and you want to get it via ajax in javascript, this can be done by using zk built in jquery in zul page or using jquery in pure html.
zul sample:
<zk>
<script><![CDATA[
function loadContent () {
jq.ajax({
url: "content.zul",
type: "post",
// callback handler that will be called on success
success: function(response, textStatus, jqXHR){
jq('$content').html(response);
}
});
}
]]></script>
<div id="content"
onCreate='Clients.evalJavaScript("loadContent();");' />
</zk>
html sample:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
$.ajax({
url: "content.zul",
type: "post",
// callback handler that will be called on success
success: function(response, textStatus, jqXHR){
$('#content').html(response);
}
});
}
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
I have some HTML that Django is rendering well. I'd like to click a button on the HTML and have that cause an event to fire in the view.
It doesn't look like the button is causing the post to fire. I'm not sure what I'm doing wrong.
This is my views.py code:
def log(request):
if not request.POST:
template = loader.get_template('log.html')
html = template.render(Context())
return HttpResponse(html)
print "Post"
This is my log.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
$("#update_log_button").bind("button", function(){
$.post("hello");
return false;
});
</script>
</head>
<body>
<p>
<span>SPHIINX Log</span>
</p>
<p>
<textarea cols="2" name="log" rows="25"></textarea>
<input id="update_log_button" name="update_log" type="button" value="Update Log"/>
</p>
</body>
</html>
Is there a reason Why you are not using the click event directly?
Try this:
<script type="text/javascript">
$(function(){
$("#update_log_button").click(function(){
$.post(
url : "/hello/",
dataType:"html",
success: function(data, status, xhr){
//do something with your data
}
);
return false;
});
});
</script>
If the button is dynamically created then you may want to use the bind function to attach click event handler to the element:
<script type="text/javascript">
$(function(){
$("#update_log_button").bind('click', function(){
$.post(
url : "/hello/",
dataType:"html",
success: function(data, status, xhr){
//do something with your data
}
);
return false;
});
});
</script>
Try this URL to include the JQuery library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>