Help get this topic noticed by sharing it on Twitter, Facebook, or email.

can ask on how to make a pop-up form box that is triggered by $().click() function in jquery???

Im trying to create a pop-up box with form that the user can enter they're user detail and i want to trigger it with the $().click. i tried the appAPI.browserAction.setPopup as i thought it would be possible but it didn't work.
1 person has
this question
+1
Reply
  • Shlomo (Official Rep) July 10, 2014 05:45
    Hello Nico,

    If you are referring to opening a button popup (appAPI.browserAction.setPopup), the only way to open the popup is to actually click the button. This is consistent with any browser button that cannot be clicked using jQuery or JavaScript.

    If this is not the case, please can you fill in a few more details about the scenario.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Shlomo!

    i have created a extension that can rate a site and show it average now what i want to achieve to get the email and the user info using a something like a modal box or a pop-up box with a form inside it.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Shlomo (Official Rep) July 10, 2014 08:06
    Hello Nico,

    You can use standard jQuery to inject a modal dialog, either built by yourself or using a standard library (e.g. jQueryUI). So if I understand you correctly, a user click something on the page, and the callback will open the dialog that you injected.

    If you need more assistance with this, please provide the extension id and an example site where we can work on this together.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Shlomo

    actually. i have created a toolbar via html injection that serves as a site rater. what i want to achieve is when i submit or after the page load the modal box will appear.
    this is my extension id http ://crossrider.com/apps/60876/ide. i would really appreciate your help on this.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Shlomo (Official Rep) July 13, 2014 08:09
    Hello Nico,

    Looking at your extension, I think I now understand your question as follows:
    You know how to do all the injecting stuff, but you're caught our by not knowing how to get your extension to display the modal after submitting or page refresh.

    From what I can see, your submit is performed by a jQuery submit method using appAPI.request.post, so that is pretty straight. Simply open the modal in the request's onSuccess callback function.

    The Page refresh is more involved since you need to determine when it's necessary to show the modal. However, since the extension scope state is reloaded every time the page is refreshed, all data is missing from the previous execution. Hence, to achieve your goal I suggest keeping the relevant state information in our local database using appAPI.db.set/appAPI.db.get.

    For example:
    appAPI.ready(function($) {
    // Check if modal required
    if (appAPI.db.get('modalRequired')) {
    // Code to open modal
    openModal();
    }
    ...
    // Submit button
    $(...).click(function() {
    ...
    appAPI.request.post({
    url: ...,
    onSuccess: function(response) {
    ...
    // Code to open modal
    openModal();
    // Set db to indicate showModal if page refreshed
    appAPI.db.set('modalRequired', true);
    ...
    }
    });
    ...
    });

    function openModal() {
    ...
    }
    ...
    });
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Shlomo,

    i have already tried it and it work. but is there any way that page reload will not occur??? and another thing every time i change tab the modal keeps popping out... ???
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Shlomo (Official Rep) July 15, 2014 11:55
    Hello Nico,

    I'm not aware of a way to prevent the page reload, but you can add the tabId to the data saved to prevent the modal popping up on other tabs, as follows:
    appAPI.ready(function($) {
    // Check if modal required
    var modal = appAPI.db.get('modal');
    if (modal.tabId===appAPI.getTabId() && modal.required) {
    // Code to open modal
    openModal();
    }
    ...
    // Submit button
    $(...).click(function() {
    ...
    appAPI.request.post({
    url: ...,
    onSuccess: function(response) {
    ...
    // Code to open modal
    openModal();
    // Set db to indicate showModal if page refreshed
    appAPI.db.set('modal', {
    tabId:appAPI.getTabId(),
    required:true
    });
    ...
    }
    });
    ...
    });
    function openModal() {
    ...
    }
    ...
    });
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Shlomo

    i have already try this and it works thanks a lot. but i have put the appAPI,request.post in the on open function of my modal and it is not working. need some help on this.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Shlomo (Official Rep) July 16, 2014 08:14
    Hello Nico,

    Looking at your code, I can see an open function. It should be a simple matter of adding the appAPI.request.post to the open method's callback function (assuming it has one, I'm not familiar with the modal library you are using).

    I suggest you write the code, and if there are any difficulties let me know and point me in the direction of the snippet where I can see the issue and provide steps for reproducing the problem.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned