Member Avatar for tiekwebstar

i have so many categories and each category have so many items. like a food website. ok now i want to use fancy box. when burger category was click . i want to show different fancy box. and when kebabas category was clicked i want to show another fancybox.. The category is coming from database.. how can i do this ?

my html code is :

<td width="73" style="text-align:right;"><a href="#inline" class="modalbox" onClick="insert(<?php echo $viewItem['item_id']; ?>);"><img src="_assets/images/add.gif" /></a>

    </td>

fancybox :

<!-- hidden inline form -->
<div id="inline">
    <h3>Please select any salad or sauce</h3>
<form id="contact" name="contact" action="#" method="post">

    <p>
      <label>
        <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0" />
        Ketchup</label>
     &nbsp; &nbsp; &nbsp;
      <label>
        <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_1" />
        Mayonnaise</label>
      &nbsp; &nbsp; &nbsp;
      <label>
        <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2" />
        Mint</label>
      <br />
       <br />
      <label>
        <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2" />
        Yogurt</label>
       &nbsp; &nbsp; &nbsp;
      <label>
        <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2" />
        Garlic</label>
      &nbsp; &nbsp; &nbsp;
      <label>
        <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2" />
        Mayo</label>
      &nbsp; &nbsp; &nbsp;
      <label>
        <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2" />
        BBQ</label>
      <br />
    </p>
    <button id="send" onclick="$.fancybox.close();">Select</button>
  </form>
</div>

jquery:

if(result[4] == 7 || result[4] == 8){
$(".modalbox").fancybox();}
else{

}
}
  • 3 Contributors
  • 10 Replies
  • 315 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by AleMonteiro

Dani AI

Generated

A simple, maintainable pattern is to keep one hidden modal container and populate it on click instead of creating one inline block per category. That covers the two approaches seen in the thread: server-side href switching (as tried) and the client-side idea mentioned by ; 's AJAX question points to the recommended solution — load the category-specific options on demand from the server.

Example (client-side, AJAX + single placeholder):

<!-- a single hidden placeholder in the page -->
<div id="modal-placeholder" style="display:none"></div>

<script>
$(document).on('click', '.open-add', function(e){
  e.preventDefault();
  var $btn = $(this);
  var cat = $btn.data('cat');   // render data-cat on each button/server row
  var item = $btn.data('item');

  $('#modal-placeholder').html('<div class="loading">Loading...</div>');

  $.get('/ajax/get-options.php', { cat: cat, item: item })
    .done(function(html){
      $('#modal-placeholder').html(html);
      // Open FancyBox programmatically for the installed version.
      // Example placeholder (replace with the correct call for the site's FancyBox):
      // $.fancybox.open([{ src: '#modal-placeholder', type: 'inline' }]);
    })
    .fail(function(){
      $('#modal-placeholder').html('<div class="error">Could not load options.</div>');
    });
});
</script>

Notes and pitfalls:

  • Server endpoint should return a fragment (only the options markup), not a full HTML page. That keeps insertion simple.
  • Use data attributes (data-cat, data-item) instead of inline onclick handlers. It is easier to maintain and safer.
  • Use delegated handlers (document.on) when rows are generated dynamically.
  • If FancyBox was initialized on page load for static anchors, open the modal programmatically or reinit for the dynamic content; otherwise bind to the placeholder selector directly.
  • Clean up duplicate IDs inside returned HTML and show a loading/error state for better UX.

When categories are few and static, server-rendered inline fragments are fine. For many or changing categories, the AJAX + single-placeholder approach scales best.

Recommended Answers

All 10 Replies

Member Avatar for AleMonteiro

By different fancy box you mean different styles?

Member Avatar for gon1387

Are you getting the data through AJAX call?

Member Avatar for gon1387

By the way, can you clarify if you're using This

Member Avatar for tiekwebstar

Dear, AleMonteiro

i dont need a different style. actually i want to show when burger has clicked so the fancy box option like this saus, yoguart, chilli .. and when cold drink has clicked the fancy box option like coca colla, pepse, merinda etc.

Member Avatar for tiekwebstar

gon1387 yes i m getting the data using ajax

Member Avatar for tiekwebstar

gon1387, yes i m using this fancybox which you linked

Member Avatar for tiekwebstar

i have done my own.

td width="73" style="text-align:right;"><a href="<?php if($catId == 7) { ?> #inline <?php } elseif($catId == 6) { ?> #in <?php } else { ?> # <?php } ?>" class="modalbox" onClick="insert(<?php echo $viewItem['item_id']; ?>);"><img src="_assets/images/add.gif" /></a>
Member Avatar for AleMonteiro

I would suggest to you to change the href with JavaScrit, but it'll work too doing in the back-end.

Member Avatar for tiekwebstar

Dear AleMonteiro,

can you please give me some example. how can i do in the back-end

Member Avatar for AleMonteiro

The way you did is on the back-end, using PHP to set the href.
Isn't that working?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.