I am creating a portfolio section of a website which utilizes Flickr's REST api. The list of portfolio items, however, is generated dynamically by this code:
$.ajax({
url: "https://api.flickr.com/services/rest?method=flickr.photoSets.getList&user_id=********#N04&format=json&nojsoncallback=1&api_key=***********",
context: document.body
}).done(function(results) {
results.photosets.photoset.map(function(item) {
var imgUrl = "https://farm" + item.farm + ".staticflickr.com/" + item.server + "/" + item.primary + "_" + item.secret + "" + ".jpg";
$(" #portfolio_horizontal_container ").append(
'<div class="portfolio_item interior design"> \
<img src=' + imgUrl + ' alt="" /> \
<div class="port-desc-holder"> \
<div class="port-desc"> \
<div class="grid-item"> \
<h3>Quisque non augue</h3> \
<span>Photography / Web design</span> \
</div> \
</div> \
</div> \
</div>'
)
})
});
I also have another plugin which manages the portfolio interactions and style. However when the DOM elements for the portfolio items get loaded this other plugins just doesn't work, thus the functionality it applies to the portfolio is non existent. I have tried and tried to solve this with no success. Any thoughs?
The code that attaches event handlers to your DOM elements will need to be re-run whenever new elements are added to the page.
In the same function as above, you'll need to re-invoke the plugin so that it will be aware of the new structure.
If I understood your problem, you could create a function which create the event and call it in the ajax done:
function bindEvent(id){
//initialize the plugin for the given id
}
then you can call bindEvent, after the append inside the ajax.done using the id of the newly inserted html.
or
If it's an event that you want to bind you can use
$('body').on('click', 'my-dinamic-id', function(){...})
Related
I'm making a Carnival calendar for my city.
I'm using this as a basic calendar engine: https://github.com/jlord/sheetsee-calendar
For a basic Modal i'm using this: https://github.com/FinelySliced/leanModal.js
I want to be able to click on the event and put it to show some information about it: name, time and place.
var eventElement = $('<div class="event"><a class="' +
event.location + '" href="#informa" rel="leanModal" >' +
event.name + "#" + event.tickets +
'</a></div> <div id="informa"> <p>' +
event.name + '</p></div>')
I made a test modal in the index.html and it worked, but it is not working when i try to do this.
You have created an element, but haven't added it to the DOM of the page.
try something like
$('body').append(eventElement);
as the next line.
I have a function within a jquery pageshow function and only should be activated when on a certain page (id). But for some reason it doesn't run that script. The pages are dynamic with id's.
Here is a sample of my code
$(document).on('pageshow', '#fragment-1', function() {
$.mobile.activePage.find("div [data-role=tabs] ul li:first-child a").click();
createCheckboxes('#fragment-2')
});
function createCheckboxes(into){
var players_names = playerCal("ars", 7, 5);
$("#createBtn").remove();
$(into).append('<fieldset class="cbFieldSet" data-role="controlgroup">');
var length = players_names[0].length;
$(".cbFieldSet").append("<ul data-role='listview' data-inset='true' data-theme='d' data-divider-theme='e' data-count-theme='b'><li data-role='list-divider'><span>Select players in the next line up2</span></li></li>");
for(var i=0;i<length;i++){
$(".cbFieldSet").append('<li><input type="checkbox" name="cb-'+i+'" id="cb-'+i+'" value="'+players_names[0][i]+'"/><label for="cb-'+i+'">'+players_names[0][i]+'</label></li>');
}
$(".cbFieldSet").append("</ul>");
$(into).trigger("create");
$("#showBtn").css("visibility","visible");
console.log(players_names);
}
Sample of my dynamic page, it works
+"<div id='fragment-1'>"
+ "<form>"
+ "<fieldset data-role='controlgroup' class = 'content'>"
+ "</fieldset>"
+ "</form>"
+ "</div>"
+ "<div id='fragment-2'>"
+ "<form>"
+ "<fieldset data-role='controlgroup' class = 'content'>"
+ "</fieldset>"
+ "</form>"
+ "</div></div></div>");
I like when someone creates clean and readable question.
You have an error in your code, div holding your page is not propperly formed jQUery Mobile page.
Change this:
<div id='fragment-1'>
To this:
<div id='fragment-1' data-role="page">
Page events works only on div containers with attribute data-role="page".
Update:
Working example made from your/my previous example: http://jsfiddle.net/Gajotres/vds2U/55/
I generate dynamically a toc for elements of class=faqQuestion.
The answer resides in a class=faqAnswer element which is hidden by default.
By clicking on class=faqQuestion entry it will show up with
$(this).next(".faqAnswer").slideToggle(300);
Everything works as expected.
What I want: by clicking on a toc link i will jump to the target faqQuestion element and show the corresponding faqAnweser element.
The way I generate the toc:
$(document).ready(function(){
var url = window.location.pathname;
$('<ol />').prependTo('#toc')
$(".faqQuestion").each(function(i) {
var current = $(this);
current.attr("id", "entry" + i);
$("#toc ol").append("<li class=\"faqToc\"><a id='link" + i + "' href='" + url + "#entry" +
i + "' entry='" + current.attr("tagName") + "'>" +
current.html() + "</a></li>");
});
This is what I tried, which will jump to the selected faqQuestion but the faqAnswer element is still hidden.
$(".faqToc").click(function(event){
$(this).next(".faqAnswer").slideToggle(300);
});
My problem is this - at least I think so - so I tried something like - which results in "undefined"
var url = $(this).prop("href");
alert(url);
Trying attr instead of prop returns also "undefined".
Can you point out my problem?
I'm trying to improve my Javascript and jQuery know how, so I don't want to use a toc-plugin.
Update: HTML looks like this:
<div id="toc">
<ol>
<li class="faqToc">
...
</li>
<li class="faqToc">
...
</li>
</div>
<p id="entry0" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>
<p id="entry1" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>
A very simple way would be to use the index() method since relationship between the TOC elements and the question/answer elements is 1 to 1.
$(".faqToc").click(function(event){
var index=$(this).index(); /* zero based index position of element within it's siblings*/
/* toggle answer element with same index */
$(".faqAnswer").eq(index).slideToggle(300);
});
jQuery API Reference : index()
To build a menu block which should be switchable with hide/unhide of the menu items, I'm using .append html.
The code idea is this:
navigat += '<h3 class="infoH3"> <a id="' + menuID +'"'
+ ' href="javascript:slideMenu(\'' + menuSlider + '\');">'
+ menuName + '</a></h3>';
navigat += '<div id="' + menuSlider + '" style="display:none">';
navigat += ' <ul>';
navigat += ' <li>aMenu1</li>'
navigat += ' <li>aMenu2</li>'
navigat += ' <li>aMenu3</li>'
navigat += ' </ul>';
navigat += '<!-- menuName Slider --></div>';
$("#someElement").append (navigat);
This is doing well .. so far.
But the point is::
I use JS to read the required menu items (eg. 'aMenu1' together with title and/or link info) from a file to build all that, eg. for 'aMenu1' a complex is composed and $("#someElement").append(someString) is used to add that the 'someElement'.
At the moment I build those html elements line by line. Also OK .. as far as the resulting string has the opening and closing tag, eg. "<li>aMenu2</li>".
As can be seen from above posted code there is a line "<div id="' + menuSlider + '" style="display:none">".
Appending that -- AFAIS -- the .append is automatically (????) adding "</div>" which closes the statement.
That breaks my idea of the whole concept! The menu part isn't included in the 'menuSlider '.
QQ: How to change it -- NOT to have that "</div" added to it??
Günter
You could change you method around to use document fragment style creation and an object to populate the properties on the elements, like this:
var someElement = $("#someElement");
$('<h3 class="infoH3"></h3>').append($('<a />',
{ 'id': menuID,
'href': '#',
click: function() { slideMenu(menuSlider); }
})
).appendTo(someElement);
var div = $('<div />', { 'id': menuSlider, css: {display: 'none'} });
$('<ul />').append('<li>aMenu1</li>')
.append('<li>aMenu2</li>')
.append('<li>aMenu3</li>')
.appendTo(div);
div.appendTo(someElement);
This is a very different way of doing it, first we're caching the $("#someElement") object so we're not searching for it repeatedly. Then we're creating the <h3> as an object, putting the link inside, then inserting then appending the whole thing to someElement. In the last, the same approach it's creating the <div>, setting it's properties, then creates the <ul> menu and appends it inside...then appends that whole div to someElement as well.
As a side note, I'm not sure how .slideMenu() works, but an event handler that works via $(this).parent().next() (or give the div a class) would work as well, and you wouldn't need a function with the slider argument passed.
Not sure why I cannot get this to work. Tried a few permutations now.
I have built a JSFIDDLE here.
I cannot get this jQuery to return the inner HTML for the target element. Is it because of the number child elements in the hierarchy?
jQuery:
modalContentLeft = 'Project: ' + $('#mob-' + uuid + ' div.project-name').html();
I have also tried using .find() without success. Thanks for any help.
I found your fault:
you are closing the div tag of the id before it gets to the name.
You are closing it before the class <div class="mobile-item-row clearfix">, so the selector does not find the children ".project-name" in it,because there is none. if you remove the closing tag and close it at the end of the HTML and change the syntax of the selector a bit, it works.
Project: ' + $('#mob-'+uuid+' .project-name').html()
Here you go: https://jsfiddle.net/ucupbtsf/5/
First your post here and your jsfiddle don't reflect the same...
JsFiddle :
modalContentLeft = 'Project: ' + $('#mob-' + uuid + ' div div .project-name').html()...
Here :
modalContentLeft = 'Project: ' + $('#mob-' + uuid + ' div.project-name').html();
Then, your html is :
<div class="mobile-item-row-first first-row clearfix" id="mob-6c985947-c68a-4f5b-9ebe-0d488b696f0d">
<div class="project-client pull-left">
<i class="ion-ios-people ion-fw" data-original-title="" title=""></i> Sienna Cremin
</div>
</div>
which does not reflect your jquery selector :
$('#mob-' + uuid + ' div div .project-name').html()
Seems you closed too much div, so your .project-name div is not in the #mob-id div.
$(elem).html() will get you all the content of the div (including the <i></i> part). If you only want the text, you can go for $(elem).text().