Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
I have a JavaScript page that creates toggle buttons when the page loads, but i cannot use those buttons independently now because the id of the button is a column name on my database table. so i cannot know it beforehand, that is why i cannot assign a method or function on each button.
 
This is how the toggle button is created :
 
function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
  return '\n<input' + (tbID ? ' id=\'' + tbID + '\'' : '') + 
    (tbClass ? ' class=\'' + tbClass + '\'' : '') + 
    (tbType ? ' type=\'' + tbType + '\'' : '') + 
    (tbValue ? ' value=\'' + tbValue + '\'' : '') + 
    (onClick ? ' onclick=\'' + onClick + '\'' : '') + '>';
 
}
 
function DisplayButtons(cableData) {
  var newContent = '';
  $.each(cableData, function (i, item) {
    function toggle() {
      $("#tb" + item.CommonCable)
        .clicked ? $('#MyElement')
        .addClass('clickedButton');
      $("#tb" + item.CommonCable)
        .removeClass("clickedButton");
      $('#MyElement')
        .toggleClass('MyClass');
    }
    newContent += createButtons("tb" + item.CommonCable, 
          null, "submit", item.CommonCable, toggle());
  });
  $("#Categories")
    .html(newContent);
}
NOTE : Anyone who can help asap ,how can i assign each function or method to each button ? : Or any other way i can use to create my toggle buttons ?
 
[edit]Code block added - OriginalGriff[/edit]
Posted 5-Feb-13 20:34pm
Edited 6-Feb-13 4:17am
digimanus28.4K
v3

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

I would try using JQuery to bind the button to an event after creating it.
 
 function toggle() {
      $("#tb" + item.CommonCable)
        .clicked ? $('#MyElement')
        .addClass('clickedButton');
      $("#tb" + item.CommonCable)
        .removeClass("clickedButton");
      $('#MyElement')
        .toggleClass('MyClass');
    }
 
function DisplayButtons(cableData) {
  var newContent = '';
  $.each(cableData, function (i, item) {
       newContent += createButtons("tb" + item.CommonCable, 
                   null, "submit", item.CommonCable, toggle());
       $("#Categories").append(newContent);
       $("#tb" + item.CommonCable).click(function() { toggle() });
  });
 
}
 
You might have to clear out $("#Categories") first if you do this more than once, and be careful you append the buttons in the right order, but this should work. Assuming I understood what you were after.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 380
1 Gihan Liyanage 198
2 Sergey Alexandrovich Kryukov 150
3 ChauhanAjay 120
4 BotCar 105
0 Sergey Alexandrovich Kryukov 9,056
1 OriginalGriff 7,981
2 CPallini 2,613
3 Richard MacCutchan 2,121
4 Abhinav S 1,928


Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 6 Feb 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100