Auto Trigger 3rd Button with same classes - javascript

I have create a button via Javascript.
JS Code:
var print_via_pos_button = this.add_action_button({
label: _t('Print via POS'),
name: 'pos_print',
click: function(){
//functionalities
}
});
HTML Code:
NOTE: The is dynamically created and i dont have access to change it.
<div class="pos-actionbar">
<ul class="pos-actionbar-button-list">
<li class="button ">
<div class="icon">
<img src="/point_of_sale/static/src/img/icons/png48/printer.png">
<div class="iconlabel">Print</div>
</div>
</li><li class="button ">
<div class="icon">
<img src="/point_of_sale/static/src/img/icons/png48/go-next.png">
<div class="iconlabel">Next Order</div>
</div>
</li><li class="button ">
<div class="label">
Print via POS
</div>
</li></ul>
</div>
Output:
The 3rd button in the row is Custom and i want to auto-tiggert it on screen initialize, but the problem is and the 3 buttons has the same classes, i think to add a id but name tag didnt add anything inline, so how can i trigger the button. Any solution?
Thanks in Advance

Related

bootstrap javascript how to hide a div in a modal window

I have a bootstrap modal window and I want to hide a div element using javascript.
The bootstrap window is
<div class="modal hide editdialog" id="edit-dialog" data-backdrop="static" style="margin-top: -370px">
<div class="modal-header">
<div style="float: right; margin-right: 2px">
<a id="maximizebuttoneditor" href="#" onclick="maximizeEditor()" rel="tooltip" title="<spring:message code="label.Maximize" />"><i class="icon icon-fullscreen"></i></a>
<a id="restoredownbuttoneditor" style="display: none" href="#" onclick="restoreDownEditor()" rel="tooltip" title="<spring:message code="label.RestoreDown" />"><i class="icon icon-resize-small"></i></a>
</div>
<span id="edit-dialog-title"><spring:message code="label.Edit" /></span>
</div>
<div class="modal-body" style="max-height: 610px; height: 610px;">
<ul class="nav nav-tabs" id="edit-dialog-tabs">
<li><spring:message code="label.General" /></li>
<li id="question-dialog-advanced-tab"><spring:message code="label.Advanced" /></li>
<li><spring:message code="label.Dependencies" /></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="general" >
<div style="margin-top: 20px;" class="general-regex-dialog-questions" id="general-regex-dialog-questions">
<span class="overview-label"><spring:message code="label.RegEx" /></span><br />
<input id="question-dialog-regex" type="text" maxlength="255" />
<span id="question-dialog-regex-invalid" class="validation-error hide"><spring:message code="validation.NoRegExPattern" /></span>
</div>
</div>
<div class="tab-pane" id="advanced">
</div>
<div class="tab-pane" id="dependencies">
</div>
</div>
</div>
<div class="modal-footer">
<a id="btnEditOk" onclick="updateSurvey();" class="btn btn-info"><spring:message code="label.OK" /></a>
<a id="btnEditCancel" class="btn" onclick="selectedElement = null;$('#edit-dialog').modal('hide');"><spring:message code="label.Cancel" /></a>
</div>
</div>
I want to hide the div general-regex-dialog-questions
I use the following javascript code
$("#general-regex-dialog-questions").css({"display": "none !important"});
The div element isn't hidden.
I dont't understand why.
Maybe because it is inside the modal.
You can try it like this:
$(window).ready(function(){
$("#edit-dialog").find("#general-regex-dialog-questions").hide();
//or
$("#edit-dialog").find("#general-regex-dialog-questions").css({"display": "none"});
});
Hope it will help.
This syntax {"display": "none !important"} doesn't work because of the !important.
If you leave out the !important it works fine.
However, if you want to set the importance as well, you can set it like this:
$( '.foo' ).each(function () {
this.style.setProperty( 'display', 'none', 'important' );
});
To hide an element using jquery, you should use the .hide() method. If you want to show it back use .show().
If you might switch beetween the two you could also use .toggle() that will alternate the state (hidden/visible).
If it's still not working, try printing something when calling your event function to make sure your .hide() is called or print out the result of the selection $("#...")
$("#test").click( function(e){
$("#test").hide();
} );
function show() {
$("#test").show()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Title </h1>
<button onclick="show()">Show it back</button>
<div id="test" style="background-color: #CCC">
<h2>Bunch of stuff</h2>
<p>Blabla blabla blabla <br>
Click on me to make me disappear </p>
<span> I'm a span and I dissapear too </span>
</div>
<p> Bunch of stuff that will not disappear neither </p>

Handlebar content dynamic

I have the code below that should display the chat window when I click on the user name in <li>
Code <ul> which contains the User list and received the click
<ul class="chat-contacts">
<li class="online" data-user-id="USERCODE">
<a href="#">
<div class="media">
<div class="media-body">
<div class="contact-name">USERNAME</div>
</div>
</div>
</a>
</li>
</ul>
This is the chat window code. If I put a static content of the <ul> window appears, however when I feed the the <ul> with content dynamic the click does not work. Can someone help me??
<script id="chat-window-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="chat-collapse" data-target="#chat-bill">
<i class="fa fa-times"></i>
<a href="#">
<span class="pull-left">
<img src="{{ user_image }}" width="40">
</span>
<span class="contact-name">{{user}}</span>
</a>
</div>
<div class="panel-body" id="chat-bill">
</div>
<form id="messageForm">
<input id="nameInput" type="hidden" class="input-medium" value="Macbook" />
<input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem" />
</form>
</div>
</script>
Your click event is not working. The event doesn't know the element exists.
This can happen when using jQuery('.chat-contacts li').click(function(){// do something})
I would try setting the click event with this:
jQuery(document).on('click', '.chat-contacts li', function(){
});
Setting the event with on will force jQuery to scan for new elements in the list.

Anchor links for accordion menu on different page not working (Bootstrap)

I have a similar problem to one I posted before. I have a page built in Bootstrap, and I have several links that jump the reader to anchor links that require an accordion menu to open a specific tab. With the help of Stack Overflow I got it to work, but it only works on my computer and not online (my unfinished draft is on verbiadastra.com - I mean the links under "Services").
My other problem is that I can't get it to open a tab that's on a different page rather than the same one (from index.html to contact.html)
Here's the JS Fiddle.
I would really appreciate your help!
Here's the HTML:
<p>Go to Tab1.</p>
<p>Go to Tab2.</p>
<p>Go to Tab3.</p>
<section id="content">
<div class="container">
<div class="row">
<div class="col-xs-12 wow fadeInDown">
<div class="tab-wrap">
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><i class="fa fa-comments"></i>Tab1</li>
<li class=""><i class="fa fa-pencil-square-o"></i>Tab2</li>
<li class=""><i class="fa fa-check-square-o"></i>Tab3</li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade active in" id="tab1">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/services/tab1-1.png">
<br>
<img class="img-responsive" src="images/services/tab1-2.png">
<br>
<img class="img-responsive" src="images/services/tab1-3.png">
</div>
<div class="media-body">
<a name="Tab1"></a>
<h2>Tab1</h2>
<p>Tab1Tab1Tab1.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/services/tab2.jpg">
</div>
<div class="media-body">
<a name="Tab2"></a>
<h2>Tab2</h2> <p>Tab2Tab2Tab2.</p> </div>
</div>
</div>
<div class="tab-pane fade" id="tab3">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/services/tab3.jpg">
</div>
<div class="media-body">
<a name="Tab3"></a>
<h2>Tab3</h2>
<p>Tab3Tab3Tab3 </p>
</div>
</div>
</div>
</div> <!--/.tab-content-->
</div> <!--/.media-body-->
</div> <!--/.media-->
</div><!--/.tab-wrap-->
</div><!--/.col-sm-6-->
</div><!--/.row-->
</div><!--/.container-->
And here's the JavaScript:
var openTab1 = function() {
$('[href="#tab1"]').tab('show');
}
var openTab2 = function() {
$('[href="#tab2"]').tab('show');
}
var openTab3 = function() {
$('[href="#tab3"]').tab('show');
}
Okay, I figured it out - here's my solution in case it helps anyone, and maybe someone can let me know if I should have done it differently:
I deleted the JavaScript code I posted above, and my links no longer call that function on click. Instead, I write a function that is called on page load: It checks if there is any hashtag (#) in the URL, and if there is, I have it compare its value to the ones I'm using to call the different tabs. Then for each tab id, I have it do the function that opens the tab. Then it also jumps down to a div that has the id of the hashtag (instead of the link anchors, which I learned are obsolete in HTML5). Here's the function:
<body class="homepage" onload="TabHash()">
and then:
<script>
var TabHash = function() {
//check if hash tag exists in the URL
if(window.location.hash) {
//set the value as a variable, and remove the #
var hash_value = window.location.hash.replace('#', '');
if (hash_value == "Tab1Name") {
$('[href="#tab1"]').tab('show');
}
if (hash_value == "Tab2Name") {
$('[href="#tab2"]').tab('show');
}
if (hash_value == "Tab3Name") {
$('[href="#tab3"]').tab('show');
}
}
}
</script>
The links look like this:
Go to Tab 1.
Go to Tab 2.
Go to Tab 3.

JQuery Vertical Tabs - create additional link to tab

I'm using this script for jQuery Vertical Tabs.
http://www.scriptbreaker.com/javascript/script/JQuery-vertical-tab-menu
<script language="JavaScript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").hover(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
Here's the HTML for the tabs (links)
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">CSS</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_3">
<div class="link">JQuery</div>
<div class="arrow"></div>
</div>
</div>
I am trying to create an additional link from within a tabs content to another tab.
So this way I can link to the next tab or the last tab, keeping the same functionality as the current tab links (no refresh)
This is my first question on stackoverflow and I've searched far and wide.
I really appreciate all the help. This is a great community.
UPDATE:
Okay, Here is an edit with my full code:
<script type="text/javascript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").click(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_1" style="display:block">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_2">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_3">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_4"><h2 class="wwd_title">
<p>text</p>
</div>
</div>
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">Onefish</div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">Twofish</div>
</div>
<div class="tab" id="tab_menu_3">
<div class="link">Redfish</div>
</div>
<div class="tab last" id="tab_menu_4">
<div class="link">Bluefish</div>
</div>
</div>
In order to make links in the tab contents force the tabs to switch, it helps to understand what is happening under the hood to make them switch by default.
By default, mouseover events force the tabs to change; therefore, the solution is to override the default click event of the hyperlinks in question by binding an event to hyperlinks in the tab content:
Include this code after the JavaScript code you showed in your question, inside the $(document).ready:
$('.tabcontent').find('a').click(function() {
event.preventDefault();
$('.tabs #' + $(this).attr("rel")).mouseover();
});
The event.preventDefault() prevents the hyperlinks from attempting to redirect to the page entered in the href attribute, and the rel attribute is used as a way to bind the hyperlink to the specific tab being linked to.
The rel attribute is used to get the value of the id of the tab so we can programmatically invoke its mouseover event, and switch tabs.
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">CSS</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_3">
<div class="link">JQuery</div>
<div class="arrow"></div>
</div>
</div>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_1" style="display:block">content for tab 1 tab2</div>
<div class="tabcontent" id="tab_content_2">content for tab 2</div>
<div class="tabcontent" id="tab_content_3">content for tab 3</div>
</div>
In the HTML content for your tab, simply include the hyperlink as you normally would, using an href="#" and a rel attribute. The rel attribute must equal the id of the target tab, in this case, tab_menu_2.
It Works as per your requirements
Just add
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
</div>
in any of the tab
Go to this link http://jsfiddle.net/ipsjolly/ssR5f/
There is a similar tab in 3rd tab through which we can jump to 1st tab.

adding an div in autosuggest

i am implementing the bsn autosuggest
can any one tellme how can i add an div in the result the result will be formed like this
<div style="left: 347px; top: 1024px; width: 400px;" class="autosuggest" id="as_testinput_xml">
<div class="as_header">
<div class="as_corner"></div>
<div class="as_bar"></div>
</div>
<ul id="as_ul">
<li>
<a name="1" href="#">
<span class="tl"> </span>
<span class="tr"> </span>
<span><em>W</em>aldron, Ashley<br><small>Leicestershire</small></span>
</a>
</li>
<li>
<a name="2" href="#">
<span class="tl"> </span>
<span class="tr"> </span>
<span><em>W</em>heeler, Bysshe<br><small>Lincolnshire</small></span>
</a>
</li>
</ul>
<div class="as_footer">
<div class="as_corner"></div>
<div class="as_bar"></div>
</div>
</div>
i need to add an diva above the ul as the Category like
<div>Category</div>
i tried
var tmp = _bsn.DOM.createElement("div", {className:"tmp"});
and i need to know how to add values to the div using java script .....
This autocomplete system hasn't been updated since 2007. I think it'd be wise for you to try something that's more up to date. Do you use jQuery? This is what I'd recommend: http://docs.jquery.com/Plugins/autocomplete, it handles all the work for you.
An advantage with using jQuery is that you can utilize Google's CDN: http://css-tricks.com/google-cdn-naming/
There's a very high chance your visitor won't have to download jQuery cause it's already been used on another site.

Categories