I want to use bootstrap toggle button in ajax after success. Is there any way. I tried my best to implement it but not able to do it completely.
<script>
$(document).ready(function(){
$(".btn-primary").click(function(){
$(".collapse").collapse('toggle');
});
});
</script>
<script type="text/javascript">
$('.other_chart').live("click",function(){
//e.preventDefault();
var userid2= $(this).attr("id").split('_').pop();
$.ajax({
type: "POST",
async: false,
url: "index.php",
data: "userid="+ userid2,
cache: false,
//beforesend: function(){$(".podar").show();},
success: function(html) {
//$("#loader_"+userid1).hide();
$("#wholeinf1_"+userid2).toggle();
$("#wholeinf_"+userid2).empty().append(html);
}
});
});
</script>
<div id="wholeinf1_<?php echo $res['userid']; ?>" style="height:auto; width:auto; display:none;">
<div id="wholeinf_<?php echo $res['userid']; ?>" style="height:auto; width:auto;">
</div>
</div>
<div style="display:block;">
<button class="other_chart" id="chart_<?php echo $res['userid']; ?>" type="button" class="btn btn-primary">View Chart</button>
</div>
You need to add dataType: 'html' to your $ajax request.
And change $("#wholeinf1_"+userid2).toggle(); to $("#wholeinf1_"+userid2).show();
Related
View Code:
<script>
function getMessage(){
$.ajax({
type:'POST',
url:'/getmsg',
data:'_token = <?php echo csrf_token() ?>',
success:function(data){
$("#msg").html(data.msg);
}
});
}
</script>
<body>
<div id = 'msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
<input type="button" value="Replace Message" onclick='getMessage()'>
</body>
Here ,When I click on the button it should be replaced by the other text. But nothings appears on clicking.
Controller code:
public function index(){
$msg = "This is a simple message.";
return response()->json(array('msg'=> $msg), 200);
}
In pure js that code work fine
function getMessage(){
alert('Its working!');
}
<body>
<div id = 'msg'>This message will be replaced using Ajax.
Click the button to replace the message.</div>
<input type="button" value="Replace Message" onclick='getMessage()'>
</body>
Looks OK.
Put a breakpoint in your success and see what data is.
Or do a console.log
Mick
in your ajax code you didn't define dataType, add dataType:"json", to retrive the json data, change your ajax code as
function getMessage(){
$.ajax({
type:'POST',
url:'/getmsg',
dataType:'json',
data:{
_token = '<?php echo csrf_token() ?>'
},
success:function(data){
$("#msg").html(data.msg);
}
});
Update your code with below mentioned code, and let's try.. i will working for me..
<script type="text/javascript" charset="utf-8">
$(document).on('click', '#btnSelector', function(event) {
event.preventDefault();
/* Act on the event */
getMessage();
});
var getMessage = function(){
$.ajax({
type:'POST',
url:'/getmsg', //Make sure your URL is correct
dataType: 'json', //Make sure your returning data type dffine as json
data:'_token = <?php echo csrf_token() ?>',
success:function(data){
console.log(data); //Please share cosnole data
if(data.msg) //Check the data.msg isset?
{
$("#msg").html(data.msg); //replace html by data.msg
}
}
});
}
</script>
<body>
<div id = 'msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
<input type="button" value="Replace Message" id='btnSelector'>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<body>
<div id='msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
<input type="button" id="ajax_call" value="Replace Message">
</body>
<script>
$(function () {
$('#ajax_call').on('click', function () {
$.ajax({
type:'POST',
url:'<?php echo url("/getms"); ?>',
data:'_token = <?php echo csrf_token() ?>',
success:function(data){
$("#msg").html(data.msg);
},
complete: function(){
alert('complete');
},
error: function(result) {
alert('error');
}
});
});
});
</script>
Jquery onclick function: jquery onclick function not defined
Also check: Function not calling within an onclick event
i have created a link using HTML
<a style="text-decoration: none; " href="{{URL::route('category.show', $category->id) }}">{{$category->name}}</a>
instead of using the normal link, i want to use jQuery to achieve this
<input type="button" value="<?php echo $category->name; ?>" onClick="getPage(<?php echo $category->id; ?>);" /><?php ?>
<script type="text/javascript">
function getPage(id) {
$('#output').html('<img src="LoaderIcon.gif" />');
jQuery.ajax({
url: "{{ URL::route('category.show', $category->id) }}",
// i don't know how to declare the route URL in jQuery.
data:'id='+id,
type: "POST",
success:function(data){
$('#output').html(data);
}
});
}
getPage(1);
</script>
Define your URL path as below:-
<script type="text/javascript">var BASEURL = "'.$this->baseUrl.'"; </script>
<script type="text/javascript">
function getPage(id) {
$('#output').html('<img src="LoaderIcon.gif" />');
var path=BASEURL+'/category/'+id; // define path here
jQuery.ajax({
url: path,
data : {id: id},
type: "POST",
success:function(data){$('#output').html(data);}
});
}
getPage(1);
</script>
Hope it will help you :-)
i am trying to display the full response of jsonp call in textarea and div but for some reason it doesnt work! could any one tell me what i am doing wrong here?Thanks
ajax script:
<script>
$(function() {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.somesite.com/test&count=-1",
success: function(data) {
alert(data);
$(".response").append(data);
$("#outputtext").append(data);
document.myform.outputtext.value = document.myform.outputtext.value+data+'\n' ;
}
});
});
</script>
<div class="response"></div>
<form id="myform" name="myform" action="./" method="post">
<td><textarea rows="6" cols="15" name="outputtext" style="width: 99%;"></textarea></td>
</form>
I can't seem to see the issue here, this AJAX request should be pulling results from sx.php and displaying within the success, although it keeps submitting to itself???
s.php
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "sx.php",
data: $(this).closest("form").serialize(),
cache: false,
success: function(data){
$('#status').html(data);
}
});
return false;
});
});
</script>
<form>
<input type="hidden" name="mid" value="<?php echo htmlspecialchars($result['id']); ?>" />
<h5><?php echo htmlspecialchars($result['title']); ?></h5>
<input type="submit" class="button" value="Go" />
</form>
Im going crazy here...!
Don't trigger the click of the button, but call the from submit event:
$('form').submit(function(){
return false
})
Problem: I'm trying to send ajax reguest, and then submit the form.
Aproaches:
1. I solved the problem by putting
success: function() {
document.myform.submit();
}
But i think it's not the most elegant solution. Can you explain me why it works only if i put document.myform.submit(); in success? Is there any other way to solve this problem?
<div class="buttons">
<div class="right">
<form name="myform" onsubmit="javascript: startAjax(); return false;" action="https://example.com/payment.php" method="get">
<input type="hidden" name="merchantId" value="<?php echo $merchantIdKZM; ?>">
<input type="submit" value="<?php echo $button_confirm; ?>" id="button-confirm2" class="button" name="PayKZM" />
</form>
</div>
</div>
<script type="text/javascript">
function startAjax() {
console.log("dafaaaa");
$.ajax({
type: 'get',
url: 'index.php?route=payment/bank_transfer/confirm',
async: 'false',
success: function() {
// location = '<?php echo $continue; ?>';
}
});
} // Calls ajaxComplete() when finished
function ajaxComplete()
{
console.log("dafa");
document.myform.submit();
}
</script>
success's function is called upon the get request receiving a valid response as #harsh pointed out. Thus it will occur after the get request. I believe something similar to the following would do as you request though I haven't tested it:
<script type="text/javascript">
$(function () {
$("#form").on('submit', function () {
var $form = $(this);
$.ajax({
type: 'GET',
url: 'index.php?route=payment/bank_transfer/confirm',
data: $form.serialize(),
async: 'false',
success: function () {
$.ajax({
type: 'GET',
url: 'https://example.com/payment.php',
data: $form.serialize(),
});
}
});
});
});
</script>