0

It's a weird issue. I've to click on certain buttons (having some ids). The id is passed through Ajax in a PHP script. That id is searched in the database, and the matching entries are passed as data in which is shown in my jQuery lightbox. However, I have to double-click on the button for the first time.

My HTML structure is as follows:

<div class="boxes">
  <a href="#" id="showe3" class="button lfloat">Show it</a>
</div>
<div class="boxes">
  <a href="#" id="showe4" class="button lfloat">Show it</a>
</div>

And the Javascript function is:

$('.button').click( function() {
  $.ajax({
    type: 'POST',                
    url: 'functions/db.php',            
    data: {id: this.id},
    dataType: 'json'
  }).done(function(data) {
    $('#'+data[0]).avgrund({
    //data [0] is both the id being clicked and that stored in the database
      height: 200,
      holderClass: 'custom',
      showClose: true,
      template: '<p>'+data[2]+'</p>' +
        '<div>' +
        '<a href="#" target="_blank" class="b1">'+data[0]+'</a>' +
        '<a href="#" target="_blank" class="b2">'+data[1]+'</a>' +
        '<a href="#" target="_blank" class="b2">More</a>' +
        '</div>'
    });
  });

});

My relevant PHP script:

$id = $_POST['id'];
$result = mysql_query("SELECT * FROM `eventdetails` WHERE `id` = '".$id."'");                      
$array = mysql_fetch_row($result);                            
echo json_encode($array);

I'm running the files on an XAMPP server on Windows 7. Is it normal that I've to double click for the first time? How can I improve it?

EDIT #1 One of the users suggested of using success instead of done in Ajax. Still, it requires a double-click. Here's the javascript code using success in Ajax.

$('.button').click( function() {
  $.ajax({
    type: 'POST',                
    url: 'functions/db.php',            
    data: {id: this.id},
    dataType: 'json',
    success:(function(data) {
      $('#'+data[0]).avgrund({
        height: 200,
        holderClass: 'custom',
        showClose: true,
        template: '<p>'+data[2]+'</p>' +
          '<div>' +
          '<a href="#" target="_blank" class="b1">'+data[0]+'</a>' +
          '<a href="#" target="_blank" class="b2">'+data[1]+'</a>' +
          '<a href="#" target="_blank" class="b2">More</a>' +
          '</div>'
      });
    })
  });
});
dda
  • 6,030
  • 2
  • 25
  • 34
xan
  • 4,640
  • 13
  • 50
  • 83
  • Any reason your not using the success function callback of the ajax call? Also what happens if you just wait? – shapeshifter Jan 07 '13 at 04:40
  • FYI just learnt some stuff! http://stackoverflow.com/a/8840315/1082646 – shapeshifter Jan 07 '13 at 04:41
  • @shapeshifter: I just looked at some answers in SO, and wrote the code. I don't know anything about `ajax`. Secondly, nothing happens if I wait. I mean I tried waiting for 30-40 seconds. – xan Jan 07 '13 at 04:41
  • not normal to have to double click, not apparent in code shown why either. Any errors in browser console? – charlietfl Jan 07 '13 at 04:48
  • @shapeshifter: I've added the `success` function. Please see my edits. – xan Jan 07 '13 at 04:51
  • @charlietfl: No errors in the browser. It correctly shows the results in the Jquery lightbox after 2nd click. – xan Jan 07 '13 at 04:51
  • doesn't make sense to initialize the `avgrund` plugin every ajax call... provide link to docs for it – charlietfl Jan 07 '13 at 04:58
  • @charlietfl: You can get it from github: https://github.com/voronianski/jquery.avgrund.js/ – xan Jan 07 '13 at 05:00
  • 1
    try return false; at the end of the click call. Maybe the default anchor event is firing. – shapeshifter Jan 07 '13 at 05:14
  • OK..you are using plugin incorrectly. It is designed to be called when page loads and it binds a click handler to the selector. If the selector is the same button you are clciking...the first clcik has already occured when you initialize plugin...so plugin won't register that click. You will need to modify plugin to use it the way you want with AJAX content. As it stands now it is not set up for AJAX. – charlietfl Jan 07 '13 at 05:17
  • alternatively if you don't have many `.button` you could load the content in page and use the `template` option to get the content from within the page when you initialize the plugin. This can be done without modifying plugin. Could also load JSOn with page and generate the `template` from that – charlietfl Jan 07 '13 at 05:24
  • **WARNING!** Your code contains an [SQL injection vulnerability](http://en.wikipedia.org/wiki/SQL_injection) -- you are passing raw, unfiltered, unvalidated user input directly into an SQL string. SQL injection is [very easy to fix](http://stackoverflow.com/q/60174/168868). Consider [switching to PDO](http://php.net/book.pdo) or [mysqli](http://php.net/book.mysqli) so you can use [prepared statements with parameterized queries](http://en.wikipedia.org/wiki/Prepared_statement). – Charles Jan 07 '13 at 09:10
  • @charlietfl: As the method works by double-clicking the first time, is there any way I can write a **hack**: _such as the first-click will be taken as a double click and then all the single-clicks will be taken as single-clicks?_ – xan Jan 07 '13 at 11:18
  • i guess you could try to trigger click once plugin iniitalized ` $('#'+data[0]).avgrund({...}).click()` – charlietfl Jan 07 '13 at 17:56

1 Answers1

3

to init avgrund with ajax data set its special param called "openOnEvent" to "false" it will look like 

$.ajax({
            type: 'POST',
            url: 'testpost.php',
            dataType: 'json',
            data: { id: this.id },
            success: function(id) {
                $('#' + id).avgrund({
                    openOnEvent: false,
                    height: 200,
                    template: '<p>content <b>' + id + '</b> here!</p>'
                });
            }
        });

docs - https://github.com/voronianski/jquery.avgrund.js#update-sep-30-2012 test page - http://labs.voronianski.com/test/test-avgrund.html

Dmitri
  • 46
  • 2