I have a jquery dialog page, noted here:
<div data-role="page" data-rel="dialog" data-close-btn="none">
<div data-role="header">
<h2>Failed to find driver</h2>
</div>
<div data-role="content">
<p>Failed to find a driver. Would you like to continue searching or cancel the search? </p>
<a data-role="button" id="continueBtn" onclick="alert('continue')">Continue </a>
<a data-role="button" id="cancelBtn" onclick="alert('cancel')">Cancel </a>
</div>
</div>
These alerts work in the dialog. However, I cannot attach event handlers for other functions to these buttons. How can I attach events to these buttons?
don't do something this onclick="alert('cancel')" already as you already using jquery.. do it like this
$("#cancelBtn").click(function(){
alert('cancel');
});
http://api.jquery.com/click/
and if the contents is dynamically loaded you need to use Jquery.on()
$("#cancelBtn")on.("click",function(){
alert('cancel');
});
Related
I am working on a post-comments project. Using AJAX I am generating comments. Each generated comments has Like button. But new generated Like button doesn't work until I refresh the page. The generated link is shown below.
<div class="comment-body-container">
<div class="comment-body">
Oye jetha lali
<a class="like-comment comment-like-color comment_main_id_45"
data-like-comment-id="45" href="javascript:;">
<i class="fa fa-thumbs-up"></i>
</a>
</div>
<div class="liked-this-comment liked_this_comment_45"></div>
</div>
Output after refreshing the page.
<div class="comment-body-container">
<div class="comment-body">
Oye jetha lali
<a class="like-comment comment-like-color comment_main_id_45"
data-like-comment-id="45" href="javascript:;">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
<div class="liked-this-comment liked_this_comment_45">
</div>
</div>
Output is almost same. But it doesn't work until I refresh the page. Could some one please provide me the solution for it.
For dynamic generated content you have to reapply the event after the content is loaded or, better, use event delegation to your likes button, something like that:
$(document).on("click", '.like-comment', function(event) {
//do your like stuff here
});
Event delegation works well with dynamic generated content and is the preferred way to handle this specific situation.
This question already has an answer here:
Is There an Alternative Method to Mimic the Behavior of an Anchor Link/Target Pseudo-Class?
(1 answer)
Closed 5 years ago.
Is it possible to prevent selected anchors from adding to the browser's history?
For a site I am working on now, this is a particular issue when I try to prompt back to a previous page. By doing so the anchors repeat in the order they where activated, and I have to click back more than once before returning back to the previous page.
Here's some code I am currently working with. Is there a function I can implement to achieve this result?
<!-- Image with Anchor to Open Lightbox Window -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="https://URLTOPIC.jpg">
</div>
</a>
</div>
<!-- Lightbox Prompt with Anchor to Close Window -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate" href="#!"></a>
</div>
Any help would be much appreciated!
When using a empty anchor, for example <a id="close-customlightbox" class="lb-animate" href="#!"></a> which is used as a button, you can set the href this way that will disable the anchor events <a id="close-customlightbox" class="lb-animate" href="javaScript:void(0);"></a>
You can read more about the javascript URI scheme What does "javascript:void(0)" mean?
For the links you are using to trigger the models, avoid the default behavior for it to be added to the window.history object
document.querySelector('.trigger').addEventLister('click', function(e){
e.preventDefault();
//Do your stuff
});
I've got a page with three tabs on it, each with different content. I also have a div with a select and a button. I would like this div to display on the first two tabs but not the third. I know one option would be to just duplicate the content on both tabs, but then I would have to keep their data in sync with javascript and I feel like there has to be a better solution than that.
So I tried putting the div between where the tabs are defined and where the tab content starts, which works fine, but it makes it show in all three tabs. In the javascript, I tried binding click events to the tab buttons
$("#pushingInfoTabButton").click(function () {
$("#addInspection").show();
});
$("#pushingInspTabButton").click(function () {
$("#addInspection").show();
});
$("#pushingGridTabButton").click(function () {
$("#addInspection").hide();
});
and showing the div in two tabs and hiding with the third, but after putting debugger inside of the click events, they never fire. Is there an easier way to do this that I'm just unaware of?
Here's the corresponding HTML. Sorry for not having it at first.
<div data-role="tabs" class="ui-content insetContent infoContent" >
<div data-role="navbar">
<ul>
<li><a id="pushingInfoTabButton" href="#pushingInfoTab" data-theme="a">Info</a></li>
<li><a id="pushingInspTabButton" href="#pushingInspTab" data-theme="a">Insp</a></li>
<li><a id="pushingGridTabButton" href="#pushingGridTab" data-theme="a">Grid</a></li>
</ul>
</div>
<div id="addInspection">
<div class="ui-block-a" style="width:30%;margin-right:0px;">
<a data-role="button" data-inline="false" data-theme="b" style="padding-left:0px; padding-right:0px;" id="A1">Add</a>
</div>
<div class="ui-block-b" text-align:right" style="width:70%; margin-left:0px;">
<select data-inline="true" data-native-menu="true">
<option value="" id="Option1">Select</option>
</select>
<a data-role="button" data-inline="true" data-theme="g" style="margin-left:-7px;" id="A2">Clr</a>
</div>
</div>
<div id="pushingInfoTab" class="ui-content insetContent infoContent">
</div>
<div id="pushingInspTab" class="ui-content insetContent infoContent">
</div>
<div id="pushingGridTab" class="ui-content insetContent infoContent">
</div>
Notice: Didn't put any of the content that's actually in the tabs, because it's hundreds of lines of unnecessary markup, and I don't think it's the issue.
There is a typo error here:
text-align:right" style="wi
Then, put the JS at the bottom of the body, or at jQuery Document Ready.
Here is the working demo.
I am trying to append buttons to a header if a case is true, but it ends up looking like this:
The edit and new event buttons are supposed to be a control group...
HTML
<div data-role="header">
<h1 class="ui-title" role="heading" id="hdr"></h1>
<div class="ui-btn-right" id ="addbuttons" data-role="controlgroup" data-type="horizontal">
</div>
</div>
JAVASCRIPT
$('#addbuttons').append('<div data-role="button" data-icon="gears" data-theme="b">Edit</div>');
$('#addbuttons').append('<div data-role="button" data-icon="plus" data-theme="b">New Event</div>');
Whenever you do any changes to header or footer, you need to re-enhance the markup this way.
$('[data-role=page]').trigger('pagecreate');
You also can use this,
$('[data-role=header]').trigger('create');
Using this call <a href="deleteDialog.html" data-rel="dialog" data-transition="pop" data-role="button" id='deleteDialog'>Delete</a> to get the following dialog page:
<div data-role="page" id="deleteCompanyDialog">
<script type="text/javascript">
$("#deleteButton").live("click", function() {
alert("this alert increments");
});
</script>
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content" data-theme="c">
<h1>Delete Company</h1>
<p id="message"></p>
<a data-role="button" data-theme="b" id="deleteButton" >Sounds good</a>
Cancel
</div>
</div>
seems to retain the live("click".. binding from any previous calls to this dialog and then binds the live call again. So if I call the page 4 separate times, on the forth dialog page call it will popup 4 alert screens. Is there a way to have the javascript still be within data-role="page" so it can load with ajax but not increment the "live" binding. I tried $("#deleteCompanyDialog").live("pagecreate"... as well as pageload (a long shot) which does not work either.
Help would be greatly appreciated.
Instead of using .live(), use .bind() and place your JavaScript in a delegated event handler:
<div data-role="page" id="deleteCompanyDialog">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content" data-theme="c">
<h1>Delete Company</h1>
<p id="message"></p>
<a data-role="button" data-theme="b" id="deleteButton" >Sounds good</a>
Cancel
</div>
<script type="text/javascript">
$(document).delegate("#deleteCompanyDialog", "pageinit", function() {
$("#deleteButton").bind('click', function () {
alert("this alert DOES NOT increment");
});
});
</script>
</div>
This is like using $(function () {}); but for jQuery Mobile. The pageinit event will fire when the page is initialized (happens once per pseudo-page) and the .bind() function call will only bind to elements present in the DOM. When you use .live() it doesn't bind to the actual element, it binds to the document element, which does not get removed when you navigate away from the dialog (so each time you show the dialog you add another delegated event handler).