I am trying to create a back button on an application so a user can go back and change something that they may need to fix or update. I am using this javascript:
$(function () {
$(':button').click(function () {
$.ajax({
url: $(this).data('url'),
type: 'GET',
cache: false,
success: function (result) {
$('#step1').html(result);
}
});
return false;
});
});
and this code:
<input type="button" value="Back" id="back" class="btn btn-default cancel" data-url="#Url.Action("Index", "Home")" />
What's happening is when I click my back button it renders the header / footer twice with what seems to be inside my '#step1' div. How can i keep the header / footer form rendering twice?
Updated:
$(function () {
$(':button').click(function () {
$.ajax({
url: $("#step1").load($(this).data('url')),
type: 'GET',
cache: false,
success: function (result) {
$('#step1').html(result);
}
});
return false;
});
});
Related
I am trying to send a jquery request to update the table, that route requires two variables id, Receive_id. I tried this code below but the button on-click does not show any response. Plz review my code or suggest me if there are any other ways to send route.
here is my blade code
<button data-url="{{ route('repairs.updateCylinder',['id'=> $cylinder->id, 'receive_id' => $data->id]) }}" class="btn btn-primary submit" id='update-cylinder'>Update</button>
Here is Jquery code,
<script>
$(document).ready(function(){
$(document).on("click", "#update-cylinder", function() {
// e.preventDefault();
var url = current.data('url')
var id=
$.ajax({
url: url,
type: "PATCH",
cache: false,
data:{
_token:'{{ csrf_token() }}',
body_leak: $('#body-leak').val(),
nozzle_change: $('#nozzle-change').val(),
nozzle_repair: $('#nozzle-repair').val(),
cap_change: $('#cap-change').val(),
washer_change:$('#washer-change').val(),
wash:$('#wash').val(),
refill:$('#refill').val(),
remarks:$('#remarks').val()
},
success: function(dataResult){
dataResult = JSON.parse(dataResult);
if(dataResult.statusCode)
{
window.location = "/repairs/updateCylinder";
}
else{
alert("Internal Server Error");
}
}
});
});
});
</script>
You can add a data-id on your button :
<button data-id="{{$cilinder->id}}" data-receive-id="{{ $data->id }}" class="btn btn-primary submit" id='update-cylinder'>Update</button>
and on your script section :
$("#update-cylinder").on("click", function(e) {
e.preventDefault();
let id = $(this).data("id");
let receive_id = $(this).data("receive-id");
let url = "repairs/updateCylinder/"+ id;
let data = new FormData($('#id_form')[0]);
$.ajax({
url: url,
type: "PATCH",
cache: false,
data : data,
datatype:'json',
success: function(response){
if(response.success == true){
window.location "/repairs/cylinderlist";
}else{
alert("Error to update...");
}
});
}
This is my code:
var onloadCallback = function() {
$( "#submit" ).each(function() {
grecaptcha.render($( this ).attr('id'), {
'sitekey' : '6Lcjvi4UAAAAAIR7_ckItF2HfMEFHx427WUDdGDk',
'callback' : onsubmitforgotpass
});
});
};
function onsubmitforgotpass(token) {
$(document).ready(function() {
$("form.formajax").submit(function() {
$.ajax({
type: "POST",
url: "admin/login/forgotpass.php",
data: $("form.formajax").serialize(),
cache: false,
success: function(result) {
$(".forgotpassresult").html(result);
$(".forgotpassresult").css("opacity", "1");
}
});
return false;
});
$("form.formajax").submit();
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="" method="post" class="formajax">
<input type="text">
<input type="submit" id="submit">
</form>
I am unable to submit this ajax form multiple times.
It is probably because of these 2 lines:
$("form.formajax").submit(function()
and
$("form.formajax").submit();
If I replace those line with $("#submit").click(function() and $("#submit").click();
Then I can submit the form multiple times.
Anyway to submit the form multiple times using .submit(); function? (It will help me in some other part of my code also, so I do not want to use click();
hey please test the following things:
Please remove the actions
action="abc.com"
to
action=""
add ajax call on button click like below example:
$("#submit").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "admin/login/forgotpass.php",
data: $("form.formajax").serialize(),
cache: false,
success: function(result) {
$(".forgotpassresult").html(result);
$(".forgotpassresult").css("opacity", "1");
}
});
});
});
I have a form which should submit data after pressing the submit button. After tagging a few input fields as required the form always shows me when there is no input in the required field after pressing the submit button - so far, so good.
What I would like to realize is that there is a redirection to another page if the submission was successful. If there are some empty required fields the form should show me, without redirecting me to another page.
By now I have the following code:
Submit button:
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="submityes" id="submityes" class="btn btn-danger">Submit</button>
</div>
</div>
Also I have the following js function to submit the form and to redirect me to another page:
$('document').ready(function () {
"use strict";
$(function () {
$('#submityes').click(function () {
$.ajax({
type: "POST",
/* url: "process.php", //process to mail
data: $('form.contact').serialize(), */
success: function (msg) {
window.location.replace("/submit_resolved.php");
},
error: function () {
alert("error");
}
});
});
});
});
The problem I have right now is that I will always be redirected to the "submit_resolved.php" page, whether all required fields are complete or not.
How can I solve this problem? I only want to be redirected when all required fields are not empty.
You should bind to the submit event, not click event:
UPDATED TO MATCH THE COMMENTS
$(function () {
var submityesClicked;
//catch the click to buttons
$('#submityes').click(function () {
submityesClicked = true;
});
$('#submitno').click(function () {
submityesClicked = false;
});
$('#webform').submit(function (e) {
e.preventDefault();//prevent the default action
$.ajax({
type: "POST",
/*url: "process.php", //process to mail
data: $('form.contact').serialize(),*/
success: function (msg) {
window.location.replace(submityesClicked ? "/submit_resolved_yes.php" : "/submit_resolved_no.php");
},
error: function () {
alert("error");
}
});
});
});
The submit event is triggered only if the form is valid.
Note that the submit event is triggered by the form but the click event is triggered by the input element.
Do redirection on complete. Not on success
$('document').ready(function () {
"use strict";
$(function () {
$('#submityes').click(function () {
$.ajax({
type: "POST",
/* url: "process.php", //process to mail
data: $('form.contact').serialize(), */
success: function (msg) {
//window.location.replace("/submit_resolved.php");
},
complete: function () {
window.location.replace("/submit_resolved.php");
},
error: function () {
alert("error");
}
});
});
});
});
I assume you are validating form in process.php so, you have to return error if validation fail from process.php like this.
header('HTTP/1.1 500 Internal Server Booboo');
header('Content-Type: application/json; charset=UTF-8');
die(json_encode(array('message' => 'ERROR', 'code' => 1337)));
check this link: Return errors from PHP run via. AJAX?
Hope this may be helpful to you.
The simplest thing you can do is to add "required" attribute to you input elements.Example:
<form action="/action_page.php">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>
It's a HTML5 attribute, so no JavaScript required. And it is supported by all major browsers. Check this link:
http://caniuse.com/#search=required
Anyway, you shouldn't rely just on front-end verification. Check those inputs on back-end, too.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<form action="">
Username: <input type="text" id="usrname" required>
<button type="button" name="submityes"
id="submityes" class="btn btn-danger">Submit</button>
</form>
</div>
function isValid(){
var usrname = $("#usrname").val();
if(usrname == ""){
return false;
}
return true;
}
$(function () {
$('#submityes').submit(function () {
if(isValid() == true){
$.ajax({
type: "POST",
/*url: "process.php", //process to mail
data: $('form.contact').serialize(),*/
success: function (msg) {
alert("success");
window.location.replace("/submit_resolved.php");
},
});
}else{
alert("error");
}
});
});
I am trying to trigger a post request when a user clicks the submit button for a comment. Right now clicking the submit button triggers nothing, I even tried to console.log($(this)) I got no output. The first code below is the jQuery event code and ajax code. The block of code below that is the html button. thanks for the help.
$('#submitComment').on('click', '#content', function() {
$.ajax({
url: 'http://localhost:3000/comments',
type: 'POST',
data: data = { comment: {
body: $(this).find('input[name="createComment"]').val(),
user_id: 1,
image_set_id: 2}
}
}).done(function(response) {
console.log(response);
});
});
the button I am trying to target with jQuery event
<div class="container">
<div id="content">
//the code between comments is in a Handelbar template
<input name="createComment">
<button type="submit" id="submitComment">Create Comment</button>
//end of handelbar template
</div>
</div>
You need to bind the delegated handler to an ancestor(#content) of the target element(submitComment)
$('#content').on('click', '#submitComment', function () {
$.ajax({
url: 'http://localhost:3000/comments',
type: 'POST',
data: data = {
comment: {
body: $(this).find('input[name="createComment"]').val(),
user_id: 1,
image_set_id: 2
}
}
}).done(function (response) {
console.log(response);
});
});
I am using ASP.NET MVC 4 and jQuery. I have a button control on my view. When it is clicked it "injects" a partial view into my view. When I refresh the page then the partial view is gone.
My HTML markup:
<button id="RetrieveButton" type="button">Retrieve</button>
<div id="RuleDetails">
<div class="main-content">
<p>Some text.</p>
</div>
</div>
My jQuery to return the partial view with an AJAX call to return the HTML:
$('#RetrieveButton').click(function () {
$.ajax(
{
type: 'POST',
url: '#Url.Action("GetRuleDetails")',
data: {
systemCode: $('#SystemCodes').val()
},
dataType: "html",
success: function (result) {
alert('success');
var domElement = $(result);
$("#RuleDetails").html(domElement);
},
error: function (result) {
alert('error');
}
});
});
My action method:
public ActionResult GetRuleDetails()
{
RuleViewModel viewModel = new RuleViewModel();
return PartialView("_RuleInformation", viewModel);
}
My partial view:
#model MyProject.ViewModels.Rules.RuleViewModel
<div class="main-content">
<h2>Rule Details</h2>
</div>
I need this "injected" partial view to remain there if I were to refresh the page. Currently it "resets" if I were to refresh it, and the partial that was injected is gone.
It will not render that partial view again as it is does not remembers clicked state of button.
One of the ways to achieve what you are looking for is by using sammy.js
On click of button you can set the hashurl using sammy.js (e.g.: '#/partialview') and on page refresh hashurl part stays intact (but does not go to server). And then you can manipulate the client code accordingly
Take sammy.js reference in your page.
Intialize sammy like below
var app = $.sammy('body', function (context){
this.get('#/PartialView1', function () {
fnLoadPartialView();
});
});
change Retrieve to with href='PartialView1'
function fnLoadPartialView (){
$.ajax(
{
type: 'POST',
url: '#Url.Action("GetRuleDetails")',
data: {
systemCode: $('#SystemCodes').val()
},
dataType: "html",
success: function (result) {
alert('success');
var domElement = $(result);
$("#RuleDetails").html(domElement);
},
error: function (result) {
alert('error');
}
});
}
5.
$('#RetrieveButton').click(function () {
fnLoadPartialView ();
});