Why does my
content
blink?

Question

I'm kind of new to the Jquery world so can someone please help me understand my do my $("#dothis").html("hit"); make the content only blink rather then simply show? i think that the function is repeating it self and that's what's causing it.

html Code:

        <form>
        <select class="plcardFirst">
          <option selected value="">-- Choose One --</option>
          <option value="1/11">A</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="10">J</option>
          <option value="10">Q</option>
          <option value="10">K</option>
            </select>
        <select class="plcardSecond">
          <option selected value="">-- Choose One --</option>
          <option value="1/11">A</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="10">J</option>
          <option value="10">Q</option>
          <option value="10">K</option>
            </select>
        <select class="dlCard">
          <option selected value="">-- Choose One --</option>
          <option value="1/11">A</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="10">J</option>
          <option value="10">Q</option>
          <option value="10">K</option>
            </select>
            <input type="submit" value="Submit" id="Submit">
        </form>
    <div id="dothis"> do this </div>

Script:

     <script type="text/javascript">
           var valueFirst;
           var valueSecond;
           var dlCard;
          $(document).ready(function () {
            $(".plcardFirst").change(function() {
               valueFirst = $( ".plcardFirst" ).val();//player first card;
            });
            $(".plcardSecond").change(function() {
               valueSecond = $( ".plcardSecond" ).val();//player second card
            });
            $(".dlCard").change(function() {
              dlCard = $( ".dlCard" ).val();//dealer card
            });
            $("#Submit").click(function(){
              $("#dothis").html("hit");
            });
        }); 
   </script>

you need to prevent default. http://api.jquery.com/event.preventdefault/ — timo, Oct 29 '14 at 12:37

score 4 · Answer 1 · answered Oct 29 '14 at 12:36

4

It blinks because you are using a submit button and you are not cancelling the submit action so the page submits the form and reloads the page.

$("#Submit").click( function (e) {
    e.preventDefault();  //cancel the click
    $("#dothis").html("hit");
});

answered Oct 29 '14 at 12:36

epascarello

204,599
20
195
236

Thanks ! How can i stop from the page refreshing? – Eyal Livne Oct 29 '14 at 12:38
... replacing `$("#Submit").click(function(){...});` in the question. – Roamer-1888 Oct 29 '14 at 12:42

Steini · Answer 2 · 2014-10-29T14:07:41.737

1

You have to cancel the event and do not submit the form:

$("#Submit").click(function(event){
    $("#dothis").html("hit");
    return false;
});

Alternatively you can simply remove the <form> tag if you are not planning to process the data via PHP and it will not happen anymore.

edited Oct 29 '14 at 14:07

answered Oct 29 '14 at 12:38

Steini

2,753
15
24

return false is event.preventDefault() and event.stopPropagation() so you don't need preventDefault for it to work.. – Michail Michailidis Oct 29 '14 at 13:19
No you need only `return false;` I meant - (or in other words stopPropagation is the one that does it) – Michail Michailidis Oct 29 '14 at 14:04
I think it does not matter in this case but okay~ – Steini Oct 29 '14 at 14:07
I think it matters if the button is an `` or if the event is .submit and not .click (like here: http://stackoverflow.com/questions/26381550/event-preventdefault-doesnt-seem-to-work/26381687#26381687) - a single `return false;` works for all those cases that there is form submission – Michail Michailidis Oct 29 '14 at 14:11

score 1 · Answer 3 · answered Oct 29 '14 at 12:38

Your page is loading again because its a form and you have the button with a type=submit. You need to prevent its normal function by adding an e.preventDefault(). Try this:

<script>
$("#Submit").click(function(e) {
    e.preventdefault();
    $("#dothis").html("hit");
});
</script>

score 1 · Answer 4 · answered Oct 29 '14 at 12:38

1

You are submitting form and hence page get reload / refresh. You can change the button type and then try

<input type="button" value="Submit" id="Submit">

answered Oct 29 '14 at 12:38

Bhushan Kawadkar

28,279
5
35
57

score 1 · Answer 5 · answered Oct 29 '14 at 12:45

1

If you are submitting a form, the page is refreshed, and you get the initial div content.

If you don't want to submit the form, you have to return false in the function.

$("#Submit").click(function () {
            $("#dothis").html("hit");
            return false;
        });

answered Oct 29 '14 at 12:45

Sérgio Mesquita

66
1
2

and if i would like to set in an if/else statement, should the *return false;* be place as is?? – Eyal Livne Oct 29 '14 at 12:56

Why does my content blink?

5 Answers5

Why does my
content
blink?