I am adding some custom tabs to a jquery ui tab control.
$("#tabs").tabs("add","#tabContent0","CLICK ME TO CHANGE PAGE",0);
$('a[href="#tabContent0"]').attr("href","javascript:window.location='http://www.google.co.uk';");
Yes this is a bit of a hack, but it is exactly what i need and provide a nice way to give links back to previous parent pages.
jquery throws the following exception: "jQuery UI Tabs: Mismatching fragment identifier."
This is thrown on the line which appears to attempt to make the tab container visible in jquery ui (exact line wont help as is minified and custom build from official site).
Obviously im just redirecting but jquery has additional code to select the tab (which doesnt exist). In internet explorer, if the user has script errors enabled they will see the exception be thrown just before the window location changes, which I just cant have happen.
I cant put try catch around this code because it is the code inside jquery ui that throws the exception.
Is there anyway I can prevent this exception being thrown or achive the same thing but a different way without having to modified jquery ui ?
Edit: I am now wondering if there is a way to override the on click event hook placed on the element by jquery .. its definitely doing something there i cant see.
Edit: I have to log off now but I have made some progress, if someone can just help me get the right URL, using this code it prevents the exception, but redirects me to "http://myurl/undefined"
$('#tabs').bind('tabsselect', function(event, ui) {
if(ui.index<2) //ignore this will change to get current tab count -1 (so the end tab is left as it is
{
window.location=$('#'+ui.tab).attr("href"); //attr href is undefined, how do i use ui.tab properly to get the right url
return false;
}
});
It works OK for me in Chrome and IE8.
I also tried this code and it worked:
$("#tabs").tabs("add","#tabContent0","CLICK ME TO CHANGE PAGE",0);
$('a[href="#tabContent0"]').click(function() {
document.location='http://www.google.co.uk/';
});
Instead of changing href attribute, I add a handler on the click event of the new tab. This will make the tab to be switched and then the location changed.
From the jQuery UI docs:
$('#example').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
if( url ) {
location.href = url;
return false;
}
return true;
}
});
Though, jQuery's tabs, uh, method, ought to support passing in a selector for the tabs and panels so you could just make things links, instead of having to kick against the pricks.
Related
I'm having a problem with a href target _blank on my website.
I cannot determine why it is not opening the link in a new tab, in the section: LATEST PROJECTS > Boranito skat and others, in fact, is instead opening the link in the same tab... can someone explore my website and tell me what is happening and how to solve it? I think it does have to be something with the JS but I am not able to find the problem in the Javascript code since I am a javascript rookie and cannot understand properly what the javascript code here does...
from what I have understood due to previous google and StackOverflow research and behavior watching, it is because javascript is handling the event target _blank in a different way, in fact, javascript here is being used for website change( i mean every click you do on the menu, some divs appears, some divs disappears and it is being handled by 3 js classes), already examined the JS files, clicked right-click, used element inspector> elements> event listeners>click event to see which JS files are being triggered while clicking...
see here detailed image
as you can see, two javascript archives are executing while doing the click event:
1: `jquery.pagepiling.min.js. //// 2: animsition.js`
3: scripts.js
so apparently both javascript classes are handling the events: on click, but since I am a newbie in javascript I cannot understand how to handle this or even understand what the JS does to the website ( i am just tinkering with the given template to try to understand it and to customize it better, (and hence, make the target _blank work properly( as exposed before, while clicking the link, it opens the link in the same page) so I come here for some support of you
Here is the code snippet for you to be able to locate easily inside my website the code while using the code explorer in chrome:
<a href="project-detail.html" target="_blank" class="project-box">
<div class="project-box-inner">
<h5>Boranito<br>Skat</h5>
<div class="project-category">House Design</div>
</div>
</a>
however, will leave the javascript source files here since I am requested to give all possible details here to avoid users being in the need of accessing , here are all the 3 javascript classes handling all the template events which I don't know what they do:
(since I am not able to attach the source code of the javascript classes, I will attach a link for each js file so you could check it, thanks in forward.....
Thank you in advance.
Problem
Your script (scripts.js) on line 13 toggle animsition's feature for links: linkElement: "a.project-box". This will add an handler to every a element with a project-box class. The handler is the following code (I've commented for your understanding):
function(event) {
event.preventDefault(); // prevent the default behavior for links (prevent the behavior you want)
var $self = $(this);
var url = $self.attr('href'); // get the url of the link
if (event.which === 2 || event.metaKey || event.shiftKey || navigator.platform.toUpperCase().indexOf('WIN') !== -1 && event.ctrlKey) {
// open the link in a new tab ONLY IF I clicked on it with the middle mouse button or with Ctrl/Cmd pressed
window.open(url, '_blank');
} else {
// Else do the animation and open the link in the same tab
__.out.call(_this, $self, url);
}
}
Fix
To fix your problem, you can either
Change the way you setup Animsition, be aware that it can modify other links/behaviors in your site
Change the class of your link so it is not matched as the linkElement of your Animsition's setup. For example: remove the class of the a element (it will affect the styling) and you will see that the link opens in a new tab.
Appendix
You can find the handler's code in the devtools -> your link element -> handlers -> click.
UPDATE #2: I've implemented a button and UI Bootstrap and got the menu functioning without Angular Routing taking over, however, I can't get the menu to collapse after selecting a menu item and rerouting.
UPDATE: As per the suggestion, I've updated the above listener to this (to no effect):
$('a:not([data-toggle="collapse"])').click(function (e) {
var url = $(e.currentTarget).attr('href') || '#';
if (!(url.charAt(0) == '#')) {
window.location.href = url;
}
});
All of the Angular code for this app seems to be in js/compiled.min.js - if something is wrong, surely it'd start here, right?
I have inherited some work from a previous developer that has some funky code which is causing me a bit of a headache. If you visit http://www.executionists.com/#/ in Chrome and change the viewport to a mobile device, you'll see that the menu doesn't work as it does when it's in a larger viewport.
When you click the menu button Angular tries to route the page which of course results in a 404. I cannot for the life of me figure out why it's trying to route and how to prevent it. Things that I've tried.
Using UI Bootstrap in the manner listed here (under Collapse section): http://angular-ui.github.io/bootstrap/
One thing to note is that I had to put the following fix in place to fix another bug where angular routing was not allowing for browser history to function. A common problem, I have discovered. When I put the fix in place, routing and history function as desired for the entire site, however, I am suspicious of this being the cause of my mobile-friendly collapsible menu bug. The fix:
// This is required for links to work properly with the browser history
$('[ng-app]').on('click', 'a', function() {
window.location.href = $(this).attr('href');
});
I don't know what to do about this or even how to best diagnose the issue.
You are targeting all links with that listener, perhaps be more specific:
$('a:not([data-toggle="collapse"])').click(function (e) {
var url = $(e.currentTarget).attr('href') || '#';
if (!(url.charAt(0) == '#')) {
window.location.href = url;
}
});
I have a page full of links that each AJAX in an article based off an ID. I'm trying to use history.pushstate to mark articles as "visited".
What I've done:
I added a hash to each link with the ID of the article:
Title
Inside my JS function I have something like:
if (window.history && window.history.pushState)
{
window.history.pushState({articleID:"123"}, "Title", "#ID=123");
}
The value inside my href is not used in anyway, I just put it there so that the links would get "visited" CSS. This works well in most browser except of course IE9. Since IE9 does not support window.history, I never expected it to work.
However, my problem is that clicking articles in IE changes the URL to append the hashes on them and this pollutes the history (now have to click back a whole bunch of times to go back).
I know that I could get rid of the hashes and still have back button work (outside of IE), but I'm actually more interested in making sure my links get marked as "visited". Is there anyway to get ajaxy links marked as "visited" without having IE9 behavior compromised?
Try adding this to your onclick handler:
if (event.preventDefault) event.preventDefault(); else event.returnValue = false;
Simply return false; from your onclick handler.
I am using jQuery Mobile to create a site, in the index page I placed here a form for a search. I hooked submit event for ajax post. When ajax success get the resource
(html,<ul>...</ul>), placed in the target container, then trigger the create event for enhance the view. This work fine in the first time. When I click back to index page and search again I got a raw listview without enhance, who can tell me why? ps: I have tried many methods but there is more and more problem, the official document was so poor.
$(document).bind('pageinit',function(){
$("#search").submit(function(){
var searchdata = $("#search").serialize();
$.ajax({
'type':"POST",
'url':"/server/jnulib.php?action=search",
'data':searchdata,
'success':function(data){
$("#searchresultfield > ul").remove();
$("#searchresultfield").html(data).find('ul').trigger('create');
try{
$("#searchresultfield > ul").listview('refresh');
}catch(e){
}
$.mobile.changePage("#searchresult");
//$("div[data-role='header'] > a").
}
});
return false;
});
});
EDIT： Test Url： http://ijnu.sinaapp.com
Another problem: the second ajax request failed and the browser navigate to the ajax target straightly.
You could try changing:
$("#searchresultfield").html(data).find('ul').trigger('create');
to:
$("#searchresultfield").html(data).find('ul').listview().listview('refresh');
Anytime you append or remove elements you need to refresh, and if you remove the whole list, you need to reinitialize it.
Also I have had issues with listview('refresh') rendering improperly if it was not visible.
$(document).on('pageshow','div',function(event, ui){
if($("#searchresultfield > ul").is(":visible")) $("#searchresultfield > ul").listview('refresh');
});
For me, .trigger('create'); always works if applied to the element with data-role="page"
For example
HTML Code
<div data-role="page" id="somePage">
...
</div>
Javascript Code
$('#somePage').trigger('create');
Hope it helps
Try:
$("#searchresultfield > ul").empty();
instead of
$("#searchresultfield > ul").remove();
I think the problem is that jquery mobile loads all pages despite all being from different files into one big page and navigation is based off going to different points in this page, so that when you go onto it the first time the page you access is considered created however when clicking the back button and navigating away from the page that page is still considered created so the event well not fire again,
What I used was:
$('#oppList').live('pageshow',function(event){
getList();
});
Where #opplist is the id of the data-role="page" for the page I just load, this does not matter whether this happens the first time the page is loaded or after because the event is fired whenever the page is displayed.
See Here foe jquery mobile events
Also see here for jquery mobile navigation
Hope this helps !
Maybe you should try to unhook the submit event once it's been handled. And initiate it again once you go back to the page where you were before. Adding eventhandlers multiple times can cause a lot of problems.
I'm using the following function to update the tabs on a jQuery ui tabs widget.
function updateTheTabs(select, disable) {
var selectIdx = vehicleSelectorControl.tabIndexByName(select);
$tabs.tabs('option', 'disabled', [])
.tabs('option', 'disabled', convertToTabIndices(disable))
.tabs('option', 'collapsible', true)
.tabs('select', selectIdx)
.tabs('option', 'collapsible', false)
.tabs('select', selectIdx);
}
I'm toggling the 'collapsible' option to achieve a desired behavior by the client. I also update the content of the tab on tabSelect. My question is I would only like the first tabSelect to actually trigger the call to the server. The 2nd tabSelect is just meant to show the tab. I realize this is a bit of a hack. Other controls on the page affect the tab states and in a certain case, a tab was already selected so the first call wasn't updating its content, hence I made it collapsible, select it (which is actually de-selecting it), set collapsible to false, then selecting the tab (this triggers the update properly). Anyways the client likes the current behavior except that I can see the server is being called twice. I tried breaking the chain in to two pieces and setting a boolean variable in between then checking it when deciding to update the tabs. I didn't quite get the behavior I wanted. Can anyone point me in the right direction here? Again, I don't want to call the server if it's not necessary. I would like a solution that doesn't require changing the 'updateTheTabs' function. Thanks so much for any advice or tips.
Cheers,
~ck in San Diego
I'm not sure I got what you wanted to do, but to the sentence "...except that I can see the server is being called twice", I take that you want to cache the content of the tab.
You may try to set the cache option to true when you initiate the tabs:
$tabs.tabs({cache: true});
It might be easiest to just use a global to keep track of whether or not the tab has been loaded. Then in beforeLoad, check if the tabs has been loaded. If not, load it, otherwise just show it. In example code below, be sure to change 'my-tab' to match the title in the html, i.e. My Tab
var tabLoaded = false;
$("#tabs").tabs({
beforeLoad: function(event, ui) {
if($(ui.panel).attr('id') == 'my-tab' && tabLoaded) {
event.preventDefault();
}
});