CODEWITHSUNDEEP
javascriptjquery
user1928545
user1928545

Reputation:

jQuery inside html body

I'm working on a little project and it involves displaying a news feed. That news feed is cycled with a PHP loop but that doesn't really matter. The area that I'm having an issue with is the html and the jquery messing it all up. The html is set up like this. And it works perfect fine by itself:

<div class="popup">
<div class="title">
    <a href="#" style="margin:0"><img src="" /></a>
    <a href="#"><?php echo $name; ?> &middot;</a>
    <div id="form">
        <form>
            <input type="hidden" name="event" value="123" />
            <input type="submit" name="reply" class="button" value="Respond" />
        </form>
    </div>
    <div class="clear"></div>
</div>
</div>

There's nothing fancy about the css either. The title class just has some padding and the links are floated to the left. That's why there is a class that clears them at the end.

There is one technicality though. The div title is within a jquery popup box. So when a user clicks on another link the popup div gets displayed. Normally this popup is hidden from view.

I want to use ajax with that form in my html. So I was beginning to build the form and added this code right after the closing div tag for the div id, 'form'. 

<script type="text/javascript">
    $(function() {  
      $(".button").click(function() {  
            //More  
      });  
    });  
</script>

As soon as I put that code in there, everything gets messed up. The popup div is displayed when it shouldn't be. I can't figure out the reason why this is happening. Is it normal with jQuery? Has anyone ever had this problem? Any suggestions?

Thank you

Edit

The complete html that doesn't work

<div id="popup" class="popup">  
<div class="popup-feed">
    <div class="feed-box">
        <div class="feed-box-title">
            <a href="#" style="margin:0"><img src="#" /></a>
            <a href="#">Alex &middot;</a>

            <div id="contact_form">
                <form>
                    <input type="hidden" name="event" value="<?php echo $status["id"]; ?>" />
                    <input type="submit" name="rsvp<?php echo $staus["id"]; ?>" value="<?php echo $rsvpStatus; ?>" />
                </form>
            </div>
<script type="text/javascript">
    $(function() {  
      $(".button").click(function() {  
            //More  
      });  
    });  
</script>
            <div class="clear"></div>
        </div>

        <div class="feed-content">
            <?php /*Content*/ ?>
        </div>
    </div>
</div>
</div><script type="text/javascript">$(function () { $('#popup').modalPopLite({ openButton: '#1', closeButton: '#close', isModal: false }); }); </script>

The javascript for it http://alexkonetchy.com/example/modalPopLite.php and http://alexkonetchy.com/example/popup.php

The css http://alexkonetchy.com/example/popup.css

Note none of that javascript or css code is mine

Upvotes: 0

Views: 2327

Answers (1)

optimisticupdate
optimisticupdate

Reputation: 1689

I've created a small fiddle demo for you. You have to prevent the default button click event.

$(function() {  
      $(".button").on('click', function(event) {  
            //More  
          alert('Your Ajax goes here');
          event.preventDefault();
      });  
    });

http://jsfiddle.net/K3fxq/

Upvotes: 1

Related Questions