0

In my website I want to show tooltips on different parts of web page in order to guide user how that part work. So I am using simple jquery tooltip and fetching content of tooltip using ajax. Content contains some text,checkbox of "Do not show this message again" and "Got It" button. I want to perform some php stuff when user click on "Got it" button. That is, once user clicks on button and if he has checked the checkbox, he'll will never be shown tooltip again or until he logs out (in case he has not checked checkbox). Just to close tooltip is not an issue but perform php stuff(I am using Codeigniter framework) is where i am stucked. Here is my jquery code

$('.timeline').tooltip({
show: null,
hide: {effect: "",
  },
content:function(callback) { 
    $.get('<?php echo site_url('candidate/timeline_tooltip'); ?>',
    {},
    function(data){
        callback(data); 
    });
},
open: function( event, ui ) { ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );},
position: {
                  my: "center right-20",
                  at: "left top",
                  using: function (position, feedback) {
                      $(this).css(position);
                      $("<div>")
        .addClass("arrow")
        .addClass(feedback.vertical)
        .addClass(feedback.horizontal)
        .appendTo(this);
                  }
              },
close: function( event, ui ) {
ui.tooltip.hover(
    function () {
        $(this).stop(true).fadeTo(400, 1); 
    },
    function () {
        $(this).fadeOut("400", function(){ $(this).remove(); })
    }
  );
}

});

And here is code of content page(which i am fetching using ajax)

<form action="" method="post" name="tt_timeline" class="addformClass" id="tt_timeline">
<div style="margin: 20px auto 0px; ">
    <div class="gotItPopup">
        <h1>how it works</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse </p>

        <div class="buttons">
            <input type="checkbox" name="checkbox" id="checkbox" class="chkbox"/><label>Do Not Show This Message Again</label>
            <input type="submit" name="sbtgotit" id="sbtgotit" class="sibmitGotitBtn" value="Got It"/><!--<a href="#" class="btn">Got It</a>-->
        </div>
    </div>
</div>
</form>

Hope that make sense. Any help will be appreciated. Thanks

sahar
  • 41
  • 6
  • What are you asking for here, the ajax to make the request to your php application when the button is clicked, or also the php? The ajax you already have an example of in your tooltip. $.get(). which you can use to post back to the page that rendered your tooltip html, with the form parameters. If you are struggling with that part, you could avoid it by using a cookie and a java-script only solution. – Gavin Dec 06 '13 at 14:52
  • $.get() function is fetching data into tooltip.. Now this tooltip needs to be interactive i.e. i wnat to know if user has clicked checkbox etc – sahar Dec 06 '13 at 15:06
  • The form shown above is content of tooltip. In order to perform php stuff with those form fields and closing tooltip without refreshing page is my objective – sahar Dec 06 '13 at 15:09

0 Answers0