1

i have a form that gets spitted out by a loop, its purpose its to display vehicle inventory in managable way, so you can edit anything of it my problem is that when i click on the hide/show it submits the form, and since is empty it redirects me to homepage

it used to work. it actually works when i allow my code to get jquery from google im sure thats not the root problem but it seems to fix it

here is my code for the form

<?php
function manage_vehicles($soldvalue)
{
    $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    echo '<div class="span12">
    <a href=""><button id="deleteall" name="deleteall" class="btn btn-danger" type="submit" >Delete</button></a> &nbsp;';
    if ($actual_link == 'http://localhost/cardealerwins/admin.php?manage_vehicles')
    {
        echo '<a href="admin.php?manage_sold"><button href="admin.php?manage_sold" id="managesold" name="deleteall" 
        class="btn btn-success" type="submit" >Manage sold vehicles</button></a>';
    } 
    else if ($actual_link == 'http://localhost/cardealerwins/admin.php?manage_sold')
    {
        echo '<a href="admin.php?manage_vehicles"><button href="admin.php?manage_vehicles" id="managesold" name="deleteall" 
        class="btn" type="submit" >Manage active vehicles</button></a>';
    }
    echo '</div>';
    //get the total number of vehicles active in the database to loop through them and displaying them to manage
    $query = mysql_query("SELECT COUNT('auto_id') FROM `auto` WHERE `sold` = $soldvalue");
    $all = mysql_result($query, 0);  //store the value so we can run this loop accordingly
    $counter = 1;
    $auto_id = 0; //auto id equal to zero as starting point, it will increase randomly to as many vehicles it will diplay
    while ($counter <= $all)  //ie run for every car
    {
        $fields = 'auto_id, year, make, model, engine, sound_system,mileage, price, vin, att1, att2, att3, att4, att5, att6, att7, att8, 
        att9, att10, att11, att12, att13, att14, att15, picture1, picture2, picture3, picture4, picture5, picture6, picture7, picture8, 
        picture9, picture10, picture11, picture12';
        //check where the auto id is greater then the previously one according to $auto_id which increments
        $data = mysql_fetch_assoc(mysql_query("SELECT $fields FROM `auto` WHERE `auto_id` > $auto_id AND `sold` = $soldvalue"));

        $auto_id = $data['auto_id'];  //here is the magic, we set the auto id to the current one being spitted out so it follows through
        //now with all the $data retrieved from the database we can print car by car with its unique info and ids
        echo '<div id="displaycarwrap" class="span3 container">
        <input type="checkbox" value="'. $data['auto_id'] .'" class="deletebox" /><br />
        <a href="#"><img src="' . $data['picture1'] . '"></a>
        <form action="admin/tool/editvehicle.php" method="post">
            <ul>
                <li>
                    <br><b>Price</b>: <input name="price" type="text" class="span2" value="' . $data['price'] . '">
                </li>
                <li>
                    <button name="delete" class="btn btn-danger" type="submit" >Delete Vehicle</button>
                </li>
                <li>
                    <button name="sold" class="btn btn-success" type="submit" >Mark as Sold</button>
                </li>
                <li>
                    <button class="btn btn-primary" name="editpictures" type="submit" >Edit Pictures</button>
                </li>
                <li>
                    <button type="submit" name="editauto" class="btn  btn-inverse" >Apply Changes</button>
                </li>
            </ul>
            <button class="show_hide btn btn-mini icon-th-list" href="#" rel="slidingDiv'. $counter .'">View details</button>
            <div id="slidingDiv'. $counter .'" class="toggleDiv" style="display: none;">
            <ul> <br />
                <li><b>Year</b>:<br /><input type="text" name="year" value="' . $data['year'] . '" class="span2"></li>
                <li><b>Make</b>: <br /><input type="text" name="make" value="' . $data['make'] . '" class="span2"></li>
                <li><b>Model</b>: <br /><input type="text" name="model" value="' . $data['model'] . '" class="span2"></li>
                <li><b>Mileage</b>: <br /><input type="text" name="mileage" value="' . $data['mileage'] . '" class="span2"></li>
                <li><b>Engine</b>:<br /> <input type="text" name="engine" value="' . $data['engine'] . '" class="span2"></li>
                <li><b>Stereo</b> <br /><input type="text" name="sound_system" value="' . $data['sound_system'] . '" class="span2"></li>
                <li><b>Attribute 1 </b> <input type="text" name="att1" value="' . $data['att1'] . '" class="span2"></li>
                <li><b>Attribute 2</b> <input type="text" name="att2" value="' . $data['att2'] . '" class="span2"></li>
                <li><b>Attribute 3</b> <input type="text" name="att3" value="' . $data['att3'] . '" class="span2"></li>
                <li><b>Attribute 4</b> <input type="text" name="att4" value="' . $data['att4'] . '" class="span2"></li>
                <li><b>Attribute 5</b> <input type="text" name="att5" "value="' . $data['att5'] . '" class="span2"></li>
                <li><b>Attribute 6</b> <input type="text" name="att6" value="' . $data['att6'] . '" class="span2"></li>
                <li><b>Attribute 7</b> <input type="text" name="att7" value="' . $data['att7'] . '" class="span2"></li>
                <li><b>Attribute 8</b> <input type="text" name="att8" value="' . $data['att8'] . '" class="span2"></li>
                <li><b>Attribute 9</b> <input type="text" name="att9" value="' . $data['att9'] . '" class="span2"></li>
                <li><b>Attribute 10</b> <input type="text" name="att10" value="' . $data['att10'] . '" class="span2"></li>
                <li><b>Attribute 11</b> <input type="text" name="att11" value="' . $data['att11'] . '" class="span2"></li>
                <li><b>Attribute 12</b> <input type="text" name="att12" value="' . $data['att12'] . '" class="span2"></li>
                <li><b>Attribute 13</b> <input type="text" name="att13" value="' . $data['att13'] . '" class="span2"></li>
                <li><b>Attribute 14</b> <input type="text" name="att14" value="' . $data['att14'] . '" class="span2"></li>
                <li><b>Attribute 15</b> <input type="text" name="att15" value="' . $data['att15'] . '" class="span2"></li>
                <li><b>Vin</b> <input type="text" name="vin" value="' . $data['vin'] . '" class="span2"></li>
                <li><input type="text" name="auto_id" value="' . $data['auto_id'] . '" class="span2" readonly><li>
            <ul>

            </div>
        </form>
        </div>';
        $counter++; //used for the while loop it self and for classes id uniqueness for javascript
    }
}

?>

here is the code for my jquery:

//function to hide the extra info for the cars in manage vehicles
(function ($) {
    $.fn.showHide = function (options) {

    //default vars for the plugin
        var defaults = {
            speed: 250,
            easing: '',
            changeText: 0,
            showText: 'View details',
            hideText: 'close'

        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
                      $('.toggleDiv:hidden').slideUp(options.speed, options.easing);
             // this var stores which button you've clicked
             var toggleClick = $(this);
             // this reads the rel attribute of the button to determine which div id to toggle
             var toggleDiv = $(this).attr('rel');
             // here we toggle show/hide the correct div at the right speed and using which easing effect
             $(toggleDiv).slideToggle(options.speed, options.easing, function() {
             // this only fires once the animation is completed
             if(options.changeText==1){
             $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
             }
              });

          return false;

        });

    };
})(jQuery);



$(document).ready(function(){

   $('.show_hide').showHide({
        speed: 250,  // speed you want the toggle to happen
        easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
        changeText: 1, // if you dont want the button text to change, set this to 0
        showText: 'View details',// the button text to show when a div is closed
        hideText: 'Close' // the button text to show when a div is open

    });




});

my console is telling me: 

Uncaught ReferenceError: google is not defined

which i dont think has nothing to do with it

errors for the uncaught referenceError

Uncaught ReferenceError: google is not defined
jQuery.fn.extend.addEventListener
jQuery.fn.(anonymous function)
$.fn.showHide managevehicles.js:20
(anonymous function) managevehicles.js:46
fire jquery2.js:3074
self.fireWith jquery2.js:3186
jQuery.extend.ready jquery2.js:433
completed jquery2.js:104
Uncaught ReferenceError: google is not defined
jQuery.fn.extend.addEventListener
jQuery.fn.(anonymous function)
(anonymous function) scripts.js:10
jQuery.event.dispatch jquery2.js:5116
elemData.handle jquery2.js:4787
Young Student
  • 129
  • 9
  • Just a sidenot: __Never use `$(this)` more than once inside a function__. Store it in a variable instead (often called `$this`). Now jQuery will process everything from `this` every time it's called. – Broxzier Aug 14 '13 at 20:39
  • If you say that "it used to work", I'm starting to question your DB/PHP. This `WHERE 'auto_id' > $auto_id AND` - can you explain the `>` ? – Funk Forty Niner Aug 14 '13 at 21:20
  • @Fred that just makes sure that next auto id is at least larger than the last one looped – Young Student Aug 14 '13 at 21:25
  • @YoungStudent Ok, I thought that's what it was, but wasn't entirely certain. Has something changed in your PHP and/or DB since it stopped working, or are you convinced it's jQuery that's at fault? – Funk Forty Niner Aug 14 '13 at 21:28
  • well the google uncaught just revealed that yes it is a jquery problem, im trying hard to fix it – Young Student Aug 14 '13 at 21:33

2 Answers2

0

The Show/Hide button you are using acts by default as a submit button. In fact, any <button> element in a form would submit the form upon clicking.

Try changing

    <button class="show_hide btn btn-mini icon-th-list" href="#" rel="slidingDiv'. $counter .'">View details</button>

to <input type="button">

with the other attributes intact

(OR) alternatively, add this code to your jquery so that submission is disabled by default

$('.show_hide').click(function(e){
     e.preventDefault();
});
Sasanka Panguluri
  • 3,058
  • 4
  • 32
  • 54
  • You're welcome Sasanka. After Googling a bit more, I did find that the OP's use of $_SERVER statements are indeed valid, as per http://stackoverflow.com/a/6768831/1415724 on SO (my mistake). Cheers (*Peace*) – Funk Forty Niner Aug 14 '13 at 20:52
  • i changed button to input button and it didnt worked. im using bootstrap, that could be getting on the way, and im about to try it with js – Young Student Aug 14 '13 at 20:52
  • @YoungStudent try using the JQuery code I provided to disable default submission – Sasanka Panguluri Aug 14 '13 at 20:55
  • @SasankaPanguluri I'm wondering if it has anything to do with the OP's paths to all the JS. As per what I could find on Google. One page being http://forum.jquery.com/topic/uncaught-referenceerror-is-not-defined or may need to load it asynchronous. – Funk Forty Niner Aug 14 '13 at 20:58
  • @Fred No idea, I could not make out much from the OP's code. I am not able to figure out where the Reference Error is happening. If the OP could post all the code, it would be much clearer – Sasanka Panguluri Aug 14 '13 at 21:06
  • @SasankaPanguluri I agree. I did find other similar problems posted on SO, but without full code, as you say is harder to troubleshoot. – Funk Forty Niner Aug 14 '13 at 21:08
  • @SasankaPanguluri The problem may even be inside the actual PHP and/or DB and not jQuery. The OP did say that it "used to work", so if JS didn't change, something else did. – Funk Forty Niner Aug 14 '13 at 21:10
  • @SasankaPanguluri ok i tried belows answer and yours, nothing works, this is really weird... i did added that delete functionality it could be intervening ill upload its code – Young Student Aug 14 '13 at 21:19
  • @SasankaPanguluri Ahhh now i see that my error is involved with that error on console, im a stranger to this problem. can you help me digg this – Young Student Aug 14 '13 at 21:27
0

You can use the event.preventDefault() method to cancel the url redirection like this:

$(this).click(function (event) {
  //Cancel the url redirection caused by clicking the a tag.
  event.preventDefault();

// optionally add the class .toggleDiv to each div you want to automatically close
                      $('.toggleDiv:hidden').slideUp(options.speed, options.easing);
             // this var stores which button you've clicked
             var toggleClick = $(this);
             // this reads the rel attribute of the button to determine which div id to toggle
             var toggleDiv = $(this).attr('rel');
             // here we toggle show/hide the correct div at the right speed and using which easing effect
             $(toggleDiv).slideToggle(options.speed, options.easing, function() {
             // this only fires once the animation is completed
             if(options.changeText==1){
             $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
             }
              });

          return false;

        });

See the example in the JQuery documentation for preventDefault http://api.jquery.com/event.preventDefault/

Edgar Orozco
  • 2,722
  • 29
  • 33