When i press the link the program should go to the ajax function to update the database without reloading the page.
the problem is when the link is pressed doesnt enter in the JS function (doesnt show the alert)
<a href="#" onclick="xpto2()" >Remind later</a>
<script>
function xpto2(){
alert("hello");
$.ajax({
url: 'update-notify-status-noshow',
data: { postdata1: {{ n.id }} },
dataType: 'html',
type: 'get', )
success: function(output) {
alert(output);
}
});
</script>
Fix your xpto2 function. There are syntax errors. This should be something like this.
<script>
function xpto2() {
alert("hello");
$.ajax({
url: 'update-notify-status-noshow',
data: { postdata1: {{ n.id }} },
dataType: 'html',
type: 'get',
success: function(output) {
alert(output);
}
});
}
</script>
Make sure jQuery is present.
Keep browser console opened for better insights.
Here's a full template to try.
updates
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function xpto2() {
alert("hello");
$.ajax({
url: 'update-notify-status-noshow',
data: { postdata1: {{ n.id }} },
dataType: 'html',
type: 'get',
success: function(output) {
alert(output);
}
});
}
</script>
</head>
<body>
<a href="#" onclick="xpto2()" >Remind later</a>
</body>
</html>
Related
I have this html code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="result" style="color:red"></div>
</div>
</body>
<script>
$(document).ready(function(){
$.ajax({
url: "https://api.github.com/users/Microsoft",
type: 'GET',
dataType: 'json',
success: function(res) {
$('#result').html(res)
}
});
})
</script>
Whenever I try to see the result on my browser it just shows an empty blank page.
I just need to return the API result and show it on html.
Any ideas?
The AJAX callback makes res an object. When you using .html() the argument must be a string. If you want to see the object represented on the page, use JSON.stringify():
$.ajax({
url: "https://api.github.com/users/Microsoft",
type: 'GET',
dataType: 'json',
success: function(res) {
$('#result').html(JSON.stringify(res))
}
});
I'm trying to use the random word api from setsetgo.
So I build this html to test it out
<!DOCTYPE html>
<html>
<body>
<script>
function RandomWord() {
var requestStr = "http://randomword.setgetgo.com/get.php";
$.ajax({
type: "GET",
url: requestStr,
dataType: "jsonp",
jsonpCallback: 'RandomWordComplete'
});
}
function RandomWordComplete(data) {
alert(data.Word);
}
RandomWord();
RandomWordComplete(data);
</script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
It seems like the script stop when I do $.ajax() . Though, I don't know what I'm doing wrong.
Try this:
function RandomWord() {
var requestStr = "http://randomword.setgetgo.com/get.php";
$.ajax({
type: "GET",
url: requestStr,
dataType: "jsonp",
}).done(RandomWordComplete);
}
function RandomWordComplete(data) {
alert(data.Word);
}
RandomWord();
I try to populate data in alert box on button click but when I click on button then alert box not populate
I try this
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="submitchart" runat="server">Show Chart</button>
</div>
</form>
</body>
<script type="text/javascript">
$('#submitchart').click(function() {
//alert("i");
$.ajax({
type: 'POST',
//url: 'WebForm1.aspx / Jqufunc',
//data: JSON.stringify({ yearP: $('#yearValue').val() }),
//data:{},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function() {
//alert(JSON.stringify(response.d));
alert("i");
}
});
});
//});
</script>
when I write alert("i") after this line $('#submitchart').click(function () { then alert box populate but when i write alert ("i") after the success: function() { then alert box not populate
any solution?
$(function () {
$("#submitchart").on("click", function () {
debugger;
alert("i");
$.ajax({
type: 'POST',
//url: 'WebForm1.aspx / Jqufunc',
//data: JSON.stringify({ yearP: $('#yearValue').val() }),
//data:{},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function () {
//alert(JSON.stringify(response.d));
debugger;
alert("i");
},
error: function () {
debugger;
alert("i");
}
});
ajax will be run error,don't run success
Give button type as button.
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="submitchart" type="button" runat="server">Show Chart</button>
</div>
</form>
</body>
<script type="text/javascript">
$('#submitchart').click(function() {
//alert("i");
$.ajax({
type: 'POST',
url: 'WebForm1.aspx / Jqufunc',
data: JSON.stringify({ yearP: $('#yearValue').val() }),
//data:{},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function() {
//alert(JSON.stringify(response.d));
alert("i");
}
});
});
//});
</script>
This one worked for me.
This happening because when you write alert("i") after $('#submitchart').click(function () { then its not dependent on success of any ajax call and ot works fine as it should but when you write this after success: function() { then it is dependent on ajax call and if there is some errors in ajax it will not run as you have only defined it for successful ajax.
Write this if ajax contains errors also
$('#submitchart').click(function() {
//alert("i");
$.ajax({
type: 'POST',
//url: 'WebForm1.aspx / Jqufunc',
//data: JSON.stringify({ yearP: $('#yearValue').val() }),
//data:{},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function() {
//alert(JSON.stringify(response.d));
alert("i");
},
error: function() {
//alert(JSON.stringify(response.d));
alert("i");
}
});
});
I tested with some code here, basically the purpose of the html file code is to echo the value from the php file, depending which h3 title the user clicked.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h3 id="random1" name="random_request1">Click here to get number from php</h3>
<p id="randomnumber">Number here</p>
<h3 id="random2" name="random_request2">Click here to get string from php</h3>
<p id="randomtext">Text here</p>
<script>
$('#random1').click(function()
{
//On click: ask php to get me a random text file
$.ajax({
type: 'POST',
url: "action.php",
success: function(newrandom)
{
$('#randomnumber').replaceWith(newrandom);
}
});
});
$('#random2').click(function()
{
$.ajax({
type: 'POST',
url: "action.php",
success: function(newrandom)
{
$('#randomtext').replaceWith(newrandom);
}
});
});
</script>
</body>
</html>
This is the action.php code:
<?php
if ($_POST['random_request1']) {
$random = rand();
echo $random;
}
else if ($_POST['random_request2']){
echo 'abcd';
}
?>
Unsurprisingly, php doesn't recognize the random_request1 and 2 name in $_POST[]. I think I still hasn't grasped the POST function quite well to answer this problem by myself in this case.
use just one click event
$('h3[id^="random"]').on('click',function()
{
//On click: ask php to get me a random text file
$.ajax({
type: 'POST',
url: "action.php",
data: {id : $(this).attr('id')},
success: function(newrandom)
{
$('#randomnumber').replaceWith(newrandom);
}
});
});
and in your action.php
<?php
$id = $_POST['id'];
?>
You will want to have a way to differentiate between the senders. Maybe pass a parameter:
$('#random2').click(function()
{
$.ajax({
type: 'POST',
url: "action.php?action=random2",
success: function(newrandom)
{
$('#randomtext').replaceWith(newrandom);
}
});
});
Or have them go to different endpoints:
$('#random1').click(function()
{
//On click: ask php to get me a random text file
$.ajax({
type: 'POST',
url: "action.php",
success: function(newrandom)
{
$('#randomnumber').replaceWith(newrandom);
}
});
});
$('#random2').click(function()
{
$.ajax({
type: 'POST',
url: "action2.php",
success: function(newrandom)
{
$('#randomtext').replaceWith(newrandom);
}
});
});
There are of course more methods. This might not fit what you're eventually trying to do, but it's a simple way to get started.
Following is the code iam working
$.ajax({
type: 'GET',
url: '<?php echo site_url(); ?>register',
data: "",
success: function (data) {
$("#ldcontent").html(data);
}
});
I want to call a layer in the above code as following in #ldfgp
$('#ldcontent').load('<?php echo site_url(); ?>register #ldfgp');
My Question is It is possible to call a layer (#ldfgp) from a loading page to my master page through $.ajax().
I cannot use load function in jquery because it excludes the JavaScript embedded in the loading page.
Your suggestions and helps are highly appreciated.
You may load the whole document to some HTML fragment and then fetch relevant content from it
$.ajax({
type: 'GET',
url: '<?php echo site_url(); ?>register',
data: "",
success: function (data) {
var $fragment = $('<div/>').html(data);
$("#ldcontent").html( $fragment.find('#ldfgp').html() );
}
});
due to $.ajax load entire html document include html>body,$(data) is creating a little odd Jquery object.
so you can use $(data).find or $(data).filter to find your element. you can try some like:
$.ajax({
type: 'GET',
url: '<?php echo site_url(); ?>register',
data: "",
success: function (data) {
var $data=$(data);
var $layer=$()
.add($data.find('#ldfgp'))
.add($data.filter('#ldfgp'));
$('#ldcontent').html($layer);
}
});
You can try this -
$.ajax({
type: 'GET',
url: '<?php echo site_url(); ?>register',
data: "",
success: function (data) {
$("#ldcontent").html(data);
$("#ldcontent *").css('display','none');
$("#ldcontent #ldfgp").css('display','block');
$("#ldcontent #ldfgp *").css('display','block');
}
});
So, let's assume we have the register.html document like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ldfgp">
<h1>Hello</h1>
</div>
<div>
<h1>Hello 2</h1>
</div>
<div>
<h1>Hello 3</h1>
</div>
</body>
</html>
Using $.ajax() you could grab the element with id #ldfgp this way:
$(document).ready(function() {
$.ajax({
type: 'GET',
url: './register.html',
data: "",
success: function (data) {
var external = $.parseHTML(data);
$.each(external, function(i, e) {
if ($(e).attr("id") == "ldfgp") {
$("#ldcontent").html(e);
return false;
}
});
}
});
});
But personally I'd prefer Vadim's solution, as it is cleaner and doesn't involve explicit .each() iteration.