<script>
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
a[i].onclick=function()
{
window.location=this.getAttribute("href");
return false
}
}
}
</script>
<a href="link.php" data-target="#ajax" data-toggle="modal"><i class="fa fa-binoculars">
i use this code for iOS webapp and affect all 'a tag', but this code blocks proper operation to bootstrap modal. how can i this code except for modal?
I had an exact same issue and the solution was dead simple.
change your <a> tag to <div>. that's it.
like this:
<div href="link.php" data-target="#ajax" data-toggle="modal"><i class="fa fa-binoculars">
the script works only on <a> tag, so you can avoid the modal action by change the tag different to <a>...
Related
I have a very small application in Angular JS. It's placed inside a bigger rails application, but I don't see too much interaction. The angular application, allows the user to interact with a group of categories. As easy as:
var angular_app = angular.module('angular_app', []);
angular_app.config(['$httpProvider', function($httpProvider, $cookieStore) {
//Protection
}]);
angular_app.controller('CategoriesController', function ($scope, $http) {
$scope.isEditing = false;
$scope.categoryName = '';
$http.get('/api/categories').success(function(data) {
//We use this to data-bind with the HTML placed below
$scope.categories = data;
});
$scope.addNewCategory = function() {
...
}
$scope.editCategory = function(index) {
if (!index)
return;
var selectedCategory = $scope.categories[index];
// With ng-show, we make visible the part of the UI
// that should be used for editing
$scope.isEditing = true;
}
$scope.cancelEditCategory = function() {
$scope.isEditing = false;
}
$scope.deleteCategory = function(index) {
...
}
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['angular_app']);
});
The idea is that the information is shown in a list, and we have an 'edit' button that allows the user to see other part of the UI that will let him perform changes.
<div ng-controller="CategoriesController">
<div ng-show='isEditing' class="popup_menu">
DIV FOR EDITING
</div>
<ul>
<li ng-repeat="category in categories">
<a href="#" ng-click='deleteCategory($index)'>[X]</a>
<a href="#" ng-click='editCategory($index)'>[E]</a>{{ category.name }}
</li>
</ul>
<input type="text" id="categoryTextBox" ng-model="categoryName"/>
<button id="submit" ng-click='addNewCategory()'>New category</button>
</div>
When I'm clicking the edit button, the corresponding part of the UI gets visible, but just after that, something happens, and the ul that should render the list, looses completely the binding, just showing something like:
[X] [E]{{ category.name }}
When it must be showing:
[X] [E]computer science
[X] [E]politics
[X] [E]news
(Which is what I have in the scope). It happens a few after the click (and works for a sec). No errors on the console, no interactions with other libraries (as far as I can see).
Thanks!
Turbolinks
I have no experience with Angular, but perhaps your problem could be to do with Turbolinks - this is a way of Rails loading the <body> tag of a page only - keeping the <head> intact.
Turbolinks is notorious for Javascript on Rails, as each time you reload your <body> without reloading the <head> part of your page, all your JS bindings are going to disappear. The solution to this, in normal JS, is to use JQuery / Javascript delegation, and delegate from the document object:
$(document).on("action", "delegated_object", function(){
...
});
Apologies if this does not work - it's a common issue for us, but as I have no experience with Angular, I don't know if it's going to help you or not.
It seems that I should have been more careful with the links:
<a href="#" ng-click='deleteCategory($index)'>[X]</a>
<a href="#" ng-click='editCategory($index)'>[E]</a>{{ category.name }}
Don't know exactly how this works, but seems that if the link has his href attribute, a GET request is made against 127.0.0.1, breaking in some way the angular code. If you put them like:
<a ng-click='deleteCategory($index)'>[X]</a>
<a ng-click='editCategory($index)'>[E]</a>{{ category.name }}
The problem will be solved. Thanks all for reading and helping!
I have a functional dropdown:
<li data-dropdown="publish-dropdown-menu">
<a href="#" id="publish">
Publish
<img alt="" border="0" src="/assets/publish-arrow.jpg">
</a>
</li>
And the elements for this dropdown are(HAML):
.home-dropdown-menu.publish-dropdown-menu#publish-dropdown-menu
.top-arrow
%a.your-services{:href => new_service_path}
.icon-drop
%span
Your
%br>/
Service
%a.your-event{:href => new_event_path}
.icon-drop
%span
Your
%br>/
EVENT
But when this is replaced by AJAX this won't work anymore.
This is what I tried:
$('#publish').dropdown()
$('#publish').parent().dropdown()
But none of these worked.
Any advice on how to reset dropdown behaviour after page has been loaded.
Update
This is how I am replacing content:
$('#header').html('<%= escape_javascript(render 'layouts/header') %>')
Header has a lot of other content so is not easy for me to replace some parts.
The dropdown function or any events which were attached when DOM was loaded for the first time does not work for newly added elements. You need to reattach any events that were initially attached and re-call functions that you had called on those elements.
The reattachment of events can be achieved using jQuery on() method, but as dropdown is not an event and is a function we need to implement something like the following:
Trigger an event e.g. 'show' where you update the content of #header like follows:
$('#header').html("<%= escape_javascript(render 'layouts/header') %>").trigger('show');
Then call dropdown on the element in the show event handler in your javascript:
$(document).ready(function(){
$(document).on('show', '#header', function() {
$('#publish').dropdown();
});
});
I try to make the items of a list draggable, but it doesn't work. jQuery doesn't seem to add the ui-draggable class, or maybe Angular removes it.
Javascript
$('.results_video').draggable({
});
HTML
<div class="results_video" ng-repeat="video in results.list">
{{video.title}}
</div>
Note that if I just write the following html, it works
<div class="results_video"></div>
Any suggestions?
I have found the solution. I need to make these divs draggable after they have been loaded. In my case:
var VideoCtrl = function ($scope){
$scope.$watch('search', function(){
//Some code that updates the divs
$('.results_video').draggable();
});
};
I have a simple jquery script that shows and hides div block:
<script type="text/javascript">'
$(document).ready(function(){
$(".slidingDiv").hide();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
<a class="show_hide" href="#">Show/hide</a>
<div name="gohere" class="slidingDiv">
...
</div>
It's working fine, but if the URL contains #gohere I want to automatically show this div and hide it only if .show_hide is clicked.
Set the divs ID to be gohere, then you can do:
$('.show_hide').click(function(){
$($(this).attr('href')).slideToggle();
});
since your href attribute will contain #gohere, the selector for the slidetoggle will end up being #gohere, which corelates to your divs ID.
EDIT:
for the first part of your question, you can get the current hash tag from window.location.hash.
if (window.location.hash.length > 0) {
$(window.location.hash).show();
}
You should probably put some better error checking in there, but it should work.
I have the following script which works as long as the are static html
$('li.tab').each(function(index) {
$("#tab" + index ).click(function() {$("#tabs").tabs( "select" , index );});
});
This is what the static html looks like:
<div class="item" id="tab0"><div class="icon" style="background-image: url('http://intranet/icon0.png');"></div> Default</div>
<div class="item" id="tab1"><div class="icon" style="background-image: url('http://intranet/icon1.png');"></div> Reports</div>
<div class="item" id="tab2"><div class="icon" style="background-image: url('http://intranet/icon2.png');"></div> Other</div>
If I use a database to generate the 3 html lines via jquery/ajax, do I have to use the jquery live function to connect the click event look in the script above?
If yes, how would I do this?
yes you need to use live
$('li.tab').each(function(index) {
$("#tab" + index).live('click', function() {
// ...
});
});
$('.your_target_class').live('click', function () {
//your code here.
});
Instead of .live(), use .delegate() which you bind to an object that surrounds what you're targeting. You can chain .delegate() plus it's better performance wise (you can look it up here http://jquerybyexample.blogspot.com/2010/08/bind-vs-live-vs-delegate-function.html)
Also, don't forget to use .die()/.undelegate(), otherwise you're running a risk of firing multiple requests (ie, if your .live() declaration gets called multiple times, your click event will fire multiple times. You can look this up here jQuery UI ajax tabs - requests multiplying when loading links within tabs)
Mind you, jQuery 1.4.2 has a bug in it's .live(), take that into account.