CODEWITHSUNDEEP
jquery
user1830984
user1830984

Reputation: 859

Best way to replace image buttons in jquery

Below I have an image button:

<table id="question">
<tr>
<td colspan="2">
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look up Previous Questions)</span>
</td>
</tr>
</table>

Now what I want to do is by using jquery I want to hide the current image Images/plussign.jpg and replace with another image Images/plussigndisabled.jpg in the if statement below:

if (qnum == <?php echo (int)$_SESSION['textQuestion']; ?>) {

}

And then in the document ready function I want it to replace the Images/plussigndisabled.jpg with Images/plussign.jpg

I want to know what is the best way to achieve this in jquery?

UPDATE:

Below is what I tried:

var x = "<img src='Images/plussigndisabled.jpg' width='30' height='30' alt='Look Up Previous Question' class='plusimage' name='plusbuttonrow'/><span id='plussignmsg'>(Click Plus Sign to look <br/> up Previous Questions)</span>" ;

    if (qnum == <?php echo (int)$_SESSION['textQuestion']; ?>) {


     $('#plus th').html($(x)); 

        $("#showGridId").unbind('click').click(function (event) {
        event.preventDefault();
        return false;
    }).css('color', '#BBBBBB');
}

Thanks

Upvotes: 0

Views: 105

Answers (1)

Manse
Manse

Reputation: 38147

Do it all in PHP :

$imgsrc = "Images/plussign.jpg";
if (qnum == $_SESSION['textQuestion']) {
   $imgsrc = "Images/plussigndisabled.jpg";
}

Then output the image like so :

<img src="<?php echo $imgsrc ?>"

You cannot access PHP variables in JavaScript and you cannot access JavaScript variables in PHP ... and I don't see the point of casting if you stored the variable in the session in the first instance !

Update

Not really sure why you are doing this ... but try something like :

var x = "<img src='Images/plussigndisabled.jpg' width='30' height='30' alt='Look Up Previous Question' class='plusimage' name='plusbuttonrow'/><span id='plussignmsg'>(Click Plus Sign to look <br/> up Previous Questions)</span>";

if (qnum == <?php echo (int)$_SESSION['textQuestion']; ?>) {

   $('#plus th').html(x); // no need to create a jQuery object

   $("#showGridId").unbind('click').click(function (event) {
       event.preventDefault();
       return false;
    }).css('color', '#BBBBBB');
}

Upvotes: 3

Related Questions