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 :-)
Related
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();
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
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>
I am submitting a form via Ajax, and I want to prepend the project name to a list item when the form is submitted. Everything works fine except for pulling the information needed inside the success function. Data[Project][project_name] is being posted. How do I get the project name inside the success function? Right now "data" is being displayed in the list. I only have the one textbox in my form.
<script type="text/javascript">
$(document).ready(function () {
var frm = $('#ProjectAddForm');
frm.submit(function() {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function(data) {
$('#ProjectProjectName').val('');
$('#ProjectList').prepend("<li style='color: green;'>data</li>");
}
})
});
return false;
});
</script>
HTML:
<ul id="ProjectList">
<?php foreach ($projects as $project): ?>
<li><?php echo $project['Project']['project_name']; ?></li>
<?php endforeach; ?>
<?php unset($project); ?>
</ul>
<form accept-charset="utf-8" method="post" onsubmit="event.returnValue = false; return false;" id="ProjectAddForm" action="/callLog/projects/add">
I needed to add a dataType: 'json' to the request.
<script type="text/javascript">
$(document).ready(function () {
var frm = $('#ProjectAddForm');
frm.submit(function() {
$.ajax({
type: frm.attr('method'),
url: "<?php echo $this->Html->Url(array('controller' => 'projects', 'action' => 'add.json')); ?>",
data: frm.serialize(),
dataType: 'json',
success: function(data) {
$('#ProjectProjectName').val('');
$('#ProjectList').prepend("<li class='icon-remove', style='color: green;'>" + data.projectName + "</li>");
$('#modalProject').modal('hide');
}
})
});
return false;
});
</script>
I am building a PhoneGap app using jQuery Mobile. My JSONP cross domain communication works, but have an issue when jQuery Mobile is included. Without it everything works as expected, included, it stops working.
I've reduced code to simplest form - Serialize data, encode and call CrossDomain PHP file using JSONP. Execute success function. I thought it might be bad JS but "alert" works and no JS errors. But the $('#section1').html("SECTION 1 - " + data.message); doesn't update. Note: When I remove jQM it all works!
Below is the HTML and the PHP code it calls. It's as though the jQueryMobile AJAX call is interfering with the update of the .html code. Any ideas? I'm stumped.
Ajax4d.htm
<html><head><title>First jQueryMobile Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(document).ready(function() {
$("#foo").submit(function(event) {
event.preventDefault();
var $form = $(this),
$inputs = $form.find("input, select, button, textarea"),
serializedData = $form.serialize();
var postData = serializedData;
var urlStr = "http://www.fohost.co/testURLd.php?";
alert (urlStr + encodeURI(postData));
$.ajax({
url: urlStr,
data: encodeURI(postData),
dataType: "jsonp",
success: function(data){
alert("SUCCESS callback before HTML update: " + data.message);
$('#section1').html("SECTION 1 - " + data.message);
}
});
});
});
</script>
</head>
<body>
<section id="register_page" data-role="page" data-theme="b">
<div data-role="content">
<form id="foo" method="get" action="">
<fieldset data-role="fieldcontain">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="Chris" placeholder="Username"/>
</fieldset>
<fieldset class="ui-grid-a"><input type="submit" value="Send" /></fieldset>
</form>
</div>
<div id="section1">SECTION</div>
</section>
</body>
</html>
testURLd.php
<?php
header("content-type: application/json");
$user = $_GET['username'];
$rtnjsonobj->success = "true";
$rtnjsonobj->user = $user;
$rtnjsonobj->message = "Stored User: " . $user;
echo $_GET['callback']. '('. json_encode($rtnjsonobj) . ')';
?>
When you use the submit() method, but fire an ajax call, you aren't prohibiting the form from submitting.
Add a return false; to the end of the $("#foo").submit method. This will prohibit the page from reloading onclick.
Use pageinit instead of document ready..
check this link..
http://jquerymobile.com/test/docs/api/events.html
try this one..
$( document ).delegate("#register_page" ,"pageinit", function() {
$("#foo").submit(function(event) {
event.preventDefault();
var $form = $(this),
$inputs = $form.find("input, select, button, textarea"),
serializedData = $form.serialize();
var postData = serializedData;
var urlStr = "http://www.fohost.co/testURLd.php?";
alert (urlStr + encodeURI(postData));
$.ajax({
url: urlStr,
data: encodeURI(postData),
dataType: "jsonp",
success: function(data){
alert("SUCCESS callback before HTML update: " + data.message);
$('#section1').html("SECTION 1 - " + data.message);
}
});
});
});