We help IT Professionals succeed at work.

updating data in element without page refresh

max7
max7 used Ask the Experts™
on
greetings,

I ask this question realizing that there is probably an obvious solution of which I am ignorant, so please don't be surprised if that is the case.

My website allows users to vote for contestants.  I make an ajax call to a web service which checks if the user has already voted in the last 24hrs and if they have not, their vote is recorded for the contestant of their choice.  All this is initiated once they click on the "Vote For This Entry" element.

Problem is, the vote counter only displays the new vote on the page after the page has been refreshed manually.  I want to display the new vote immediately.

When the page loads initially (i.e. before a user places a new vote), I'm successfully bringing in the the voting stats which have been previously recorded for any particular contestant profile.   But what I want is to be able to display new, successful votes immediately after a user places their vote.

Assuming all that was clear, I've tried the following: the success function for the ajax call to the ws and .load().  Neither has worked but it could just be a case that I didn't use them properly or had syntax problems.

I would post code but I don't want to load up unnecessary detail until I hear back from someone and then if requested I can post whatever code is necessary.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Can I see the ajax code for checking if the user has voted in the last 24 hours?  Odds are that a slight modification to that could resolve your issue.
BTW, this should be a 500 point question.

Author

Commented:
ok, here's the function that is called when the user clicks on the vote element:

voteContestant : function() {
		var canvote = Client.canVoteForContestant();
		if (canvote == 'true') {
			Client.vote(1);
			alert(Global.thanksVote);
		} else {
			alert(Global.msgNoVoted);
		}
	},

Open in new window


here's the the canVoteForContestant() with an ajax call:

canVoteForContestant : function() { 
		var data = $.ajax( {
			type : "POST",
			url : WSDOMAIN_URL + 'client/check-contestant-vote-status/',
			data : 'campaign_id=' + Global.Id + '&contestant_id='
					+ Global.User[0].contestant_id,
			dataType : "json",
			async : false
		}).responseText;
		if (data != null) {
			data = JSON.parse(data);
			return data[0].retval;
		}
		return null;
	},

Open in new window


and then the vote function():

vote : function(voteValue) {
		if (voteValue == null) {
			return null;
		}
		voteValue = parseInt(voteValue);
		$.ajax( {
			type : "POST",
			url : WSDOMAIN_URL + 'contestants/vote/',
			data : 'campaign_id=' + Global.Id + '&contestant_id='
					+ Global.User[0].contestant_id + '&our_id='
					+ Client.logged_our_id + '&vote_value=' + voteValue,
			dataType : "json"
		});
		return this;
	},

Open in new window


Let me know if you need to see anything else or have additional questions ... and thanks for the response!


This is perfect.  Your ajax is using a json packet return which means we can easily adapt that to include vote count information.

Could you include the scripting that is referenced in the ajax function:

url : WSDOMAIN_URL + 'client/check-contestant-vote-status/',
Oh, and I will also need the scripting for the voting function:

url : WSDOMAIN_URL + 'contestants/vote/'

Author

Commented:
>>>Could you include the scripting that is referenced in the ajax function: .... Oh, and I will also need the scripting for the voting function:

Hmmm, I'm not clear on exactly what you need.  Both those urls are calling to the ws and as such are php.  Am I misunderstanding what you are asking for?
OK, if the scripting language is php, there should be a php file that is referenced through those URL's.  I need to see the content of those files.
If you don't know where to find those, try adding an alert to your function:

canVoteForContestant : function() {
     alert( WSDOMAIN_URL + 'client/check-contestant-vote-status/');
     alert(WSDOMAIN_URL + 'contestants/vote/' );
            var data = $.ajax( {
                  type : "POST",
                  url : WSDOMAIN_URL + 'client/check-contestant-vote-status/',
                  data : 'campaign_id=' + Global.Id + '&contestant_id='
                              + Global.User[0].contestant_id,
                  dataType : "json",
                  async : false
            }).responseText;
            if (data != null) {
                  data = JSON.parse(data);
                  return data[0].retval;
            }
            return null;
      },

Try to execute a vote.  The dialog boxes should pop up telling you the exact url's these files should be.
You will then need to trace where these files are in your local files, and provide me with their content.

If you still are having problems, try sticking the url's into a browser and see if it gives you an error.  The error should note the location of the file, or give you some content to try and search for.

Author

Commented:
This is interesting ... so basically, to do what I want (i.e. update instantly the vote count display in the HTML) isn't possible only modifying the js functions I have shown you?  I was under the impression this was possible without going into the php backend.  
Finally, if you are using a code editor with comprehensive search functions like Dreamweaver, try searching your site for "campain_id".  You should be able to find both files using this method.  You can identify them because the content will reflect handling of $_POST data and include a PHP json_encode reference.
No.  All your javascript does is handle the transmission and receipt of data from the PHP backend.  If you want more information than you are currently receiving, you need to modify the PHP backend.
Didn't I tell you this was a 500 point question?  Now you know why.
Sandeep KothariProject Lead

Commented:
check the bolded part... is it valid ?

 canVoteForContestant : function() {
                var data = $.ajax( {
                        type : "POST",
                        url : WSDOMAIN_URL + 'client/check-contestant-vote-status/',
                        data : 'campaign_id=' + Global.Id + '&contestant_id='
                                        + Global.User[0].contestant_id,
                        dataType : "json",
                        async : false
                }).responseText;
                if (data != null) {
                        data = JSON.parse(data);
                        return data[0].retval;
                }
                return null;
        },

Author

Commented:
>>>check the bolded part... is it valid ?

Well, I can tell you that it is working as it is but I'm not sure if that is what you are really asking (i.e. valid coding vs coding which isn't valid to standards but works nonetheless).
Sandeep KothariProject Lead

Commented:
ok trying removing that .responseText from the code... and check

Author

Commented:
Based upon this post, I was to craft a solution with a buddy of mine who writes back-end code.  Thank you very much for the push in the right direction!
No problem.  I'm glad you were able to access that PHP code!