I do not know how to add on click events to the custom buttons that bootstrap provides, using jQuery.
For example the data-show-export attribute will give a default button which will export the table contents but how to add on click event to it using jQuery.
<table
id="table"
data-toggle="table"
data-show-export ="true"
>
</table>
You can find a full example on how to use this extension here : https://live.bootstrap-table.com/example/extensions/export.html
Otherwise you can also target the button like Dimitri said $('table[data-show-export="true"] button') and use a onclick event on it.
Related
I need some help for my website.
I have three buttons, I need some help to link them to a content area that I have on the site.
When I press button one the content will change like <h1>Button one<h1> and the the rest of the code will follow . I have already the content setup so only I need is a example for the button code. The rest of the website will be the same.I am using asp.net c# 4.0
I am assuming you want to change the content of Content Area on click of button. For that you need to handle the click event of button and change the content on click function. Read here http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.click.aspx
To make h1 accessible from code-behind:
<h1 runat="server" id="H1Control">Button one<h1>
Then on YourBtn_Click() method assign new value this way:
H1Control.InnerHtml = "New text";
As your suggests,I think u want to change the content within <h1></h1>.Here is the code to do that.
<h1 runat="server" id="something">Button 1</h1>
In code behind inside button click event do this..
something.InnerHTML="new text"
Can this be possible, I created a Jquery grid struts2. What I did was added this in the Jquery grid.
<s:url id="editurl" action="nedit"/>
Then added this options in the
navigator="true"
navigatorAdd="true"
navigatorSearch="true"
navigatorRefresh="true"
navigatorDelete="true"
resizable ="true"
draggableZindex="true"
navigatorAddOptions="{height:525, width:425, readAfterSubmit:true, draggable:true, resizable:true}"
navigatorEditOptions="{height:525, width:425, reloadAfterSubmit:true, draggable:true, resizable:true}"
navigatorDeleteOptions="{height:200, width:200, reloadAfterSubmit:true, draggable:true, resizable:true}"
Then enable the collumn of the grid to be editable by adding editable="true".
<sjg:gridColumn name="serial_Number"
index="serial_Number"
title="Serial_Number"
editable="true"
sortable="true"/>
Because of that, There are now buttons where you can add, edit and delete record. + for add record, pen for edit record.
Is there a way in which when I click the + or pen button I will use my created form to add the new records? I don't want to use the dialogue box with form created when i click the + or the pen button. I want to use my own form.
As a summary, this is what i like to be done. When I click the + it will transfer to my add record action. When the pen button is click it will go to my edit action plus the key records coming from the grid.
Hope my question is comprehensible.
Thanks
You can add addfunc in navigatorAddOptions and
editfunc in navigatorEditOptions so the grid will run your custom function instead.
You can call your own form in your own function.
More info here
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator
I am using the example in the jqGrid Demos page located in Row Editing > Inline Navigator, but I need to have my add button out of the navigator like in example Live Data Manipulation > Add Row. I have already placed the add button:
<table id="editgrid" ></table> <div id="pagered" ></div> <input type="BUTTON" id="bedata" value="Edit Selected" />
and the event
$("#bedata").click(function(){ jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false}); });
My question is, what is the name of the event or the configuration of the jqgrid that I have to use, in order to insert the new row directly in the grid like in the inline navigator example whitout the modal form dialog when I click the betadata button?
I have already set the modal property to false, but it doesn't work,
Any help would be really appreciated
ANSWER:
The name of the event is addRow, I found it in the inline-editing document.
Im using the childbrowser plugin with phonegap and jqtouch.
I have this in a menu list to open webpages:
<a href="#"
onClick="PhoneGap.exec('ChildBrowserCommand.showWebPage','http://
mobile.twitter.com/company');" >
The problem is that the onClick opens the childbrowser as soon as I
touch it, and since I have this in a menulist, I cant scroll the list
up and down without the childbrowser opens.
So how can I change the onClick so it act as a tap instead?
What do I have to do?
Thanks!
What's worked for me is to use jQuery's bind approach and bind a tap event to the element that you'd like to call the Childbrowser. Here's some generic HTML and JavaScript that should give you a sense of what to do:
HTML:
<p class="urlStyle">Your link</p>
JavaScript:
$('p.urlStyle').bind('tap',function() {
window.plugins.childBrowser.showWebPage("http://www.yourlink.com");
});
I have two tables on a webform. On a button click I want to hide one and show the other. I gave them both an Id and I want to set the tables' style="display:"
I tried this in javaScript using a function and document.getelementbyid(id).style.display='none' but it did not work.
any ideas?
Solution:
OnClientClick="javascript: tbl2.style.display='';tbl1.style.display='none';return false;"
I am assuming your tables are .net controls? If so, passing 'id' is not enough as .net does not assign the same server id as client-side id.
You need to access the ClientID property of the .net control server-side to get it's real client-side id:
MyButton.OnClientClick = string.Format("{0}.style.display=''", ControlIWantToHide.ClientID);
The above code shows how you would attach some javascript (please don't call it java!) to a .net asp:button called MyButton and then have a client-side click on that hide a control called ControlIWantToHide.
Note: the above may need tweaking to make it work across all browsers but the .net stuff is the important factor here and I suspect the ClientID is what you needed all along.
Based on your responses to comments, the elements you are toggling are not .net controls but the button triggering them is, so: (based on the function posted by ebrown):
<script type="text/javascript">
function hide(id)
{
var element = document.getElementById(id);
element.style.display='none';
}
function show(id)
{
var element = document.getElementById(id);
element.style.display='block';
}
</script>
You could trigger the toggle of an element in your page by attaching the javascript event handler server-side:
MyButton.OnClientClick = "Show(tbl1);Hide(tbl2);return false;";
..which will display the element with id tbl1 and hide the one with tbl2. This will work providing the elements you are toggling are not .net controls - ie, they do not have the runat="server" attribute. Remember, even though you are adding the javascript code to the asp:button on the server, it is only getting executed on the client when they click. Don't forget to return 'false' as shown above to stop the default post-back behaviour of the asp:button.
I think this should get you on the right track:
<table id="tbl1" onclick="javascript:show('tbl2');hide('tbl1');" >
<tr>
<td>
table 1 stuff
</td>
</tr>
</table>
<table id="tbl2" onclick="javascript:show('tbl1');hide('tbl2');">
<tr>
<td>
table 2 stuff
</td>
</tr>
</table>
<script type="text/javascript">
function hide(id)
{
var element = document.getElementById(id);
element.style.display='none';
}
function show(id)
{
var element = document.getElementById(id);
element.style.display='block';
}
</script>
Also make sure your ID's are unique, I noticed you gave a tr element the name 'tbl1' in your example code. Only the tables need to have the Id's
Edit: this will work for hiding Tr's instead (Just give the tr a unique id and use the same approach). However I believe if a table has an on click event you won't be able to reach the row's onclick event, so you will have to use one or the other.
Asp.net will change the id of any server tag using run="server". If you're trying to hide them using javascript you will have to use the id that asp.net spits out (You can see this using view source). Alternatively you could wrap the table in a div and show/hide the div with your usual method.
If you're using an asp:Table and trying to hide the table in the code behind you can use the .Visible property to achieve the same effect on postback.
Use document.getelementbyid(id).style.display="none" to hide
and document.getelementbyid(id).style.display="block" to show
If these are purely html based tables and not then try using -
document.getElementsByName('table1')[0].style.visibility='hidden';
or
document.getElementsByName('table1')[0].style.visibility='visible';