I have a button and user's name on the template and if a user clicks on button, Ajax should replace user's name and button with some messages using new CSS styling.
This is my Ajax :
$('#fulfillButton').bind('click',function() {
$.ajax({
type : "GET",
contentType : "application/json; charset=utf-8",
url : "order/${orderID}",
dateType : "json",
cache: false,
success: function (data) {
if(data.statusCode=="OK")
{
$('#replace').replaceWith("<div class ="error_message">"+ data.body +"</div>");
}
},
error: function (data) {
alert("Something went wrong, please retry again");
},
});
});
This is my html:
<div id="replace">
<div class="full_name">
${name}
</div>
<button id="fulfillButton" type="button" class="action-button shadow animate green">
FulFill
</button>
</div>
<button id="goBackButton" type="button" class="go_back_button">
Go Back
</button>
However, when I clicked on the button, nothing happened. I am missing something here? I am using Jquery 1.6.
You code is fine in general, and working. The only thing went wrong, is the html escaping of the replace element:
// before
$('#replace').replaceWith("<div class ="error_message">"+ data.body +"</div>");
// after
$('#replace').replaceWith('<div class="error_message">' + data.body + '</div>');
And you should really update your jQuery version. 1.6 is a hundred years old! :)
Working example.
Related
switch off image
switch on image
I want to make a toggle switch which needs to fire two different event from the same toggle switch using php and ajax & I have made this following html code
<div id="about-btn" class="card-action">
<div class="about-btn">
<input type="checkbox" id="cfl" name="cfl" class="switch-input">
<label for="cfl" class="switch-label"><h4>CFL <span class="toggle--on">ON</span><span class="toggle--off">OFF</span></h4></label>
</div>
</div>
& following php code
<?php
if(isset($_POST['cfl'])) {
makeRequest('cfl_on'); // user checked the box
} else {
makeRequest('cfl_off'); // user did not check the box
}
?>
this php needs to pass value to the "makeRequest()" function of my script
<script>
function makeRequest(actionParam){
var request = $.ajax({
url: "controller.php",
type: "POST",
data: {Action : actionParam},
dataType: "html"
});
request.done(function(msg) {
//alert(msg);
// $("#ResponseDiv").html( msg );
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
I know I'm doing something wrong but unable to figure it out. any help will be highly appreciated. thanks in advance for the help.
if you want to do two diferent ajax calls than:
$('.switch-label').on('click', function(){
if($('#cfl').is(':checked'){
"make ajax call 1 here"
}
else{
"make ajax call 2 here"
}
});
Or if you only want to hide/show your image than than just toggle the image container on click $('cfl')
I am trying to implement a simple Jquery drop down.
HTML
<h2> Networked Graphs</h2>
<p> Select the node ID from the drop down to see graphs up to a depth of 5 </p>
<form id="my form">
<label for="Node_type">Node_Type</label>
<select id="dropdown_change">
<option value="Customer">Customer</option>
<option value="Phone">Phone</option>
<option value="ID_Card">ID_Card</option>
</select>
<input type='submit' value='Submit'>
</form>
This is the jquery code:
var selectID = $("#dropdown_change").val();
$.ajax({
type: "POST",
url: '/echo/html/',
data: {
html: "<span>This is the ajax response...</span>",
delay: 2
},
success: function(data) {
showMsg('SUCCESS: ' + data);
},
error: function (xhr, textStatus, errorThrown) {
document.getElementById('dropdown_change').selectedIndex = 0;
showMsg('ERROR: ' + errorThrown);
return false;
}
});
}) // closes ?
Selecting from the drop down and clicking on the submit button should display the success message 'SUCCESS: This is the Ajax response'.
Even though I specify "type: POST" and SUCCESS as well as ERROR messages, it fails with the below error:
{"error": "Please use POST request"}
Here is the Jsfiddle. Trying to learn javascript/jquery.
The jQuery Ajax is running as soon as the page loads. It does not run when the button is clicked. When the button is clicked, the HTML form is being submitted.
The way to do this would be to add a listener to the button that intercepts the submit and calls the jQuery Ajax. It would look something like this:
$('input[type=submit]').click(function() {
var selectID = $("#dropdown_change").val();
$.ajax({...
return false;
});
Here is a working fiddle
After jquery 1.9.0, you should use
method: "POST"
instead of
type: "POST"
Link
Hi i have an ajax loaded form which contains a file input element. The application should be able to detect the change event on input and upload the selected file to server.
I ve tried to bind the change event on document and it works smoothly but only once. After the first upload if i try to click on the file input to open the file selection box i get no response even though i haven t messed up with the click event and did not load any extra content with ajax.
my code is as follows
The loaded HTML form :
<form>
.
.
.
<div class="custom-file-upload" data-url="uploader.php">
<input class="file-upload-input" placeholder="pdf / doc / ppt / zip" disabled />
<div class="file-upload button">
<span>Upload</span>
<input id="input-file" type="file" class="upload" />
</div>
</div>
.
.
.
</form>
The change event listener :
$(document).on("change","#input-file",function(event){
$(this).fileUploader(event);
});
And in the file uploader plugin :
(function($){
var variables = {
input : null,
father : null,
file : null,
uploading : false
};
var methods = {
proccess : function(event){
if(!event.target.files){
return false;
}
variables.uploading=true;
variables.file=event.target.files[0];
variables.father.closest("form").attr("data-disabled","true");
variables.father.showLoading("buttonR");
variables.father.find(".file-upload-input").val(variables.file.name);
methods.upload(event);
},
upload : function(event){
var data= new FormData();
data.append("file",variables.file);
$.ajax({
url: variables.father.attr("data-url"),
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false,
contentType: false,
success: function(data, textStatus, jqXHR){
variables.input.hideLoading("buttonR");
variables.father.closest("form").attr("data-disabled","false");
variables.uploading=false;
variables.father.find(".file-upload-input").val("");
if(data.success){
methods.populate(data);
}
else{
$("body").textAlert(data.message,false,"notice");
}
},
error: function(jqXHR, textStatus, errorThrown){
variables.input.hideLoading("buttonR");
variables.father.closest("form").attr("data-disabled","false");
variables.father.hideLoading("buttonR");
variables.uploading=false;
variables.father.find(".file-upload-input").val("");
variables.input.hideLoading("buttonR");
$("body").textAlert("An error occured while trying to access server",false,"error");
}
});
},
populate : function(data){
variables.father.closest("form").find("input[name=filePath]").prop("value",data.file);
if(variables.father.closest("form").find("#tmp-popup-elem")){
$("#tmp-popup-elem").remove();
}
$("<div id=\"tmp-popup-elem\" class=\"br35 right\">\n\
<h3><i class=\"fa fa-check green\"></i> <strong>"+variables.file.name+"</strong> ("+(Math.ceil(variables.file.size/1024))+" KB)</h3>\n\
</div>").insertAfter(variables.father);
}
};
$.fn.fileUploader = function(event){
variables.father=$(this).parent().parent();
variables.input=$(this);
if(!variables.uploading){
methods.proccess(event);
}
return $(this);
};
})(jQuery);
EDIT (SOLVED) : The problem was wrong use of showLoading i used it in variables.father but i was trying to hide it from variables.input resulting to disabling it.
Because, after the first upload you are disabling the file button with the below code
variables.input.attr("disabled","disabled");
Remove that and it will work for 2nd time too
i have a several html buttons (not within a form).
When clicked they call a JavaScript function that after conformation, runs an ajax call.
This part all works OK, but i would then like to change the class of whichever button was clicked on success of the ajax call.
i have tried various methods seen on stackOverflow, but none of them seem to work...
can i please ask what am i doing wrong?
here is the simplified HTML (buttons)
<button class="btn btn-primary" onclick="primaryImage(4107,19372,'/abbie1.jpg'); return false;">
set as profile image
</button>
<button class="btn btn-primary" onclick="primaryImage(4107,19373,'/abbie2.jpg'); return false;">
set as profile image
</button>
<button class="btn btn-success" onclick="primaryImage(4107,19374,'/abbie3.jpg'); return false;" disabled="disabled">
profile image
</button>
Please note: the last button is already the active/success button, and i would also like to remove the class on success too (as only one should be active), but that is maybe my next stage....
here is the javaScript, (i have left in some of the methods i have tried, but commented them out)
function primaryImage(eid,pid)
{
if (confirm("Are you sure you wish to use this as your profile image?"))
{
$.ajax({
type: "POST",
async: false,
cache: false,
dataType: "json",
url: "ajax_photo.php",
data: "action=primary&eid="+eid+"&pid="+pid,
//context: this,
success: function(data){
if(data.result=='success')
{
alert('The image is now set as the profile image');
//$('button').click(function(){
// $(this).addClass('btn-success');
//});
//$('button').on(data.result=='success', function(e) {
// $(this).toggleClass("btn btn-success"); //you can list several class names
// e.preventDefault();
//});
//$(this).removeClass('btn-primary').addClass('btn-success');
}
else
{
alert('An error occurred when trying to set the image: ' + data.result);
}
}
});
}
}
I would be very grateful for any advice of what i am doing wrong
(as you can see, i am not too good with JS (yet))
Thanks!
Ford
As noted in your commented out code, you are binding the click event after click event has already been fired.
I would suggest you to pass a reference of the button that was clicked in the primaryImage() function itself as such:
<!-- In your HTML -->
<button class="btn btn-success" onclick="primaryImage(this, 4107,19374,'/abbie3.jpg'); return false;" disabled="disabled">
profile image
</button>
function primaryImage(button, eid,pid){
/** ... */
Then using that referenced button, you can add or remove CSS classes to the element, as well as the siblings of the element (using jQuery's siblings() method).
//your ajax call
success: function(data){
if(data.result=='success') //make sure this really is success
{
alert('The image is now set as the profile image');
$(button).removeClass('btn-primary').addClass('btn-success');
$(button).siblings('button').removeClass('btn-success').addClass('btn-primary');
}
}
As you don't use the jQuery .click() event, I think you need to pass the button in your function args.
So your button will look like
<button class="btn btn-primary" onclick="primaryImage(this, 4107,19373,'/abbie2.jpg'); return false;">
set as profile image
</button>
Then your function will be like
function primaryImage(el, eid,pid)
{
if (confirm("Are you sure you wish to use this as your profile image?"))
{
$.ajax({
type: "POST",
async: false,
cache: false,
dataType: "json",
url: "http://anzvirtuel.org",
data: "action=primary&eid="+eid+"&pid="+pid,
//context: this,
success: function(data){
if(data.result=='success')
{
$(el).addClass('btn-success');
alert('The image is now set as the profile image');
// keep doing whatever you want...
}
else
{
alert('An error occurred when trying to set the image: ' + data.result);
}
}
});
}
}
As I have not fully understood your commented JS I'll let you put the code you want, just remember that your button will be accessible in jQuery with $(el).
Hope it may helps you
You should pass the clicked element to the primaryImage() function, and use it on success to do whatever you like.
<button class="btn btn-primary" onclick="primaryImage(this, 4107,19372,'/abbie1.jpg'); return false;">set as profile image</button>
And in your JS
function primaryImage(element, eid,pid)
{
[...]
success: function(data){
if(data.result=='success')
{
$(element).addClass('btn-success');
}
else
{
alert('An error occurred when trying to set the image: ' + data.result);
}
}
[...]
}
You could use data-* attributes instead of onclick (MDN Documentation) and then access those throught jQuery, so your code is more clean and HTML / JS are separated.
Try this code, I've created three data attributes (data-eid, data-pid and data-image) for your params and also replaced your JS to make the whole stuff work with those data attributes. Those attributes can be accessed with following jQuery code - var eid = $(this).attr('data-eid'); as an example
This line of code removes the btn-primary class from the clicked button, adds a btn-success class to it and disables it, so it can't be toggled again.
pushedBtn.removeClass("btn-primary").addClass("btn-success").prop("disabled", true);
HTML
<button class="btn btn-primary" data-eid="4107" data-pid="19372" data-image="/abbie1.jpg">
profile image
</button>
<button class="btn btn-primary" data-eid="4107" data-pid="19373" data-image="/abbie2.jpg">
profile image
</button>
<button class="btn btn-primary" data-eid="4107" data-pid="19374" data-image="/abbie3.jpg">
profile image
</button>
JS
$(".btn").click(function (e) {
if (confirm("Are you sure you wish to use this as your profile image?")) {
var eid = $(this).attr('data-eid'); //like 4107
var pid = $(this).attr('data-pid'); //like 19372
var image = $(this).attr('data-image'); //like /abbie1.jpg
var pushedBtn = $(this);
$.ajax({
type: "POST",
async: false,
cache: false,
dataType: "json",
url: "ajax_photo.php",
data: "action=primary&eid=" + eid + "&pid=" + pid,
//context: this,
success: function (data) {
if (data.result == 'success') {
alert('The image is now set as the profile image');
pushedBtn.removeClass("btn-primary").addClass("btn-success").prop("disabled", true);
} else {
alert('An error occurred when trying to set the image: ' + data.result);
}
}
});
}
});
I'm new to asp. I have a submit button called "search" in a file called results.asp. I just need to run an asp function called "searchRecords" in the same file as the search button when the button gets clicked. Without redirecting to another page. I tried doing everything, using js, vb script... nothing works the way I want.
the submit button:
<form action="what goes here?">
<input type="submit" value="Search Records" name="search">
</from>
the function:
<% function show()
...stuff here....
%>
Also I found this asp code from another file that works in same kind of situation, but it does not work in my file.
<% if (request("button name")= "button value") then
function to call
end if
%>
Please help me to figure this out... thanks in advance...
With your case, I think you need to use Jquery ajax:
jQuery.ajax({
type:"POST" // Or GET
data:"id=12&name=abc",
dataType:"xml", // Default type - text
url:"/search/searchRecords", // URL of service
success: function (data){
}
});
If you use ASP.NET MVC, you can call a asp function direct. But with asp-classic, you only call a asp function through a service.
$.ajax({
type: "POST",
url: URL + "index.php/phpService/SaveClient/" + controllerVM_.TokenKey(),
data: JSON.stringify(ko.toJS(params)),
contentType: "application/json",
async: true,
dataType: 'json',
cache: false,
success: function (response) {
if (response.GetClientsResponse.Result != "Invelid Tokenkey !!!") {
}
else {
window.location.assign("Login.html");
}
},
error: function (ErrorResponse) {
if (ErrorResponse.statusText == "OK") {
}
else {
alert("ErrorMsg:" + ErrorResponse.statusText);
}
}
});