I am trying to use Knob with AJAX, and it is working, but the progress bar is not changing, only the number inside real time.
You can check it here: www.skincannon.com
The code is:
HTML:
<input id="val" type="text" value="0" /> <input type="button" value="Change" />
AJAX:
$.ajax({
type: "GET",
url: "currentitemswidth.php",
success: function(msg){
$('#val').val(msg);
}
});
And I am changing the value with ajax, but the bar won't change.
Anybody could help me? If you need further codes just tell me.
I need something like this, but I would like to change it automatically, not by hitting the Change button: http://www.jqueryajaxphp.com/dynamically-animate-jquery-knob/
Thanks
Here i have achieved your requirement with jQuery roundSlider plugin.. I think this is suitable for you, since you can easily customize the appearance and animation style of this slider.. Check the below demo:
Demo
For more details check the demos and documentation page.
Edit:
In the ajax success what value you got, you can assign that value to the slider. Like below:
$.ajax({
type: "GET",
url: "currentitemswidth.php",
success: function(msg){
$('#val').val(msg);
// use the below code to dynamically update the roundSlider value
$("#slider").roundSlider("option", "value", msg);
}
});
Related
im using the https://xvelopers.com/demos/html/paper-panel/panel-element-toast.html
panel... and i trying to show toast after a function..
if i use
<div class="toast"
data-title="Hi, there!"
data-message="Hope you like paper panel."
data-type="success">
</div>
it show a toast correctly at page load...
now, im trying to add this at:
$.ajax({
url: "asd/store-asd",
type: "POST",
data: fd,
processData: false,
contentType: false
}).done(function(resp){
if(resp&& resp.ok){
calendar.refetchEvents();
alert("OK"); **change alert to toast**
clean();
}else {
alert("FAIL");
}
});
how can add it?
PS.: using #if(session('status')) #endif... work too, but i need implement it without reload a page
hey if you've no document how to implement their toaster a work around you can do it place the HTML with display none attribute i.e
<button class="btn btn-primary btn-lg toast-action" data-title="Hey, Bro!" data-message="Paper Panel has toast as well." data-type="info" data-position-class="toast-bottom-right" style='display:none;'>Info Toast</button>
Then you can trigger click on this button by targetting class ".toast-action" also you can update the attributes like message, title etc hope this will work,,, again this is only a work around since you don't have any documentation available and js is also compiled version.
I am stuck in this like I have never before.
My situation : I am making a shopping cart. When user click "Add" button, it posts the form and in the server side i.e inside if(IsPost){....}, corresponding item gets added to the the the cart table in my database.
Everything is fine, except it reloads the page and scrolls back to top. With a little research, I got to know that may be Ajax could help. Then I created a new .cshtml page add-to-cart.cshtnl. Now my current page doesn't reload but it opens add-to-cart.cshtml which is not how I wanted. Now I even tried to learn AJAX and try doing things looking at examples. Nothing helps. Please help!
Here is what my code looks like : P.S I am using razor in webmatrix.
<form method="post" id="productForm" action="~/add-to-cart.cshtml">
<input ............"Input Something.............../>
<button type="submit" id="add-button" >ADD</button>
</form>
At my add-to-cart.cshtml, I don't have anything on the UI. It just processes data.I don't want that page to ever load. It looks something like this:
ifIsPost(){
............ADD item to the cart table of database..............
}
Now I am convinced, AJAX is my solution but how????
Please don't give me incomplete answers. I have already wasted 3 days in it :/
Try this
$('#productForm').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data : $(this).serialize(),
success : function(response) {
//write your code here
},
error : fucntion(response) {
//write your code here
}
});
});
Put this script into <script> tag.
Note: Don't forgot to include jquery in your page.
Here is the complete working solution :
$(function () {
$('#productForm').submit(function (ev) {
var frm = $(this);
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
//Do What Ever You Wanna Do
}
});
ev.preventDefault();
});
});
<div>
<span class="label">1</span>
up
</div>
Javascript
$('.click').click(function(){
//$(this).parent().find('.label').html(2);
$.ajax({
....
success: function(result){
$(this).parent().find('.label').html(2);
}
});
});
if i don't use ajax.post, value in change.. and when i use, it doesn't change.
I don't know what happen? and how can i fix it.
Give me some advices please.
$(this) is not referring to your link (its inside the $.ajax() function). Assign the label element to a javascript variable before you make the ajax call so it can be accessed inside the ajax function.
$('.click').click(function(){
var label = $(this).parent().find('.label');
// or $(this).prev('.label');
$.ajax({
....
success: function(result){
label.html(2);
}
});
I have a page that gets content from other file through ajax, it works perfect, but when navigated through address bar, it s not working as the event is triggered only on click. I ve searched, but i couldnt find a solution that fits my need. I ve given my code. Somebody help.
Profile
<div id="home-content" class="container-fluid"></div>
<script>
function profile(){
$.ajax({
type: "POST",
url: "functions.php",
data: {action:profile},
success: function(response)
{
$('#home-content').html(response);
}
});
}
</script>
All i want is when i enter address like home/#profile , profile page has to be loaded and it also should be navigatable, with history entry for 'profile' page
Please Use this function
<body onload="profile()">
and remove in Onclick funtion
I am sure there are things I haven't read out there, but every search I do just turns up purple links. My goal is to have a form that uses ajax in order to avoid page refresh and avoid submit on manual page refresh. I want to both upload a file and insert data into the database table. I actually have this part down. The problem is that the action is started on page load. I think this is because my ajax function uses #multiform).submit, but if I change that to #submit).submit then the ajax script doesn't send the data to upload.php and I just end up with a blank array being passed to upload.php.
I can make the upload work on click with a button instead of an input for the form submit. That's all without using formdata though. I need to use formdata to also upload the file. The below script does work. I just need it to work after clicking submit, and not automatically when the page loads.
As I'm learning, I'm thinking that formObj=$(this) is referring to the multiform and grabbing the objects, so when I change multiform to submit (this) doesn't work anymore. Is it possible that I just need to change that field somehow? I've been working on this non stop for weeks. I keep getting closer, but still not there. Please help me. Thank you.
my form:
<form name="multiform" id="multiform" action="upload.php" method="POST" enctype="multipart/form-data">
Name: <input type="text" name="dname" value="Ravi"/> <br/>
Age :<input type="text" name="age" value="1" /> <br/>
Image :<input type="file" name="photo" /><br/>
<input type="submit" id="submit" value="Ajax File Upload" />
</form>
my js:
jQuery(document).ready(function($) {
$("#multiform").submit(function(e)
{
var formObj = $(this);
var formURL = formObj.attr("action");
var formData = new FormData($(this)[0]);
$.ajax({
url: formURL,
type: 'POST',
data: formData,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(data, textStatus, jqXHR)
{ alert(data)
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});
e.preventDefault(); //Prevent Default action.
});
$("#multiform").submit(); //Submit the form
});
I figured this out by looking at it backwards. I googled how to make the form submit automatically on page load and found out that $(document).submit() makes a form submit on page load, so I took out $("#multiform").submit(); and now it works. An added note to anyone else who might find this and be working on something similar. For some reason, having an id of submit for input type submit causes the name and age variables to be ignored.