Currently, I am dynamically loading HTML via a dropdown click event (via jquery event)
The problem that arises is my .on event function is not finding the selector to fire the "a" tag click event.
If the original page that is loaded contains html with the "a" tag with the specified class, the click event for that "a" tag works fine, BUT if I dynamically load new content via the jquery event, then IF a clickable "a" tag exists and I click it, the original page just posts back, there is no evidence of the "a" tags click event firing.
Here is a sample of the dynamically loaded content;
<div id="recipedirectionsandimage">
<div id="recipedirections">
<h2 class="recipedirectionsheader"> Recipe Directions</h2>
<ol class="recipesteps">
<li>Pre-Heat oven to 350°, Grease two 9" springform pans</li>
<li>Sift all dry ingredients into a large bowl</li>
<li>Add corn oil, eggs and vanilla, mix well</li>
<li>Fold in walnuts, coconut, carrots and pineapple</li>
<li>Pour batter into the greased pans</li>
<li>Bake for 50 minutes on the middle racks</li>
</ol>
<p>Click <a ID="creamcheesefrosting.txt" class="icing"
href="#">here</a> for frosting recipe</p>
</div>
<div id="recipeimage">
<img src="Images/RecipeImages/carrotcake_160x233.png" alt=""/>
</div>
</div>
Here is how the content is loaded, the html is retrieved via a WCF service which I've confirmed is working;
function resetRecipeHtml(html, recipename) {
$("#lblRecipeLegend").text("Recipe for " + recipename);
$("#recipecard").html(html);
}
Here is the jquery event code, for now this code is just in a script block on the page outside the document ready code ( doesn't work if it's in it either) Note: The alert is there only to prove the event is firing.;
$('#recipedirections p').on('click', 'a.icing', function (e) {
e.preventDefault();
var filename = $(this).attr("id");
alert(filename);
getRecipeHtml(filename);
});
Part of your question
Here is a sample of the dynamically loaded content;
<div id="recipedirectionsandimage">
<div id="recipedirections">
As, recipedirections is also a part of dynamically loaded content. You should use document or nearest static container. You should use recipecard
$("#recipecard").on('click', 'a.icing', function (e) {
e.preventDefault();
var filename = $(this).attr("id");
alert(filename);
getRecipeHtml(filename);
});
Related
I'm trying to create an <a> link in html page 1 that takes the user to html page 2. After html page 2 loads, I want a drop down function to execute. Essentially it is a link from html page 1 to drop down in html2.
I am not very good with javascript, but I've tried anything I could find so far and nothing works. The link between the pages works, but I cannot get the drop down function to execute on load of html page 2.
Any help would be greatly appreciated
HTML Page 1
<a class="link2index" href="index2.html#test" onclick ="f();return false;">Read more about technology hubs in South Africa</a>
<script>
function f(){
testwindow = window.load("index2.html#test"); //this is working to load but not to load the dropdown
//testwindow.addEventListener('click', myFunction38()); not working
//window.onload = myFunction38 ()
//testwindow.addEventListener('load', myFunction38()){
//document.getElementById("myDropdown38").classList.toggle("show");}; not working
//window.open('index2.html');
//window.somefunction = myFunction38(){
//document.getElementById("myDropdown38").classList.toggle("show");} not working
}
</script>
HTML Page 2 to where I'm targeting
<div class="dropdown">
<button id="test" onclick="myFunction38()" class="dropbtn">Cape Town</button>
<div id="myDropdown38" class="dropdown-content">
<a href="#">
<img src="media/capetown.jpg" alt="South Africa">
Cape Town-based Labsorganises digital and entrepreneurship bootcamps, and provides an investment of up to $20,000 for every social enterprise developed through their program.
</a>
</div>
</div>
<script>
function myFunction38() {
document.getElementById("myDropdown38").classList.toggle("show");
}
</script>
Basically you can use the window.onload function to run some JavaScript to dynamically add html to your body and show a "drop-down".
But since html2 can be reached in other ways(like bookmark or copy/paste into browser) and not just through hyperlink inside html1, you could also append some query string or fragment in html2 when it is loaded from html1 (append it to the href of a tag). Inside the onload function you can then check if the same exists and decide whether or not to show drop-down.
I will not be giving a code since the functionality is vaguely defined in the question. But this should help you solve it on your own.
I have a trash icon which user clicks on to delete current element from database. I want to make it work with ajax if user has javascript enabled. There are multiple items on page.
Don't know why but even after adding preventDefault, href works like regular href instead of performing ajax. It triggers ajax request without refreshing window only every second time I click on trash icon.
Do you know where is the problem?
$('.delete_bulletin').on('click', function (e) {
console.log('event');
e.preventDefault();
$.get($(this).attr('href')).done(
function () {
reloadBoardContent();
}
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bulletin_board">
<div class="bulletin_card">
<i>4. apríl 2018 14:50</i>
<h4>NAME</h4>
<p></p><p>htrhr</p><p></p>
<a class="delete_bulletin" href="/bulletin-board/delete/35/"><img style="max-height: 20px" src="/static/bulletin_board/icons/trash.png"></a>
</div>
<hr>
<div class="bulletin_card">
<i>4. apríl 2018 14:49</i>
<h4>NAME</h4>
<p></p><p>fdsafdfs</p><p></p>
<a class="delete_bulletin" href="/bulletin-board/delete/34/"><img style="max-height: 20px" src="/static/bulletin_board/icons/trash.png"></a>
</div>
<hr>
</div>
I'm pretty sure (but needs confirmation) that your reloadBoardContent() is updating the div where this <a> is located.
If that's the case, the anchor will be replaced and the event won't trigger to the newly created ones.
The solution is to use delegate events, which will make it work for dynamically added elements.
Do this instead:
$('#bulletin_board').on('click', '.delete_bulletin', function (e) {
If you don't replace the <div id="bulletin_board" itself but only its contents, everything shall be fine from now on.
I have two html webresources in my customer form, one contains a multitab and second contains some tiles, designed using bootstrap and JQuery for events. Want to initiate a Click event of tab exist on first webresource on the click of tiles exist on second webresource.
I have prepared the script on simple html page first all code is working there but not on crm form.
How can I access the tab controls using JQuery from first webresource?
I have written some scripts on each html webresources, can I use the same script/function from another html webresource?
Webresource_1
//html
<div class="row">
<ul id="tab_container_01" class="nav nav-tabs">
<li id="tab_cases"><a id="ahref_cases" href="#">Cases</a></li>
</ul>
</div>
//script
//Following script is working fine on the same page
<script type="text/javascript">
$("ul.nav-tabs").on("click", "li", function () {
var selectedTabText = ($(this).find("a").text());
var tabs = window.parent.Xrm.Page.ui.tabs;
//Some toggle script
});
</script>
Webresource_2
//html
<div class="panel">
<div> Open Cases </div>
</div>
//script
<script type="text/javascript">
$(".panel").on("click", "div", function () {
// following not working on crm form
$("#tab_cases").addClass('active');
$("#tab_cases").parent().siblings().removeClass('active'); //length 0, id not detecting
//window.parent.$("#tab_cases").parent().siblings().removeClass('active');
/* trigger click event on the li */
//trying to use function written on webresource_1 script
$("#tab_cases").closest("ul.nav-tabs li").trigger('click'); //*Not Triggering*
});
</script>
Although, technically since you are all within CRM, and you won't have any Cross Domain Scripting issues, this may be a little over kill, you could use Window.Post Message from Frame1, to communicate to the CRM form, and then have it communicate to Frame 2. This would also mean that your scripts wouldn't have to be dependent on the DOM of each, other subscribe to the same interface for posting/receiving messages.
I am having a webpage load another webpage inside an iframe that takes up the entire screen. I have 2 div's that are on top of each other. These divs are actually anchors that direct to a new url (an action). What I am trying to do is once any of the divs is clicked, to initiate an onclick event that will go to the url specified in that anchor href, and then reload the initial index.html page. My class is working on a local enviroment to teach us a thing called clickjacking. Below is my current html.
The issue im having is I can have the anchor click go to the url I want, but then I am no longer in my index.html. Is it possible to open the referenced link in a new window, close the new window once its loaded and then refresh the index.html page. Once that is done to hide the div that was clicked since the "second" div is hidden behind the top most clickable div.
<html>
<head>
</head>
<body>
<center>
<!-- Two anchor divs that are clickable and on top of each other -->
<div id="secondDiv">
<a href="http://www.2ndURL.com" id="m2">
<div id="2" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
</div>
<div id="firstDiv">
<a href="#" id="m1" onclick="myFunction(); return false;">
<div id="1" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
<!-- Main iFrame where user interacts -->
</div>
<iframe id="new" src="http://www.mywebpage.com" style="opacity:1.0;width:100%;height:100%;">
</iframe>
</center>
</body>
<script>
function myFunction(){
var newWindow = window.open("http://www.actionURL");
newWindow.close()
var myWindow = window.open("file:///home/seed/Desktop/index.html", "_self");
}
</script>
</script>
</html>
TLDR:
Load iframe in webpage
click on anchor div on page that directs to a new url
load that url, once loaded go back to the index.html (all in one tab) (step 1)
hide the anchor div that was selected-- allowing second anchor to be
clicked
Thank you for your help.
It looks like you might need to "fake" the onclick if you want to have an onclick action work on the page you are on. You will need to modify the parameters, but here is a code that I have used:
$(function() {
// find out what our query parameters contain.
var query = location.search;
// isolate the position of the equal sign.
var equalIndex = query.indexOf('=');
// extract the image's id.
var imageId = query.substring(equalIndex + 1);
// click on the appropriate image.
$('#' + imageId).click();
});
The comments explain what each step of the code performs. In my case, I needed the page to load and then force the onclick using the unique image ids. In your case, you will need to tie it to your unique div. I hope that this helps you get started.
I have this situation that i need to trigger click on some element from clicking other element. More concretly - i have gallery with thumbnails. When you hover over the thumbnail - the description box covers the whole thumbnail. After that i need to trigger click event on the thumbnail so it can run lightbox. To achieve this i need to do something when i click on the description.
This is the html:
<div id="gallery">
<!-- Content from handlebars that is loaded dynamicaly from template file via ajax -->
<a class="lightbox lightbox-frame" href="img/gallery/{{filename}}.jpg" data-lightbox="gallery" data-category="{{category}}">
<img src="img/gallery/thumbs/{{filename}}.jpg" alt=""/>
</a>
<p class="gallery-image-description">{{description}}</p>
<!-- Content from handlebars -->
</div>
I am trying this but it does not work. It works for statick content but this content is loaded via Ajax and then compiled with Handlebars:
('#gallery').on('click', '.gallery-image-description', function () {
$(this).prev().click();
});
So the question is: Do you have any idea how i can trigger click event on dynamicaly generated content, by clicking on other element ?
I'm not sure this will help because I've never used lightbox, and I can't be sure that there isn't an interaction between lightbox and the JS.
But here is a FIDDLE that
Has a dynamically generated div/image
On hover, covers the image with text
A click on the parent pops up an alert
JS
$('.imagestuff').on('click', function(){
alert('clicked');
});