SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Colorbox

  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Colorbox

    Hello everyone.

    Forstly an apology for being such an appalling newbie, but I have a website I would like to tart up a bit with colorbox.

    Essentially the web page uses input boxes and external php scripts to search a mysql database, and I have no clue how to direct the search results into a centred colorbox.

    Here is the code for one of the search options, it calls a plain vanilla php script which does the query and formats the output via html commands. Nothing ver complicated:

    <li>
    <h2> search for city </h2>
    <div align="center">
    <form name="city" action="searchscripts/search_city.php" method="post">
    <input type="text" name="city">
    <input type="submit" name="Submit" value="Search">
    <input type="reset" name="reset" value="Clear">
    </form>
    <br />
    <br />
    (results sorted by country/type/sub-type/surname)
    </div>
    </li>

    Can anyone tell me how to put the search results in a colorbox? Is colorbox even the right choice for a newb? Grateful for any help with this...

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You will have to intercept the submit event:
    Code javascript:
    $('input[type=submit]').submit(function() {
      $.colorbox({href:'search.php?searchstring=' + $(input[name=city]).val()});
      return false;
    });
    BTW, searches normally use GET rather than POST. This can be useful so that users can edit the search string in the address bar. It also doesn't involve sensitive information, so GET is OK. Also, you don't need to have a name attribute for the FORM element, especially since one of the INPUTs already has that name.

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    You will have to intercept the submit event:
    Code javascript:
    $('input[type=submit]').submit(function() {
      $.colorbox({href:'search.php?searchstring=' + $(input[name=city]).val()});
      return false;
    });
    BTW, searches normally use GET rather than POST. This can be useful so that users can edit the search string in the address bar. It also doesn't involve sensitive information, so GET is OK. Also, you don't need to have a name attribute for the FORM element, especially since one of the INPUTs already has that name.
    Hi Raffles,

    Thanks for the suggestions, I took them all. Where would I put the code you suggested above? Somewhere in the input code I gave? Help appreciated.

    BTW, I see you are in Cambridge, loverly spot, I worked for a year at Addenbrooke's a few years ago - love to able to afford to live there permanently...

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You can just put it with any other JS you have, just make sure it's initiated once the DOM is ready:

    Code javascript:
    $(function() {
      $('input[type=submit]').submit(function() {
        $.colorbox({href:'search.php?searchstring=' + $(input[name=city]).val()});
        return false;
      });
    });

    And yes, Cambridge is nice but expensive! I used to live in London and the difference price-wise is not big at all, but the pace of life, the lack of noise and the sheer number of people everywhere are a lot better. Plus it's nice to be able to get pretty much anywhere by bike in about 15 minutes.

  5. #5
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And yes, Cambridge is nice but expensive! I used to live in London and the difference price-wise is not big at all, but the pace of life, the lack of noise and the sheer number of people everywhere are a lot better. Plus it's nice to be able to get pretty much anywhere by bike in about 15 minutes.
    Ahh yes, I remember it all well, there's a certain air of academia about the place, hardly surprising of course....

    As to the code, I put the js function in the header section and still can't get a result. I must be an awful prat. Education will out and I think I just don't have the programming expertise.

    Perhaps I should try plumbing... or brick-laying...

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It's probably because I've been a prat - the submit event happens on the form, not the submit button. So the jQuery selector before .submit() needs to be changed. Change it to this:

    Code javascript:
    $(function() {
      $('form').submit(function() {
        $.colorbox({href:'search.php?searchstring=' + $(input[name=city]).val()});
        return false;
      });
    });
    Note that it will add the behaviour to all forms, I'll leave it to you to choose an appropriate selector for that particular form.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •