I have implemented a button:
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li class="ui-body ui-body-b ui-li-static ui-body-inherit ui-last-child">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button id="submitButton" type="submit" class="ui-btn ui-btn-a ui-corner-all">Submit</button></div>
<div class="ui-block-b"><button id="cancelButton" data-direction="reverse" type="button" class="ui-btn ui-btn-a ui-corner-all">Cancel</button></div>
</fieldset>
</li>
</ul>
with accompaning JavaScript function that should make the button act as a "back" button:
$(document).on( 'click', '#cancelButton', function() {
window.history.back();
});
All I'm testing at the moment is a transition between two pages, and the button works fine for the first three transitions. On the third transition, instead of going back one page, it goes to a blankpage (I believe this is created by my IDE, NetBeans). When I use the console to call window.history.back() it transitions nicely and does not have any issues whatsoever. My question is if there is some interaction between the button and the window.history.back() call that males it go to a blankpage
To make sure that you're not taken back to the blank page, check if history really exists before firing back action:
if (history.length > 1) {
history.go(-1);
}
Related
im trying to do a basic applescript that move from one tab to another in a web page form. But can't find the right way and im asking for help.
This is the web page (part) code:
<div class="modal-body">
<div id="formContainer">
<input type="hidden" id="impuestosValida" value="0">
<input type="hidden" id="infoAduaValida" value="1">
<input type="hidden" id="cuentaValida" value="1">
<form id="formularioConcepto" novalidate="novalidate" method="post" data-title="Concepto">
<div id="advertenciaConceptos" class="alert alert-warning" style="display:none;">
<strong>¡Advertencia!</strong>
<span></span>
</div>
<ul id="tabsConcepto" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tabConceptos" onclick="validaEdicion(this);">Concepto</a></li>
<li><a data-toggle="tab" href="#tabImpuestos" style="" onclick="deshabilitaBotonAceptar();">Impuestos</a></li>
<li><a data-toggle="tab" href="#tabInfoAduanera" style="display:none;" onclick="deshabilitaBotonAceptar();">Información aduanera</a></li>
<li><a data-toggle="tab" href="#tabCuentaPredial" style="display:none;" onclick="deshabilitaBotonAceptar();">Cuenta predial</a></li>
</ul>
Im trying to do with "do JavaScript", but at this point, im now just guessing with something like this:
tell application "Safari"
activate
do JavaScript "document.getElementById('formContainer').childNodes[0].click()" in document 1
end tell
Any ideas? Really appreciated.
I can’t tell because I don’t see the whole HTML, but I assume you’re trying to click the li tags under the "tabConcepto" ul which would change the tab.
In that case you should change the javascript line to:
do JavaScript "document.getElementById('tabsConcepto').getElementsByTagName('a')[0].click()" in document 1
Change the 0 to which number tab you want to active. Remember to turn on "Allow JavaScript from Apple Events" under Safari’s Develop menu to allow this to run.
I'm using jQuery Tourbus to guide a user through my website. I want it to show up on loading the window the first time someone visits but after that it shouldn't load unless the user clicks on the information icon.
To make sure it auto loads only when the user vists the first time, I did this -
<?php
if($tourbus_verify==0) {
?>
<script type="text/javascript">
$(window).load( function() {
var tour = $('#my-tour-id').tourbus( {} );
tour.trigger('depart.tourbus');
} );
</script>
<?php
}
?>
Upon loading the page, I have a method that enters the value 1 into the database. So, if a user visits for the first time, $tourbus_verify will be 0, so the tour loads when the page loads. If the user has already visited the page before, the $tourbus_verify will be 1 so it won't auto load.
The tour it loads is as follows -
<ol class='tourbus-legs' id='my-tour-id'>
<li data-orientation='centered' data-width='400'>
<p>Hello</p>
<a href='javascript:void(0);' class='tourbus-next'>Next</a>
</li>
<li data-el='#stuff' data-orientation='top' data-width='400'>
<p>That's awesome</p>
<a href='javascript:void(0);' class='tourbus-prev'>Previous</a>
<a href='javascript:void(0);' class='tourbus-next'>Next</a>
</li>
<li data-el='#tourbus-restart' data-orientation='left' data-width='400'>
<p>Bye</p>
<a href='javascript:void(0);' class='tourbus-stop'>End!</a>
</li>
</ol>
Everything works well so far. Now, I have an icon which upon clicking loads the tour -
<div class="row-fluid">
<span style="cursor: pointer;" id="tourbus-restart">
<i class="fa fa-info" aria-hidden="true"></i>
</span>
</div>
And at the end of the page, I have -
<script type="text/javascript">
$("#tourbus-restart").click(function(){
var tourclick = $('#my-tour-id1').tourbus( {} );
tourclick.trigger('depart.tourbus');
});
</script>
This loads the same tour as before but with a different ID -
<ol class='tourbus-legs' id='my-tour-id1'>
<li data-orientation='centered' data-width='400'>
<p>Hello</p>
<a href='javascript:void(0);' class='tourbus-next'>Next</a>
</li>
<li data-el='#stuff' data-orientation='top' data-width='400'>
<p>That's awesome</p>
<a href='javascript:void(0);' class='tourbus-prev'>Previous</a>
<a href='javascript:void(0);' class='tourbus-next'>Next</a>
</li>
<li data-el='#tourbus-restart' data-orientation='left' data-width='400'>
<p>Bye</p>
<a href='javascript:void(0);' class='tourbus-stop'>End!</a>
</li>
</ol>
For some reason, this works well once, but fires an additional instance of the tour the second time, so I end up running two tours at the same time as shown in the image below -
So, I have to click each Next twice to finish the tour. Does anyone know what could be causing this? Thanks!
I see it this way:
The line $(selector).tourbus() is to initialize the plugin and bind some functionality to the element selector. When you put it inside the click event handler, you are initializing the element only when you click. So, if you click twice, then you are initializing twice. I can only assume clicking three times would initialize the plugin three times on the element; and so forth. When you initialize again, the previous instance(s) still remain attached the element.
So, by putting the line outside the click event handler, you are ensuring that the plugin is initialized only once.
The especially strange part about this is that I am not using JS to tweak anything, just the HTML data- attributes. Original Markup:
<div id="navContainer">
<div data-role="collapsible" data-iconpos="right" data-collapsed="true" data-theme="b">
<h4>Go to a different page »</h4>
<ul data-role="listview">
<li class="current">
About Us
</li>
...
</ul>
</div>
</div>
I should note that this is built on top of SilverStripe, a PHP MVC product. It makes heavy use if caching for performance, and sometimes clearing out the cache can fix a weird problem like this. Not seeming to in this case, but I wanted to "put all my cards on the table". Here is the JQM "Enhanced Markup":
<div id="navContainer">
<div class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-theme="b" data-collapsed="true" data-iconpos="right" data-role="collapsible">
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
<a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
Go to a different page »
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
</h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
</div>
</div>
Notice the extra ui-collapsible-heading-toggle:
<a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
<a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
Where is that coming from? And why is it intermittent? Sometimes the page will start to load with it, and then it disappears and the markup ends up as it should. Sometimes it stays there permanently, and the events get all screwed up and the hidden content won't expand. There is nothing strange in the original markup that should be causing it. I'm baffled.
Here is the same exact page - I just refreshed it. Notice now that the markup and behavior is perfect. The content is a listview btw, same as in the original markup.
<div id="navContainer">
<div class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-theme="b" data-collapsed="true" data-iconpos="right" data-role="collapsible">
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-right ui-btn-b" href="#">
Go to a different page »
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
</h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
</div>
</div>
............
You can check it all live at http://m.brooksransom.com if you'd like. Any of the top links will "sometimes" exhibit this behavior. Sometimes if fixes it's rendering error a half-second later. Very strange.
#ezanker it looks like your solution has done it. There was one intermittent, but small, issue left where I had some hanging, but I remembered under the previous static navigation I was using data-ajax="false". As far jquery-mobile being added twice (I assume that's what Ilya Luzyanin meant) that wasn't it, I'm using an overall mobile solution that is part of the SilverStripe MVC framework. Let me know if there's anything else I'm doing incorrectly to give #ezanker full credit on this.
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help
I have a collapsible menu on a website I'm developing, but the collapse is only toggling through once. I click "MENU" the menu expands, click it again, the menu closes, but won't continue toggling.
Here is a link to my development server. Just resize the browser window until the "MENU" button shows up and click it.
http://www.corporateprdev.com/ymcakpt
Here is my menu structure:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
MENU
</a>
<a class="brand" href="/ymcakpt/"><img src="/ymcakpt/themes/responsive/images/y-nav-collapse.png" alt="YMCA::Home" longdesc="images/y-nav-collapse.png" align="left" style="margin-right: 15px;"></a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
<a href="/ymcakpt/index.php/about/" >About</a>
</li>
<li>
<a href="/ymcakpt/index.php/membership/" >Membership</a>
</li>
<li>
<a href="/ymcakpt/index.php/schedules/" >Schedules</a>
</li>
<li>
<a href="/ymcakpt/index.php/contact-us/" >Contact Us</a>
</li>
</ul>
<form class="navbar-search pull-right" action="/ymcakpt/index.php/search/">
<input name="query" type="text" class="search-query" placeholder="Search" style="padding: 2px 8px; margin: 0; width: 210px;">
<input name="Submit" class="submit" type="image" src="/ymcakpt/themes/responsive/images/go-btn.png" value="Go" style="width: 35px; height: 25px;">
</form>
</div><!--/.nav-collapse -->
</div>
</div>
The problem in your case is a collision between two JavaScript files, namely bootstrap-transition.js and ccm.app.js. They are both writing to the jQuery variable $.support.transition. Bootstrap requires that to be an object which includes the property end which contains the browser specific event which is fired at the end of a CSS3 transition. The other file is overwriting the support.transition to only be a boolean.
When the hide method is called, transitioning is set to true and because the name of the event which signals the end of the transition is undefined, the transitioning property never gets reset to false. This causes any future calls to show or hide on the Collapse plugin to short-circuit.
You could try modifying the ccm.app.js to be compatible with Twitter Bootstrap's Transitions plugin. Simply adding a check to not overwrite existing values might suffice.
Another option is trying to ensure that bootstrap-transition.js is loaded after ccm.app.js. As long as ccm.app.js is only looking for truthy values, you should be good.
I had the same problem it was caused by double including of javascript files.
I did include my library javascript files twice, when I removed the repeated ones, it is working well.