Avatar of max7
max7
 asked on

updating data in element without page refresh

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.
JavaScriptAJAXScripting Languages

Avatar of undefined
Last Comment
OmniUnlimited

8/22/2022 - Mon
OmniUnlimited

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.
OmniUnlimited

BTW, this should be a 500 point question.
max7

ASKER
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!


All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
OmniUnlimited

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/',
OmniUnlimited

Oh, and I will also need the scripting for the voting function:

url : WSDOMAIN_URL + 'contestants/vote/'
max7

ASKER
>>>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?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
OmniUnlimited

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.
OmniUnlimited

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.
max7

ASKER
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.  
Your help has saved me hundreds of hours of internet surfing.
fblack61
OmniUnlimited

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.
ASKER CERTIFIED SOLUTION
OmniUnlimited

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
OmniUnlimited

Didn't I tell you this was a 500 point question?  Now you know why.
Sandeep Kothari

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;
        },
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
max7

ASKER
>>>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 Kothari

ok trying removing that .responseText from the code... and check
max7

ASKER
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!
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
OmniUnlimited

No problem.  I'm glad you were able to access that PHP code!