Turn Regular Javascript Into jQuery

Question

I have some code that involves clicking on a button and either you are logged in and you go to the next page or you are logged out and you get an alert. I have never liked onClick inside HTML and so I would like to turn this around into clicking on the id and having the jQuery do its magic.

I understand the click function of jQuery, but I don't know how to put do_bid(".$val["id"]."); down with the rest of the Javascript. If I haven't given enough information or if there is an official resource for this then let me know.

<li class='btn bid' onclick='do_bid(".$val["id"].");'> Bid </li>

<script>
    //Some other Javascript above this
    function do_bid(aid)
    {
        var loged_in = "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>";
        if(loged_in=="")
        {
            alert('You must log in to bid!');
        }
        else
        {
            document.location.href="item.php?id="+aid;
        }
    }
</script>

UPDATE: This is the entirety of the Javascript code. I think none of the answers have worked so far because the answers don't fit the rest of my Javascript. I hope this helps

<script language="JavaScript">
    $(document).ready(function(){
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "" + s + "";
}
function CountBack() {
<?
for($i=0; $i<$total_elements; $i++){
echo "myTimeArray[".$i."] = myTimeArray[".$i."] + CountStepper;";
}
for($i=0; $i<$total_elements; $i++){
echo "secs = myTimeArray[".$i."];";
echo "DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,1000000));";
echo "DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));";
echo "DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));";
echo "DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));";
echo "if(secs < 0){
if(document.getElementById('el_type_".$i."').value == '1'){
document.getElementById('el_".$i."').innerHTML = FinishMessage1;
}else{
document.getElementById('el_".$i."').innerHTML = FinishMessage2;";
echo "  }";
echo "}else{";
echo " document.getElementById('el_".$i."').innerHTML = DisplayStr;";
echo "}";
}
?>
if (CountActive) setTimeout("CountBack()", SetTimeOutPeriod);
}
function putspan(backcolor, forecolor, id) {
document.write("<span id='"+ id +"' style='background-color:" + backcolor + "; color:" + forecolor + "'></span>");
}
if (typeof(BackColor)=="undefined")     BackColor = "white";
if (typeof(ForeColor)=="undefined")     ForeColor= "black";
if (typeof(TargetDate)=="undefined")    TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined") DisplayFormat = "%%D%%d, %%H%%h, %%M%%m, %%S%%s.";
if (typeof(CountActive)=="undefined")   CountActive = true;
if (typeof(FinishMessage)=="undefined") FinishMessage = "";
if (typeof(CountStepper)!="number")     CountStepper = -1;
if (typeof(LeadingZero)=="undefined")   LeadingZero = true;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0) CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
var myTimeArray = new Array();
<?  for($i=0; $i<$total_elements; $i++){?>
ddiff=document.getElementById('el_sec_'+<?=$i;?>).value;
myTimeArray[<?=$i;?>]=Number(ddiff);
<? } ?>
CountBack();
           function do_bid(aid)
    {
        var loged_in = "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>";
        if(loged_in=="")
        {
            alert('You must log in to bid!');
        }
        else
        {
            document.location.href="item.php?id="+aid;
        }
    }
}</script>

You shouldn't have class twice, it should be class='btn bid'. — James Montagne
– James Montagne, Commented Jan 13, 2012 at 21:50

ShankarSangoli · Accepted Answer · 2012-01-15 01:19:41Z

7

If you want to attach click event handler using jQuery. You need to first include jQuery library into your page and then try the below code.

You should not have 2 class attributes in an element. Move both btn and bid class into one class attribute.

Markup change. Here I am rendering the session variable into a data attribute to be used later inside the click event handler using jQuery data method.

PHP/HTML:

echo "<li class='btn bid' data-bid='".$val["id"]."'>Bid</li>";

JS:

$('.btn.bid').click(function(){
    do_bid($(this).data('bid'));
});

If you don't want to use data attribute and render the id into a JS variable then you can use the below code.

var loged_in = "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>";
$('.btn.bid').click(function(){
     if(!loged_in){ 
         alert('You must log in to bid!'); 
     }
     else{
         do_bid(loged_in); 
     }
});

edited Jan 15, 2012 at 1:19

answered Jan 13, 2012 at 21:51

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ShankarSangoli Over a year ago

@CaryHartline - Can you tell me where is the problem? I can modify to make it work as per you.

ShankarSangoli Over a year ago

And in the markup did you use bid as an id or added into the class?

Brad Christie · Accepted Answer · 2012-01-13 21:53:18Z

2

First, you need to make the <li> have the data you need to send, which I would recommend using the data attributes. For example:

echo "<li class=\"btn bid\" data-bid=\"{$val['id']}\">Bid</li>";

Next, you need to bind the click and have it call the javascript method do_bid which can be done using:

function do_bid(bid){
  //bid code
}
$(function(){
  // when you click on the LI
  $('li.btn.bid').click(function(){
    // grab the ID we're bidding on
    var bid = $(this).data('bid');
    // then call the function with the parameter
    window.do_bid(bid);
  });
});

answered Jan 13, 2012 at 21:53

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

2 Comments

James Montagne Over a year ago

Why use window.? The function is global so it is accessible without that.

Brad Christie Over a year ago

I tend to do it for the purpose of being explicit and so when it comes down to future modifications i know where the definition lies. It's personal preference, but I also tend to use the thisprefix in my objects as well.

jeroen · Accepted Answer · 2012-01-13 21:52:19Z

1

Assuming that you have multiple of these buttons, you could use the data attribute to store the ID:

<li class='btn' class='bid' data-id='<?php echo $val["id"]; ?>'>

jQuery:

var clicked_id = $(this).data('id');     // assuming this is the element that is clicked on

answered Jan 13, 2012 at 21:52

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

Comments

Gabe · Accepted Answer · 2012-01-13 22:39:25Z

1

I would add the id value your trying to append as a data attribute:

Something like:

<li class='btn' class='bid' data-id='.$val["id"].'>

Then bind the event like this:

$('.bid').click(function(){

    var dataId = $(this).attr('data-id');
    doBid(dataId);


});

edited Jan 13, 2012 at 22:39

answered Jan 13, 2012 at 21:52

Gabe

50.6k29 gold badges147 silver badges182 bronze badges

Comments

user400654 · Accepted Answer · 2012-01-13 21:52:46Z

0

You can store the Id in a data- attribute, then use jQuery's .click method.

<li class='btn' class='bid' data-id='".$val["id"]."'>
Bid
</li>
<script>
$(document).ready(function(){
  $("li.bid").click(function(){
    if ("" === "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>") {
      alert('You must log in to bid!');
    }
    else {
      document.location.href="item.php?id=" + $(this).data("id");
    }
  });
});
</script>

answered Jan 13, 2012 at 21:52

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Comments

Srihari · Accepted Answer · 2013-07-11 04:18:00Z

0

If you are still searching for an answer to this, I put a workaround. If data is not working for you, try the html id.

A working example is here: http://jsfiddle.net/aVLk9/

answered Jul 11, 2013 at 4:18

Srihari

7761 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

Turn Regular Javascript Into jQuery

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related