I have a small website and it is complete. I am just a senior and it is just for a project on learning how to code. Everything works to perfection on the source computer that it was all coded on. I then exported the files and tried on several other computers. The files open up and everything looks okay, but two out of the five HTML buttons won't work. Is there a common reason why this is happening?
This is the java function for the button
$('#createPassSubmit').click(function() {
var create = true;
var location = $('[name="reason"]').val();
var passnumber = $('#passnumber').val();
var note = $('[name="notes"]').val();
var student = $('#studentID').val();
var teacher = $('#teacherID').val();
var dataString = "CreatePass="+create+"&reason="+location+"¬es="+note+"&studentID="+student+"&teacherID="+teacher+"&passnumber="+passnumber;
$.ajax({
method: 'POST',
url: 'ajax.php',
data: dataString,
success: function(data) {
if(JSON.parse(data) === 'ERROR') {
alert("Pass " + passnumber + " is currently in use");
}
else {
$('#form input[type=text]').val('');
$("#form select").val('')
$('#sname').val('');
}
}
});
});
});
Then this is the HTML button its self
<input type="button" id="createPassSubmit" value="Create">
Related
Ths script generates a number:
function updateDue() {
var kmold1 = parseInt(<?php echo $km; ?>);
var kmnew1 = parseInt(document.getElementById("kminput").value);
var tot = kmnew1 - kmold1;
document.getElementById("kmtot").innerHTML = tot;
document.getElementById("kmnew").innerHTML = kmnew1;
document.getElementById("kmold").innerHTML = kmold;
}
The number is displayed on a webpage with this code:
Diff in Km: <span name="kmtot" id="kmtot" value=""></span><br>
This is part of an form that is used to post to an other file.
How can I send the output of id="kmtot" to the next php file?
I have tried:
Diff in Km: <span name="kmtot" id="kmtot" value=""></span><br>
Not working.
<input type="hidden" name="kmtot" id="kmtot">
If I add this, the number of id="kmtot" is not displayed on the webpage, and is not transfered.
Any hints or solutions?
If you are using jQuery, use this code:
$.ajax({
url: 'your-php-file.php',
method: 'post',
data: {
'kmtot': $('#kmtot').val(),
},
success: function(data) {
console.log(data);
}
})
In your-php-file.php, $_POST['kmtot'] will return the value of your element with the ID kmtot.
If you are not using jQuery, you could use Fetch API.
hello i am making a demo of show and hide image on server calls,I have put a loader image on html page and put a gif file as a src,Now image is displaying,But now i want to hide it when i succeed the server call,my code is as below pls help me how to hide it,
html
<center><img src="images/plswait.gif" alt="what image shows" height="50" width="50" ng-show="show===5" ></center>
**js**
app.controller('listingdetailController', function ($http, $scope, $compile, $filter, $sce) {
var SearchTxt = 'cay';
var url = encodeURI("http://www.yahoo.com");
var page = gallery.getCurrentPage();
var FkCategory = page.options.params;
var lat='';
var lng = '';
var img = '';
var title = '';
var phone = '';
var web = '';
var email = '';
$scope.show5 = true;
// console.log("===iside details======"+FkCategory);
$scope.img = "http://caymanafterwork.netcluesdemo.com/cache/business/images/337_224/papagallo1438959641.jpg";
$http({
method: 'POST',
url: API_HOST+'/webservice/listingdetail',
headers:
{
'Content-Type': 'application/x-www-form-urlencoded',
'caymanauth': caymanauth
},
data: "&Catid=" + FkCategory + "&SearchTxt=" + SearchTxt,
contentType: 'application/x-www-form-urlencoded'
}).success(function (data)
{
$scope.show5 = true;
Have you checked this question - AngularJS: ng-show / ng-hide. It offers snippets on how to hide the image.
You already have a success function. All you need to do write some code to set the value of variable which is bound to the relevant image. Do this in the success function.
Why don't you simply set $scope.wait = false on success function of ajax call ?
I am trying to display some ajax response that i receive from a controller each time i scroll at the bottom of the page.
if($(window).scrollTop() == $(document).height() - $(window).height()){
load++;
$.ajax({
type: 'POST',
url: 'get-response',
dataType: 'json',
data: {
"load" : load,
"key" : key
},
success: function(response){
var out = "";
var i;
for(i=0;i<response.length;i++){
out += response[i];
}
document.getElementById("response").innerHTML = out;
}
});
}
The response i get is in JSON format and looks like this :
I am not sure how to traverse the result and display it in html appending each time the results are returned. Can anyone help me with what else i can write in this section to get the results displayed ?
success: function(response){
var out = "";
var i;
for(i=0;i<response.length;i++){
out += response[i];
}
document.getElementById("response").innerHTML = out;
}
Try this, I have added table implementation, you can change into either div
var out = "<table>";
var i;
for(i=0;i<response.length;i++){
out +='<tr>';
out +='<td>'+response[i].brand_name+'</td>';
out +='<td>'+response[i].product_name+'</td>';
out +='<td>'+response[i].selling_price+'</td>';
out +='<td>'+response[i].mark_price+'</td>';
out +='</tr>';
out += response[i];
}
out += "</table>";
If you have no Problem by displaying the objects in json, you just have to write
JSON.stringify(response[i])
Or you could use another for loop
for(var x: response[i]){...}
This should 'pretty-print' it with the space indentation, suitable for viewing in HTML:
success: function(response){
$("#response").html(JSON.stringify(response, null, ' ').replace(/\n/g, '<br>'));
$("#response").css('font-family', 'courier');
};
I'm using Firefox and working on a page when I notice that & turns into &.
Usually I can fix this by using html_entitiy_decode() - but in this case it's not working.
Then I discovered this. The alert is fired once the page is loaded.
Before
After
The data is loaded using PHP / Yii - not through JS / Ajax. I am however adding / removing brands using JS Knockout.
<ul data-bind="template: { name: 'brand-item-template', data: $root.brands}">
<li>
<span id="<?= $brand->id?>" data-bind="text: brand_name, attr: {'id': brand_id}"><?= $brand->name; ?></span>
</li>
</ul>
Update
I've discovered that this JS Knockout code is what makes the change. But this code should not be triggered until I add a brand. So why is this affecting my &s?
It's the self.addBrand = function() that makes the change. If I remove this function and leave the rest as it is, everything is fine. Can it be a Knockout bug?
$('#store.manage-special-offers').exists(function(){
Store.mangeSpecialOffers();
});
function manageBrandListModel() {
var self = this;
var store_id = $('.data-item-id').val();
var exiting_list = $('.brand-list ul').clone();
// Data
self.brands = ko.observableArray(create_list(exiting_list));
self.brand_name = ko.observable();
self.brand_id = ko.observable();
self.store_id = ko.observable(store_id);
// This is the function that makes the chage
self.addBrand = function() {
if (self.brand_name() != "") {
// Update DB
$('#store.manage-brands').exists(function(){
$.ajax({
url: site_url + '/associatebrand',
type: "POST",
dataType: 'json',
data: {
Brand: {
brandId : self.brand_id(),
storeId : self.store_id(),
add : true
}
},
success: function (data) {
// Add brand to GUI list
self.brands.push(new brand(self.brand_id(), self.brand_name()));
self.brand_name("");
}
});
});
}
}.bind(self);
(...)
function create_list(exiting_list){
var arr_list = [];
$(exiting_list).find('li').each(function(e,li){
var id = $(li).find('span').prop('id');
var name = $(li).find('span').html(); // <--- This is the problem. Must be .text()
arr_list.push(new brand(id,name));
});
return arr_list;
}
Can anyone explain why this is happening?
The credit should really go to both JeremyCook and Quentin for pointing me in the right direction.
$(exiting_list).find('li').each(function(e,li){
var id = $(li).find('span').prop('id');
var name = $(li).find('span').html(); // <--- This is the problem. Must be .text()
arr_list.push(new brand(id,name));
});
What I did wrong was that I used .html() and the text was returned in HTML format. Changing this to .text() solved my problem.
All of the examples I've found so far to upload a file with PHP involve:
Choosing a file
Pressing a submit button to upload it (using post).
Here are a few:
Example 1 Example 2.
Is there a way to simply submit the file immediately after it's been chosen so the user doesn't have to click the "Upload" button? I know this is possible. Look at Dropbox's website, or Google Drive. I'm not sure if they use PHP, though.
You have 2 way :
user jquery :
<form id="frm" action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" /><br/>
</form>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#file').change(function(){
$('#frm').submit();
});
})
-->
</script>
use flash uploader.
i hope help you...
HTML File upload buttons are not scriptable for security reasons.
What you want is the File API that is part of HTML5 http://www.w3.org/TR/FileAPI/ which contains capabilities to upload data via AJAX requests, etc.
unfortunately browser support is still spotty, so while you may be able to implement a drag and drop UI like Dropbox on Chrome or Firefox. You will need to have a fallback for IE.
http://www.html5rocks.com/en/features/file_access
Below code will solve your issue regardless of browser incompatibility. I use this very often.
function startUpload() {
var file_button = document.createElement('input');
file_button.type = "file";
file_button.id = "file_button1";
file_button.style.display = "none";
file_button.style.position = "absolute";
file_button.onchange = function() {
var form_data = new FormData();
var file = jQuery(this).get(0).files[0];
form_data.append('file', file);
form_data.append('type', type);
form_data.append('name', 'fileToUpload');
setTimeout(function() {
jQuery.ajax({
url: "/uploadfile.php",
type: "POST",
cache: false,
contentType: false,
processData: false,
data: form_data,
xhr: function() {
var myXhr = jQuery.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', custom_progress, false);
}
return myXhr;
},
success: function(response) {
console.log(response);
}
});
}, 1000);
};
jQuery(document.body).append(file_button);
file_button.click();
jQuery("#file_button1").remove();
}
function custom_progress(e) {
if (e.lengthComputable) {
var x = (e.loaded / e.total) * 100;
jQuery("#progress").html(x + "%");
}
}
Your serverside code would look something like this
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file, PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if ($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
Found this solution here at Ajax file upload and progress