<script>
$(document).ready(function () {
setInterval( function() {
$("#myDiv").load(location.href + " #myDiv");
}, 10000 );
});
</script>
<script>
$.ajax({
type: "GET",
url: "/edit-nurse/" + addmission,
success: function (
) {
console.log(response.addmission\[0\]);
$('#amid').val(response.addmission\[0\].amid);
$('#room_list_id_now').val(response.addmission\[0\].roomid);
$('#patient_fname_changeroom').val(response.addmission\[0\].patient_fname);
$('#patient_lname_changeroom').val(response.addmission\[0\].patient_lname);
$('#patient_id_changeroom').val(response.addmission\[0\].patient_id);
$('#room_list_numbers_changeroom').val(response.addmission\[0\].room_list_numbers);
$('#room_list_status_changeroom').val(response.addmission\[0\].room_list_status);
$('#nursed_warding').val(response.addmission\[0\].nursed_warding);
$('#checkin').val(response.addmission\[0\].checkin);
}
});
});
});
</script>
When I do console.log the data comes but my modal doesn't show up.
help me...
I want the modal to be able to press normally like before the setInterval code runs.
So basically I have a form modal, I need it to hide and show my second modal upon submission, without leaving the page.
This is what I'm using, I'm not great at this stuff and this is probably an easy fix.
<script type="text/javascript">
$(document).ready(function () {
$('#myModal').modal('show');
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var $form = $('form');
$form.submit(function () {
$.post(
$(this).attr('action'), $(this).serialize(), function (response) {
$('#myModal').modal('hide');
$('#myModal2').modal('show');
},
'json'
);
return false;
});
});
</script>
Upon fetching a result (it is simply a decimal) from a php file using ajax GET, I would like to fade out the old result and fade in a new one.
This is my current attempt to do this, but the problem is is that it will fade in and out occur every 30 seconds rather when there is a change in data.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
function update() {
$.ajax({
type: "GET",
url: "balancefetch.php",
dataType: "html",
success: function(response){
$("#response1").html(response);
}
});
}
setInterval(update, 30000);
update();
setInterval(fadein, 30000);
$("#response1").fadeIn();
setInterval(fadeout, 30000);
$("#response1").fadeOut();
});
You should change your success callback to
success: function(response){
if ($("#response1").html() != response) {
$("#response1").fadeOut(200, function() {
$("#response1").html(response);
$("#response1").fadeIn();
});
}
}
and just have
setInterval(update, 30000);
update();
How to call function when load page and when submit form ?
when i load page i want to call function function xxx()
and when i submit form , i want to call function xxx() again , how can i do that ?
NOTE: this example code call `function xxx()` when submit form only but not call `function xxx()` when load page
index.php
.
.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form method="post" id="f1">
<input type="checkbox" id="one" name="number" value="one" onclick="xxx()">1<br>
<input type="checkbox" id="two" name="number" value="two" onclick="xxx()">2<br>
<input type="checkbox" id="three" name="number" value="three" onclick="xxx()">3<br>
</form>
<div id="overlay" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; padding-top: 25%; cursor: wait; font-size: 24px;">
LOADING
</div>
<div id="result">
<script>
function xxx(){
$('#result').hide();
$('#overlay').show();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#f1').serialize(),
success: function(data){
$('#overlay').hide();
$('#result').show();
$('#result').html(data);
}
});
return false;
}
</script>
</body>
</html>
$(document).ready(function() {
function xxx() {
$('#result').hide();
$('#overlay').show();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#f1').serialize(),
success: function(data) {
$('#overlay').hide();
$('#result').show();
$('#result').html(data);
}
});
return false;
}
xxx(); // called when page is loaded.
$("form#f1").submit(function(event) {
xxx(); // call function when form is submitted.
event.preventDefault();
});
});
//when the page is loaded
$.ready(function(){
// call of your function
xxx();
$('#f1').submit(function(){
// new call of your function
xxx();
});
});
Do this:
$(document).ready(function(){
function xxx(){
$('#result').hide();
$('#overlay').show();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#f1').serialize(),
success: function(data){
$('#overlay').hide();
$('#result').show();
$('#result').html(data);
}
});
return false;
}
xxx();
$("form#f1").submit(function(e){
e.preventDefault();
xxx();
});
});
Or, if you don't want to stop your form from submitting, use this:
$(document).ready(function(){
xxx();
$("form#f1").submit(xxx);
});
You can wrap your JavaScript in
$(document).ready( function() {
/* JS HERE */
});
That only applies when the DOM is ready.
I can't see a submit button in your HTML, but you could bind a click event on that button and then execute a function.
On page load, just run the method on document.ready:
$(xxx);
For a form submission, hook it onto the form submit event:
$("#f1").on("submit", xxx);
Place the function which is supposed to be runned inside of the document ready function.
$(document).ready(function() {
your code here
});
This will call a function, whenever the document is loaded and ready.
In fact that you dont have a submit button in your form, you can do
$("#overlay").click(function() {
your code here
});
This will run the code inside the function, whenever the div with the id #overlay is clicked.
If you want to do it on load with jquery
//Remember to use closure, always!!
(function ($) {
$(document).ready( function () {
function xxx () {
//Do your magic
}
xxx();
$('#your-form').submit(function (e) {
xxx();
//if you want to avoid the default submit
e.preventDefault();
});
})
})(jQuery);
I'm applying some css3 effects using a function it works fine on body page but my problem is how to call that function inside a modal window? created dynamic by Ajax.
this is the function:
$(document).ready(function() {
if (window.PIE) {
$('.secondary, .primary, .light_gray_sub').click(function() {
PIE.attach(this);
alert("alert XXX");
});
}
});
i think what your saying is u want the styling to be on the elements you retrieved through ajax:
$(document).ready(function() {
if (window.PIE) {
go();
}
});
function go(){
$('.secondary, .primary, .light_gray_sub').click(function() {
PIE.attach(this);
alert("alert XXX");
});
}
$.ajax({
url: 'ajax/test.html',
success: function(data) {
//append the data to the body here
go();
}
});