Printing result of ajax call on page

If it helps, here is the full function that gets the result:

function getquestion(userid,senderid,reciverid){
				var que5='';
					$.ajax({
							url:"getque.php",
							data:{userid:userid,senderid:senderid,reciverid:reciverid},
							type:'post',
								async:false,
							success:function(reply){
								reply=reply.split("_");
								document.getElementById("dyadque").innerHTML=reply[0];
								document.getElementById("dyadans").innerHTML=reply[1];
							},
							error:function(){}
						});
			}

Select allOpen in new window

Hi Chris,

The function was done by a third party company so I don't want to change the way they've done this as they are still making amendments to the script in other places. I wonder could you show me a way that doesn't alter their script and we can still get this value for the h2 tags.

Thanks so much,

D

You're probably going to need to do it within that script, because that's where the ajax call, and subsequent success() functions are located.

If you want to do it manually (for example, update the content of the h2 on a button click), then you could read the value of #dyadque and set the content of the h2, but you'll still need some way of uniquely identifying the h2.

$('#someButton').click(function() {
     $('h2#myH2').html('Your current Question is ' + $('dyadque').html());
});

Select allOpen in new window

Hey Chris, sure, we can add to the ajax script already created, I just didn't want to change any part of what is already in the function if the third party application is referencing this in any way. Let me know what you think is the best way to go about it and I will make the changes.

I'm now a little confused. Are you saying that you can change the jQuery script or you can't?

If you can, then just implement the changes I hi-lighted earlier. You'll still need to uniquely identify the H2, either by using your current HTML if that's possible, or by adding an ID to it and referencing that in your script.

Thanks Chris, what I meant was I wanted to only add to what the third party developer has done and not change their referencing but this is fine.

I've tested it and it works great now!

I would like to make one other small change to it if that's okay.

I would like to alter what is displayed in the H2 area depending on whether or not the value of the variable is empty.

Here is how I had it working in PHP previously:

<h2><?php
if (!empty($row['question']))
{
    echo 'Your current value is...' . $row['question'] . ' <img src="change_question_little_button.jpg" alt="Pulpit rock" width="60" height="50">';
}
else
{
    echo '<img src="change_question_little_button.jpg" alt="Pulpit rock" width="60" height="50">';
} 
?></h2>

Select allOpen in new window

So if there is a value it would display the text (as we have now) and an image.

If it is empty it will display an image only.

Thanks so much,

D

I would do this with what's called a ternary operator. It goes something like this:

var h2Text = (reply[0].length==0) ?
     "<img src='change_question_little_button.jpg' alt='Pulpit rock' width='60' height='50'>" :
     "Your current value is " + reply[0] + "<img src='change_question_little_button.jpg' alt='Pulpit rock' width='60' height='50'>";

$('#myH2').html(h2Text);

Select allOpen in new window

Basically, it checks a condition, and then assigns a value to a variable, depending on whether it's true or false:

variable = (condition) ? true : false;

Thanks Chris,

So would l do it like this:

var h2Text = (reply[0].length==0) ?true:
     "Your current value is " + reply[0] + "<img src='change_question_little_button.jpg' alt='Pulpit rock' width='60' height='50'>";
var h2Text = (reply[0].length==0) ?false:
"<img src='change_question_little_button.jpg' alt='Pulpit rock' width='60' height='50'>" :
     "Your current value is " + reply[0] + "<img src='change_question_little_button.jpg' alt='Pulpit rock' width='60' height='50'>";


How would I integrate this correctly into the function already there?

Thanks,

D

Not quite like that. The code I posted would just sit inside your success() function. The ternary statement is all 1 statement - with 3 parts (hence the name). My code just splits it over 3 lines.

The ternary statement works to assign a value to a variable. You supply the condition, the value to be assigned if the condition is true and the value to be assigned if it's false.

In the code I posted, the condition is this:

(reply[0].length==0)

which checks to see if reply[0] is empty. If it is, then set the variable to the first part, and if it's not, set it to second part:

var h2text = (reply[0].length==0) ? "reply[0] is Empty" : "reply[0] is NOT Empty";

If reply[0] is an empty string, then the h2text variable with contain a value of reply[0] is Empty. If it's not an empty string, it will contain a value of reply[0] is NOT Empty

Your full success function will look something like:

success:function(reply){
     reply=reply.split("_");
     $('#dyadque').html(reply[0]);
     $('#dyadans').html(reply[1]);

     var h2Text = (reply[0].length==0)]
         ? "<img src='change_question_little_button.jpg' alt='Pulpit rock' width='60' height='50'>"
         : "Your current value is " + reply[0] + "<img src='change_question_little_button.jpg' alt='Pulpit rock' width='60' height='50'>";

     $('#myH2').html(h2Text); //assumes your H2 has an ID of myH2
}

Select allOpen in new window

Thanks Chris, this is not working though and is causing other elements on the page to rearrange.

The H2 tag is definitely set correctly so I'm not sure what the issue might be.

Thanks,

Derek

Could you see anything wrong with the function?

Hey Derek,

Without seeing a live page, I can't see why it wouldn't work. There's nothing in the code that seems obviously wrong.

Thanks Chris,

I will continue to investigate this part and if I can't solve it I will post another question about this part in a couple of days.

Thanks for your help,

Derek

No worries. Good luck with it