REST Codeigniter, jquery/ajax does not display response - rest

I'm trying to get a helloworld type program working with REST CI/jquery. I've included my (really rudimentary) REST controller, view file and javascript file and am hoping that the error that has eluded me jumps out at you.
Two issues:
The response I get from the server does not get displayed - the screen gets refreshed instead (I know this is some very basic thing I've missed). If I step through the code, I see the display of the result but then, screen gets refreshed. And somehow, I cannot step into my "success" function. Why, oh why?
2.Upon success, I'd like to redirect the user to another url, say, www.google.com. Would I do this in the javascript file? or server side?
Thank you in advance for helping me!
[Added after solving the issue: My problem has nothing to do with REST or Codeigniter. A purely javascript problem]
The REST Controller:
<?php
require APPPATH.'/libraries/REST_Controller.php';
class Myex extends REST_Controller {
function contact_post(){
$result=array();
$fname=$this->post('fname');
$lname=$this->post('lname');
$result['message']="contact_post has your name";
$result['fname']=$fname."XX";
$result['lname']=$lname."YY";
$this->response($result,200);
}
}
?>
The view file:
<?php $this->load->view('includes/header')?>
<div id="input-div">
<form name="cookieform" id="login" method="post">
First Name: <input type="text" name="fname" id="fname" class="text"/>
Last Name: <input type="text" name="lname" id="lname" class="text"/>
<input type="submit" name="submit" value="Submit" id='submit' class="page"/>
</form>
</div>
<div id="resp-div">
response goes here
</div>
<?php $this->load->view('includes/footer')?>
The javascript file:
function postsuccess(output) {
$('#soln-div').html(output.message +'for user '+output.fname+' whose last name is '+output.lname).show('slow');
}
function post_contact() {
$('#submit').click(function(){
var output;
var fdata,res;
var furl=global_siteurl+'/myex/contact';
var fname=$('#fname').val();
var lname=$('#lname').val();
fdata='fname='+fname+'&lname='+lname;
res=$.ajax({
url: furl,
type: 'POST',
dataType: 'json',
data:fdata,
success: function(output) {
postsuccess(output);
}
});
});
}
$(document).ready(function() {
get_contact();
post_contact();
});

You have called your ajax function upon submission of form you can prevent refreshing of page in 2 ways:
(a) Use <input type="button" /> instead of submit call your ajax function on this button or
(b) Use return false; in your success function of ajax request.
You can redirect to any url in javascript using window.top.location = 'url-to-redirect';

Related

Amp-form does not redirect to another page

I have one input bar which must redirect to another https page (contains google-search) on submit. The code of the form is the next:
<form class="navbar-form navbar-left hide-inputs buscadoMovilLine" role="search" target="_blank" action-xhr="https://www.tuotromedico.com/buscadorg.php" action="https://www.tuotromedico.com/buscadorg.php" method="get">
<div class="form-group buscador">
<input class="SearchInputMovil2 inl" type="text" placeholder="Buscar..." class="form-control" name="q">
<button class="inl" type="submit" class="btn btn-default"><i class="fa fa-search lupaBuscarMovilBoton2" aria-hidden="true"></i></button>
</div>
</form>
I have added the amp-form extension too. The official documentation says this:
Redirecting after a submission
amp-form also allows publishers to redirect users to a new page after a submission happens through AMP-Redirect-To response header.
Note that you'd also have to update your Access-Control-Expose-Headers
response header to include AMP-Redirect-To to the list of allowed
headers.
The redirect URL must be absolute HTTPS URL otherwise AMP will throw
an error and redirection won't happen.
https://www.ampproject.org/es/docs/reference/components/dynamic/amp-form
But im not sure how have i to specify that.
I know 2 ways, this is for node:
app.post('/register', function (req, res) {
let form = new formidable.IncomingForm();
form.parse(req, function (err, fields) {
res.setHeader('AMP-Access-Control-Allow-Source-Origin', 'https://example.com/');
if (fields.first_name && fields.last_name) {
res.setHeader('AMP-Redirect-To', 'https://example.com/some-key');
res.status(200).json(fields);
} else {
res.status(400).json({error: 'Please select a size.'});
}
});
and the second, in amp you can use navigateTo()
<form class="proceed__form" method="post" id="requirements-form"
action-xhr="https://localhost:4040/check-requirements"
target="_top"
on="submit-success:AMP.navigateTo(url='https://google.com')"
>
</form>
OR you can get variable from response
(res.status(200).json({message: 'success', navigateTo: domain + '/profile'});)
<form class="proceed__form" method="post" id="requirements-form"
action-xhr="https://localhost:4040/check-requirements"
target="_top"
on="submit-success:AMP.navigateTo(url=event.response.navigateTo)"
>
</form>

Angular JS: sending form field data in a PUT request (like POST does)

I'm trying to write a client that does all four REST verbs (GET/POST/PUT/DELETE) and have gotten all but the PUT done. The REST/CRUD API I'm working from wants to update an entry by calling PUT /realmen/ID-string and including the key-value pairs as JSON. For a POST this seems to work "automatically", but not for a PUT.
My HTML looks like:
<div id="list">
<form novalidate class="edit-form">
<p>Title <input ng-model="realmen.title" type="text" value="{{realmen.title}}" /></p>
<p>Real Men <input ng-model="realmen.realmen" type="text" value="{{realmen.realmen}}" /> </p>
<p>Real Role-Players <input ng-model="realmen.realroleplayers" type="text" value="realmen.realroleplayers}}" /></p>
<p>Loonies <input ng-model="realmen.loonies" type="text" value="{{realmen.loonies}}" /></p>
<p>Munchkins <input ng-model="realmen.munchkins" type="text" value="{{realmen.munchkins}}" /></p>
<input ng-model="realmen.entryId" type="hidden" value="{{entryId}}"/>
<button ng-click="change()">UPDATE ({{entryId}})"</button></p>
</form>
</div>
My controller looks like:
$scope.realmen = RealMen.get({entryId: $routeParams.entryId}, function() {
$scope.master = angular.copy($scope.realmen); // For resetting the form
});
$scope.change = function() {
console.log($scope.realmen);
RealMen.update({entryId: $scope.entryId}, function() {
$location.path('/');
});
}
And finally, my services look like:
angular.module('realmenServices', ['ngResource']).
factory('RealMen', function($resource){
var RealMen = $resource(
'http://localhost\\:3000/realmen/:entryId',
{},
{
query: {method:'GET', params:{entryId:''}, isArray:true},
post: {method:'POST'},
update: {method: 'PUT', params:{entryId:'#entryId'}},
remove: {method:'DELETE'}
});
return RealMen;
});
The PUT is getting called with the correct id value in the URL, but the Request Payload only contains the entryId, so the backend API gets no expected keys and values and essentially blanks out the record in the database.
The console.log($scope.realmen) does show the form fields, along with a lot of extra data. I tried calling RealMen.update($scope.realmen, ...) (similarly to calling .save()), but all those extra fields are tacked on as query string parameters to the URL in a spectacularly ugly fashion.
Because your $scope.realmen is a resource instance, instead of using RealMen.update, you can just call $scope.realmen.$update() (note that there is a "$"). The instance action method will take care of sending the data for you.

Ajax form submit, validate and return success or fail

Searched and browsed the forum and tried many examples of ajax and form submission but can't get anything close to work for what I am trying to achieve. I must admit I've been going in circles for days with this and need someone with a fresh pair of eyes.
I have 2 pages:
page1.php
page2.php
Using Google jquery/1.9.0/jquery.js and developing this locally.
page1.php is as follows (I've omitted the head script and body/html tags for clarity)
$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
type: "POST",
url: "page2.php",
data: 'html',
success: function(html){
if(html == 'success'){
$('#address').fadeOut('slow');
$('#done').fadeIn('slow');
}else if(html == 'fail'){
alert('fail');
}
}
});
return false;
});
});
<div id="address">
<form action="page2.php" method="post" name="theForm">
<input name="checkname" type="text" id="checkname">
<input name="Proceed" type="submit" id="submit" value="Next Page" />
</form>
</div>
<div id="done">
That Worked!
</div>
Page2.php
Has a mysql query that checks the database for the checkname and echoes 'success' or ' fail' depending upon the result. The query runs fine and is not showing any error.
When the form is submitted page2.php loads and just shows 'success' in the browser.
Firebug also shows success under both response and html. There are no errors within firebug.
I basically want page1.php to stay and for the #address div to hide and the #done div to show when success is passed from page2.php
Hope someone can help.
Update
I tried this test page:
ajaxone.php
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
type: "POST",
url: "ajaxtwo.php",
data: 'html',
success: function(html){
if(html == 'success'){
$('#address').fadeOut('slow');
$('#payment').fadeIn('slow');
alert('ok');
}else if(html == 'fail'){
alert('fail');
}
}
});
return false;
});
});
</script>
<style type="text/css">
#payment{
visibility:hidden;
}
</style>
<div id="address">
<form action="ajaxtwo.php" method="post" name="theForm" id="theForm">
<p>
<input name="name" type="text" id="name">
</p>
<p>
<input type="submit" name="submit" value="submit">
</p>
</form></div>
<div id="payment">Name is correct</div>
ajaxtwo.php
print_r($_POST);
if($_POST['name'] == 'rob'){
echo 'success';
}else{
echo 'fail';
}
Using the above firebug shows the following error:
Array ( )
Undefined index: name
fail
However, when I remove the ajax call the submit works and the data is passed.
So, am I right to assume that if you do not specify the form variables within the ajax call nothing is posted to the next page?
Update 2
Sorry I'm answering myself here.
It does appear that you need to specify the form data to send within the ajax call.
I've just added:
$('#theForm').serialize();
within the ajax call and now the form submits without an error.
However, this still goes to ajaxtwo.php and does not show the success or fail on the ajaxone.php page.
So my next stage is to get the success or fail to show on ajaxone.php
You need to add id="theForm" in the form tag itself.
Example:
<form action="page2.php" method="post" id="theForm" name="theForm">
I would say, add a and then make jq read the output and then redirect accordingly, or use php to redict based on $success_fail result.

In ASP.NET MVC how best to design/code asynchronous partial postback of <DIV>

On a MVC View (.aspx) enclosed in a Form, there are several controls - grids, textboxes - that display data relating to a subject, a person. The form does not require a submit button because the great majority of data is for viewing only. However, there is a grid (Telerik MVC) that displays comments. A user should be able to add a comment - in a textbox - and that comment should then appear in the grid. Because the comments data comes from two different database sources and are merged in a stored procedure, I'm not able to use inline grid editing.
Question 1.
Is it poossible to asynchronously postback the just contents of the wrapping DIV - i.e. the textbox with the new comment - to a controller without a complete Form postback and page flicker?
Thanks,
Arnold
You could make a button that would "submit" the contents of the text box (the new comment) to a Controller Action by using a jQuery / JavaScript post function that occurs when clicking the button.
The controller action could then store the new comment in the specific database and if you add a "success" method after that occurs you could just call an ajaxRequest() to refresh the grid.
$("#submitButton").click(function () {
var comment = $("#commentTextbox").val();
$.ajax({ type: "POST",
url: "/Controller/UpdateCommentsGrid",
datatype: "json",
traditional: true,
data:
{
'comment': comment
},
success: function () {
var grid = $('#YourGridName').data('tGrid');
grid.ajaxRequest();
}
});
});
Hope this helps.
Yes it is possible. Let's take as an example the following form where you want to post only the second DIV:
<form action="/foo" method="post">
<div id="section1">
<input type="text" name="item1" />
<input type="text" name="item2" />
</div>
<div id="section2">
<input type="text" name="item3" />
<input type="text" name="item4" />
</div>
</form>
and you could send an AJAX request like this:
var form = $('#section2').wrap('<form/>').parent();
$.post('/foo', form.serialize(), function(result) {
alert('successfully posted');
});

Load page to Modal Window from form with jQuery

I´m working on a website with a purchase process. I have a form generated by some PHP that looks like this:
<form name="order_form" action="'.$thePayreadApi->get_server_url().'" method="post" id="payer-form">
'.$thePayreadApi->generate_form().'
<input type="submit" value="Klicka för betalning" />
</form>';
When the form is submitted it will go to a new page (located on another server) where the purchase is performed.
Basically what I want is the form to be submitted through AJAX and then load the new page in a Modal Window. I use jQuery throughout the website so I´d like a solution based on that lib.
I´ve found these sites that might be a hint:
http://pixeline.be/blog/2008/javascript-loading-external-urls-in-jqmodal-jquery-plugin/
http://dev.iceburg.net/jquery/jqModal/
Any help is really appreciated!
I haven't tried this exactly, but the theory is what I would go for:
$("form[name='order_form']").submit(function() {
//Validate in here
var validate = false;
if($("input[form='element1']").val()!="") {
validate = true;
}
if(validate) {
this.submit();
} else {
return false;
}
});
<form action="shopping.php" target="targetIframe" method="post">
<input type="submit" value="Click Me" />
</form>
<iframe name="targetIframe" src=""></iframe>