I have a dropdown list on an update agent profile form where a user can select an item, referred to as a "master" in the database. However, if they select the item "Create New Master", they can enter a value in a blank text field and click a corresponding button. This updates the "Create New Master" value in the database to be whatever the value they entered is, and creates a new value in the database as the new "Create New Master" value. This also updates the agent table in the database to have the new master's ID saved to it, changing whatever the previous ID was. All of the database functionality works, and all the changes are made. However, I need to reload the form with the new values. How can I reload this? We use spring and hibernate, but I'm using Javascript for most of the functionality on this form page.
I've tried using window.location.reload(true), but this doesn't work. If the page kicks the user from the profile and then the user manually re-enters the profile of the same agent, the updated values show, but this is obviously less than ideal.
function addMaster(obj){
//Create lots of relevant variables that are used for the database update.
if(newName == null || newName == ""){
alert("You have to enter a new name to add it.");
}
else{
var jsonURL = '${urlBase}/addMaster/' + newName + '/' + updated + '/' + updateID + '/' + created + '/' + createID + '/' + create + '/' + agentID + '.json?jsoncallback=?';
var xhttp = jQuery.getJSON(jsonURL, function(obj, textStatus){
});
window.location.reload(true);
}
}
This calls to another file, which updates the database accordingly and correctly, but the reload doesn't change the new selection in the dropdown list. It shows the old one, even though checking the database shows that it has truly been updated. How can I make the current database values be reflected on the page without having to make the user leave the profile?
The method jQuery.getJSON is asynch so you reload the page before the call is completed. You should reload the page after that you request completed so you should do something like this:
function addMaster(obj){
//Create lots of relevant variables that are used for the database update.
if(newName == null || newName == ""){
alert("You have to enter a new name to add it.");
}
else{
var jsonURL = '${urlBase}/addMaster/' + newName + '/' + updated + '/' + updateID + '/' + created + '/' + createID + '/' + create + '/' + agentID + '.json?jsoncallback=?';
var xhttp = jQuery.getJSON(jsonURL, function(obj, textStatus){
//this is the success function.. asynch call is done
window.location.reload(true);
});
}
}
Related
I have a button that executes a function:
$("#btnRemove").click(function () {
var name= $("#editAccountName").val();
if (confirm("Are you sure you want to mark " + "''" + name + "''" + " as innactive?")) {
saveAccount(false);
window.location.href = "/RxCard/Search";
}
alert (name + "was marked innactive.")
});
I need the alert to show after the user is redirected to "/Rxcard/Search"
what do i need to change in my code to get it working like that?
on a side note, how would do the same but with a CSS customized alert?
Thanks.
Instead of putting your alert in this code, you need to put it into the script behind Search page. Now you can add a url parameter and then in there check it and show the alert if that parameter is set:
if (confirm("Are you sure you want to mark " + "''" + name + "''" + " as innactive?")) {
saveAccount(false);
window.location.href = "/RxCard/Search?name=" + name;
}
And then add this somewhere (doesn't matter that much):
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
And at last this code goes into your search page code:
function() {
if($.urlParam('name') == true){
alert (name + "was marked innactive.");
}
}();
You cannot run an alert after the location.href has changed because it causes the browser to refresh. Once refreshed, your script is no longer running.
You would need to move your alert script into your search page and perhaps pass the name as a querystring arguement.
You could store the name value using localstorage. The value can be evaluated after the redirection so you can display the dialog with the stored value (if any)
You can't style your alert dialog but you can always create a modal dialog from scratch or by using a web framework / library.
Battlefield Page
In the image above, there is a page that has a battlefield with 20 users on it. I have written JavaScript to capture the data and store it in a MySQL db. The problem comes into the picture when I need to hit next to go to the next page and gather that data.
It fetches the next 20 users with an Ajax call. Obviously when this happens, the script can't log the new information because the page never loads on an Ajax call which means the script doesn't execute. Is there a way to force a page load when the Ajax link is clicked?
Here's the code:
grabData();
var nav = document.getElementsByClassName('nav')[0].getElementsByTagName('td')[2].getElementsByTagName('a')[0];
nav.addEventListener("click", function(){
grabData();
});
function grabData(){
var rows = document.getElementsByClassName('table_lines battlefield')[0].rows;
var sendData = '';
for(i=1; i < rows.length -1 ; i++){
var getSid = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[2].getElementsByTagName('a')[0].href;
var statsID = getSid.substr(getSid.indexOf("=") + 1); //Grabs ID out of stats link
var name = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[2].textContent.replace(/\,/g,"");
var tff = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[3].textContent.replace(/\,/g,"");
var rank = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[6].textContent.replace(/\,/g,"");
var alliance = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[1].textContent.trim();
var gold = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[5].textContent.replace(/\,/g,"");
if(alliance == ''){
alliance = 'None';
}
if(gold == '??? Gold'){
gold = 0;
}else{
gold = gold.replace(/[^\/\d]/g,'');
}
sendData += statsID + "=" + name + "=" + tff + "=" + rank + "=" + alliance + "=" + gold + "#";
}
$.ajax({
// you can use post and get:
type: "POST",
// your url
url: "url",
// your arguments
data: {sendData : sendData},
// callback for a server message:
success: function( msg ){
//alert(msg);
},
// callback for a server error message or a ajax error
error: function( msg )
{
alert( "Data was not saved: " + msg );
}
});
}
So as stated, this grabs the info and sends to the php file on the backend. So when I hit next on the battlefield page, I need to be able to execute this script again.
UPDATE : Problem Solved. I was able to do this by drilling down in the DOM tree until I hit the "next" anchor tag. I simply added an event listener for whenever it was clicked and had it re execute the JavaScript.
Yes, you can force a page load thus:
window.location.reload(true);
However, what the point of AJAX is to not reload the page, so often you must write javascript code that duplicates the server-side code that builds your page initially.
However, if the page-load-code-under-discussion runs in javascript on page load, then you can turn it into a function and re-call that function in the AJAX success function.
Reference:
How can I refresh a page with jQuery?
I have a little application that allows users to search for locations on a mac submit comments to a CartoDB SQL database (PostgreSQL) http://docs.cartodb.com/cartodb-platform/sql-api.html using an HMTL form, JavaScript and SQL (and a little PHP to make the API connection to CartoDB). It works great for vast majority of users, but some submissions are not coming through.
I have no idea why the SQL submissions are working sometimes and not others, works perfectly every time for me. Although I have tracked one issue down to Safari 5.1, but I think it must be happening in other browsers too. The main problem is I can't see any errors ANYWHERE, so it's impossible to track down.
So here are my questions:
1. Is there any way of catching SQL errors and preventing the form from being submitted?
2. Is there any way of seeing SQL errors so I can track down the problem?
Below is a snippet of the code I am using to submit the comments:
var tblName = "comment_collection"
var usrName = "***dney"
// FORM
$("#allSubmitBtn").click(function (e) {
//CHECK IF has a comment
if (!notEmpty(document.getElementById('description1'))) {
alert('Please enter a comment.');
return false;
}
if (!notEmpty(document.getElementById('latlongit1'))) {
alert('Sorry, there has been an error, please search for a location again.');
return false;
} else {
currentNeighborhood = $('#neighborhoodName1').val();
parcel = $('#parcel_id1').val();
address = $('#pre_address1').val();
userAddress = $('#UserAddress1').val();
phoneNum = $('#phone1').val();
emailAdd = $('#emailAddress1').val();
userType = $('#userType1').val();
otherUser = $('#otherUserType1').val();
currentDescription = $('#description1').val();
latlongy = $("input[name='latlongit1']").val();
explainType = $('#explainType').val();
currentProject = selectedCity.name;
commentType = new Array();
$("input:checkbox[name=commentType]:checked").each(function () {
commentType.push($(this).val());
});
var sql = "INSERT INTO " + tblName + " (the_geom, project, description, name,comment_address,parcel_id,phone_number,email_address,comment_type,comment_type_other,user_type,user_type_other,profile_address,flag,loved) VALUES (ST_SetSRID(ST_GeomFromGeoJSON('";
// var a = layer.getLatLng();
// console.log(a);
var sql2 = '{"type":"Point","coordinates":[' + latlongy + "]}'),4326),'" + currentProject + "','" + (currentDescription.replace(/'/g, "''")).replace(/"/g, "''") + "','" + (currentNeighborhood.replace(/'/g, "''")).replace(/"/g, "''") + "','" + address + "','" + parcel + "','" + phoneNum + "','" + emailAdd + "','" + commentType + "','" + explainType + "','" + userType + "','" + otherUser + "','" + userAddress + "','false','0')";
var pURL = sql + sql2;
console.log(pURL);
submitToProxy(pURL);
alert("Your Comments have been submitted");
return true;
}
});
here is the Github repo the tutorial is based off. Security is a MAJOR issue and is mentioned right off the bat with this tutorial. It is more of an illustration than anything, anyone implementing it should modify the scripts to be more secure.
Check out this pull request and try to create a solution from it. It addresses the issue to a degree. It moves more of the query into the PHP scripts and only allows field names in from the browser.
https://github.com/enam/neighborhoods/pull/4
This is incredibly dangerous/bad code. You're building sql on the client and sending it to the server to be executed. What's to stop someone from popping up their js console and doing submitToProxy('DROP DATABASE DATABASE()')?
Boom goes your site, boo hoo, too bad.
And even if you DON'T nuke this code from orbit, just to be sure it's really dead, and keep using it, you can't trap SQL exceptions, because they occur on the server, not in your client. At best your SERVER has to check for errors, and send back an appropriate message, e.g.
result = run_query(dangerous ql from user);
if (error occured) {
return json_encode('error' => true, 'reason' => 'someone set us up the bomb'));
} else {
return json_encode('error' => false, 'data' => query results);
}
and then your client-side ajax has to do
$.ajax(....
success: function (data) {
if (data.error) { alert('boom!'); }
else {... do stuff with data ...}
I am using jquery-cookie library to create cookie with JQuery. How can I update value of the cookie? I need it create new cookie and if the cookie exists to update it. How can I do this?
Code that I got:
v.on('click', function(){
var d = $(this).attr('role');
if(d == 'yes')
{
glas = 'koristan.'
}else {
glas = 'nekoristan.'
};
text = 'Ovaj komentar vam je bio ' + glas;
//This part here create cookie
if(id_u == 0){
$.cookie('010', id + '-' + d);
}
$.post('<?php echo base_url() ?>rating/rat_counter', {id : id, vote : d, id_u : id_u}, function(){
c.fadeOut('fast').empty().append('<p>' + text).hide().fadeIn('fast');
});
})
To update a cookie all you need to do is create a cookie with the same name and a different value.
Edit
To append your new value to the old...
//Im not familiar with this library but
//I assume this syntax gets the cookie value.
var oldCookieValue = $.cookie('010');
//Create new cookie with same name and concatenate the old and new desired value.
$.cookie('010', oldCookieValue + "-" + id);
watch out for this link
http://www.electrictoolbox.com/jquery-cookies/
here you see all important thing you can do with cookies.
if you want to know if an cookie already exists, just use this
if($.cookie("example") != null)
{
//cookie already exists
}
When you edit a datetime column via its datepickup,a window pops up instead of a new tab.
How to do it?
I tried window.open(..) but it just opens a new tab.
I don't know phpmyadmin in particular, but could it be:
window.showModalDialog(...);
showModalDialog("URL"[, arguments[, "features"]])
http://javascript.gakaa.com/window-showmodaldialog-4-0-5-.aspx
It calls a openCalendar function which looks like this:
function openCalendar(params, form, field, type, fieldNull) {
window.open("./calendar.php?" + params, "calendar", "width=400,height=200,status=yes");
dateField = eval("document." + form + "." + field);
dateType = type;
if (fieldNull != '') {
dateFieldNull = eval("document." + form + "." + fieldNull);
}
}
Basically just setting the width and height attributes (btw, if it's opening in a new tab, it's your browser that opens it that way, not the javascript).
You'll need to provide more than just the url: https://developer.mozilla.org/En/DOM/Window.open - take a look at the windowFeatures parameter. They happen to be using the following function:
function openCalendar(params, form, field, type) {
window.open("./calendar.php?" + params, "calendar", "width=400,height=200,status=yes");
dateField = eval("document." + form + "." + field);
dateType = type;
}