Develop Reference

Jquery datatables pagination issue

So I have a map defined where there are two tables as an example. When you click on one item in the first table, it will highlight the corresponding related item/row on the second table. The issue I am facing is that I have added Pagination on these tables. So lets say when I select an item in table 1 and if it corresponds to an item in table 2 which is on page 2, when I click on page 2 on the second table, it loses the highlight.
Now I have the function which essentially has the objects which I care about but I feel I am missing the right jquery function (onclick/something else??) that I need to call.
ForEg: Lets say I pass the information during the below function. What happens is that the below function works when I click on the current page twice. i.e. Once to go to page and second when I am on that page.
Scenario:
Click on item in table1 (that corresponds to item in table 2 on page 3)
Click on button 3 to view the corresponding page (Ideally the below function should have been called but it doesn’t)
Click on button 3 again and the below function gets called.
jquery(function1 + ‘ .page_button.current’).on(‘click’, function(e){
console.log(“Entering here”)
});
I want it to be called when I go to that page for the first time.
Can anyone please help me with what I am doing wrong. What function do I need to use apart from this ‘click’ which would help?

Call javascript from appended text (order cart)

Let's say that I'm building something like order cart.
I have one main page, and a lot of subpages.
On the subpages I have some specified product which user can add to the order by clicking on the button.
If the user click the button, javascript is called grabbing the name of the product and sending it AJAX to some PHP file which add this product name to some $_SESSION array.
If there's atleast one product in the cart, the FIXED div on the bottom of the screen appear. This div runs modal (bootstrap) and it contains all of the products which user had add to the order. Again I'm using here javascript + AJAX to determine click. If it's, there is a call to .php file which return STRING contains all the products. Then, this string is appended to the div inside this modal.
Content of this modal looks like:
'name_of_the_product', 'delete', 'id_from_session_array'
...
...
So I want allow the user to use DELETE option for any of his products in this list if he no longer want this product in the cart. I wrapped the delete text in some anchor and gave it class - let's say '.delete_from_cart'.
And now, when I'm trying to check in javascript if this element ('.delete_from_cart') has been clicked, nothing happens.
Sample code for this looks like:
$('.delete_from_cart').click(function() {
alert("foo");
});
No alert at all after clicking some .delete_from_cart div. However, in the code source all of this anchors has this class.
How to fix that? It seems like javascript doesnt see appended elements from ajax in this div. Any help?

since you said that your modal is generated using an Ajax call, you will not be able to attach the click event to the element. You will need to use jQuerys on() method to bind the onclick.
$("#themodal").on( "click", ".delete_from_cart", function(){
alert('it worked');
});
See on() method more details.
https://api.jquery.com/on/

How to detect change in form if added a new row in prime faces datatable

I have requirements to disable save and cancel buttons in my page on page load. I should enable save and cancel buttons if user changes something in the page. To achieve this, I am using
http://plugins.jquery.com/are-you-sure/
This plugin is working fine but there is need for customization in many scenarios, one like below
I have a page like Item groups which consists of three panels.
LeftPanel : List of item groups in the system
CenterPanel : List of items assigned to a selected item group
RightPanel : List of items to assign to an item group
Now Assume I have a datatable
<p:dataTable var="itms" value="#{myBean.listOfItems}" rows="10"
paginator="true"
paginatorTemplate="{CurrentPageReport}
{FirstPageLink}
{PreviousPageLink}
{PageLinks}
{NextPageLink}
{LastPageLink}
{RowsPerPageDropdown}"
rowsPerPageTemplate="10,50,100">
</p:dataTable>
To assign items to the item group I would select items in the right panel and click on assign button which would add to the listOfItems to show in the center panel
listOfItems.addAll(selectedItems);
I am calling rescan method defined in the plugin on assign button oncomplete to detect the changes and track new records added because I want to consider addition or removal of fields also a change.
Now on page load if an item group is selected and it has 13 items assigned then I could see the first page with 10 records. If any items added then they will be added in the list at back end list. Since I'm in first page and page is having complete rows plugin is unable to find any changes in form.
How to find a change in this scenario.

Since you say you want to consider any addition or removal of fields also a change to make sure that your users save the changes, one way to do it could be like this:
You can have a hidden input:
<h:inputHidden id="hiddenInput" />
And in your assign button oncomplete you mentioned you can add:
oncomplete="$('#hiddenInput').val('dirty').change();"
This would add the 'dirty' string (for example) to the hidden input and call change() to tell the plugin that something changed, and the plugin would mark the form as dirty (changed).
And in the oncomplete of your saving button, all you have to do is clear that value and reinitialize the plugin to start again:
oncomplete="$('#hiddenInput').val('');$('#formId').trigger('reinitialize.areYouSure');"
Also it would be good to add some checking or to do that at the end of the action (link).
NOTE: If you add and delete the same 'item', technically there aren't changes, but you want to keep the form as changed right? This solution will work for that. Correct me if I'm wrong and you want to manage this particular case. You would have to add some logic in which you compare old and new values and clear or dirty the hidden input accordingly.

Facebook Like button for every item?

I have Facebook iframe app where I am pulling content with JSON and representing it in a list with search criteria.
On item click new content shows on the same page (using ajax), and that page shows more info about item. I want to add a LIKE button for every clicked item.
But it must be a different URL so I can publish it on my FB wall. So when I check link from Like button on wall, it will redirect me on that special item.
Here are few issues:
1) How to define Like button for every item?
<div class="fb-like" data-href="LINK FOR LIKE BUTTON" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>
Here is LIKE button, I need to specify different data-href for every item.
2) I need to send some parameters to url. Let's say when clicking on item, I should send item id to URL. Right now I can send item id to my URL but it is doing just in my iframe -- not in facebook URL. How can I do this?
I think second problem would give an answer for my first problem.
Edit: I am doing this using jQuery.
edit2:
so, i am using jquery for my site, pulling content with JSON and representing it with html and jquery, i have, it is all the same page, but on click i hide some contents and show another, so my main content is a list of items, click on item i hide main content, and i show item info content
so, it is all one page, so it has the same URL (main content, item content,... all the same URL)
so for adding LIKE buttons for every item, i need to make a difference between those items, so i done this
'window.location.href=window.location.href + "#id=" + propertyid;'
so right now, every item has its own URL, which i done manually, so right now every item has own URL which i could use for LIKE button
but, when i alert this new window.location.href is seems all right, i get this new location with #id=12345 included, but when i try to send that location to LIKE button data-href it is always just the main location, without this new part includind item id #id=12345

Yes, you can create FB Like buttons for "items" shown on dynamically created screen content (eg Ajax popups).
Issues:
Individual item urls
FB demands a "social graph endpoint" for each item that can be liked. So you also need to support a url which returns only the "item." This is the url for the individual item. It is also the url that a FB viewer will click on if they want to find out more about the item.
Example: a page shows a list of articles. There is an individual Like button next to each article. When a person "Likes" article B, it is shown in their FB stream. When they click on "Article B" in the stream, it should go to a page that only shows article B.
Also, the url for just article B will be queried by Facebook to obtain the FB meta headers for the individual item (image, classification, etc).
Parsing the new dom for FB items Depending on which method you use for adding FB like buttons et al, you may need to tell FB to explicitly (re-)parse the new parts of the dom that you just added dynamic content to. (Your pop-up.)
Since you know the element that you added the popup to, there is no need to tell FB to reparse your entire dom. Tell them to parse starting at the beginning of your newly added/changed element:
Code I use:
if (event_data) { // event_data was received, show it
panel.setBody(event_data); // set the pop-up's body
if (!this.ie && typeof(FB) != "undefined" && FB.XFBML)
{FB.XFBML.parse(this.panel_el);} // Parse FaceBook markup
....
Docs from FB on this:
http://developers.facebook.com/docs/reference/plugins/like/
http://developers.facebook.com/docs/opengraph/
http://ogp.me/ # FB site about "Open Graph Protocol"

Place this in a for loop, and you should be fine.
var elements = $("#divId").html();
$("#divId").html(elements + "like button code");
$("#divId.fb-like").attr("data-href", "what you want to link to");
See .html() and .attr() specs.

How to remember the previous sorting order in jQuery Table sorting

I'm using jQuery for sorting the tables.
I open a page and click a columns to sort in desc or asc order and in the same page I click on a sub link to view some related data. Then I click back and come back to my same page (page1). At that moment the sorting which i did before I click the sub link is not there. I want the sorting to be remembered when I click the back button.
Example:
Page1 has column names as : Id, Name, Total_Marks. (Here Total_Marks have a link which opens a page for detailed marks(page2). The page2 has a back button which will redirect to page1.)
Step 1 : I sort the Name column in descending order.
Step 2 : I click on the Total_Marks link and navigate to next page for detailed report.
Step 3 : Now Im coming back to page1 by clicking the back button link.
Now the table in the page1 should be sorted by Name in descending order. (As i did before leaving the page1 to page2)
Is there a solution for this?

One option is to display your page of related data in a jQuery UI .dialog() instead of on a separate page. Then the user, instead of clicking the back button, simply dismisses the jQ dialog. The underlying page has not changed. This may be much easier than setting up a structure to maintain state: obtain it in $(document).ready(), update it on every change in sort order, etc.