Consider the following link:
https://www.officeworks.com.au/shop/officeworks/c/technology/monitors-digital-signage/27--monitors
The "View 100 per page" link does not change the url, nor does it have an onclick() attribute, yet it does reload the page and show up to 100 items. What variable has changed here, and how is it stored? Is it possible to get the HTML of the page with 100 items directly, without having to click the link or reload? Or get the page with 100 items programatically? (eg in Python)
One answer is the Ajax and Event system un Javascript.
You can have one HTML item like
<button id="but1">Show 100 items</button>
and add a "click" event on it from Javascript (example with JQuery)
$("#but1").click(function_but1_click);
This will launch the function_but1_click() function when the HTML button is clicked by the user.
After it, you can ask this function to perform an Ajax request to bring more data to the page (Example with JQuery)
function_but1_click()
{
$.get('myDataLoader.php',function(data){
items = JSON.parse(data)
draw_my_items(items)
});
}
And then implement the draw_my_items() function to display your new item on the screen.
The content is loaded dynamicly, an example of such feature is jQuery Ajax
http://api.jquery.com/jquery.ajax/
There is no need to add a link, or onclick. You can bind event handlers to html tags / classes / IDs ...
https://api.jquery.com/click/
I think the storage happend on the server side, session side. Because i was not able to find a related cookie.
Good luck!
Related
I have a page that catalogues media (think similar to an instagram page). The media is viewable on modals, and I'd like to record a "view count" for each piece of media. So whenever the modal containing that media is toggled open, it records a view.
This is a simplified version of my code:
<button data-toggle="modal" data-target="media-number-999">Click to view Media 999!</button>
<div class="modal" id="media-number-999">Media #999 viewable here!</div>
I also have a page set up where visiting that page automatically increases the viewcount by 1, and then redirects elsewhere (using django)
urls.py:
path('views/<id>/', views.media_views, name="mediaviews"),
views.py:
def media_views(request,id):
Media.objects.filter(id=id).update(views=F('views') + 1)
return redirect('media_detail', id=id)
The reason I'm doing this is so that I can then reference the viewcount in the database to use for sorting/filtering/etc.
How can I make a button that both opens the modal, and also records a visit to /views/999/ ? Also open to alternative approaches if there are better ways! I've tried to figure out how to use Ajax to do this but haven't had any luck.
Thanks!
Add an onclick function to
</button data-toggle="modal" data-target="media-number-999" onclick="recordview(999)">Click to view Media 999!<//button>
Create a new endpoint on your app that has the following format: /record/{id}
Make a function recordview() that makes a simple HTTP request (No need for AJAX) to your new endpoint
Remove the Media.objects.filter(id=id).update(views=F('views') + 1)in media_views to avoid double recording (From when they clicked vs when they opened) or change the model in media_views
(There is no / at the start of but i had to add it otherwise StackOverflow wouldn't format it properly. Make sure to remove it (And let me know if you know how to format it without the damn slash!)
I have an select dialog. For performance reason, I have kept growing threshold as 100 records, out of 2000 total records.
So, the user can see 100 records when popovers open. I had written growingScrollToLoad so that when the user scrolls down, another 100 records get loaded.
However, this is not working somehow. Popover only shows 100 records initially, and even if I scroll down it doesn't load more data. I am not sure what am I doing wrong. I had tried using all the tags/properties describe in SAPUI5 Guidelines. Also, it works in https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.SelectDialog/preview
<SelectDialog confirm="handleConfirm"
growingThreshold="100"
growingScrollToLoad="true"
items="{myModel>/AllData}"
multiSelect="true"
noDataText="No data"
liveChange="handleSearchOnDialog"
title="Choose"
autoAdjustWidth="true">
<StandardListItem id="idItemA"
description="{Name}"
iconDensityAware="false"
iconInset="false"
title="title"
type="Active"/>
</SelectDialog>
Please look at the API:
https://sapui5.hana.ondemand.com/#/api/sap.m.SelectDialog
You will notice growingScrollToLoad is not listed in the property section of sap.m.SelectDialog ==> you cannot use this functionality
The property growingScrollToLoad is a property of sap.m.ListBase. So if you want to use it you need to create a custom dialog that has a sap.m.List or any other child of sap.m.ListBase as content.
(sap.m.SelectDialog is a direct child to sap.ui.core.Control -> no direct relation to sap.m.ListBase)
I found a solution without changing control.
In XML file, I provided growingThreshold="100" growing="true" to Select dialog. In controller file, for onOpen event of Select dialog, I have written this piece of code:
var sGrowingThreshold = this._oSelectDialog.getGrowingThreshold(); //sGrowingThreshold will be 100
if (sGrowingThreshold)
{
this._oSelectDialog.setGrowing(sGrowingThreshold);
}
It worked and loads data everytime I scroll down till the end.
People!
I'm developing a website where I have an "Offers List" (iframe). Inside this list (), I have few products.
If the user clicks on a product, this product goes to a "Wishlist" (other , on the parent window). Okay so far.
But, the user can delete the product selected from the "Wishlist". Okay so far. But the Wishlist is "refreshed" dynamically, (with .append() method, from an iframe), so my event $(".button_to_delete").click() event doesn't work, because the jQuery runs after the DOM. How I can "restart" the $(".button_to_delete").click() event after the product inserted in Wishlist?
My code: http://pastebin.com/uHevR1KL
Thanks! :) And sorry for bad english.
Try to use .on():
$("#listaPedidos").on('click','.button_to_delete',function(){
//Do some stuff
});
I am using the jQuery Tabs library in a small application. The page has 5 tabs and the content for each page is loaded using Ajax. The problem is, once I load a tab, it remains in the browsers memory (and so do its HTML elements). So if I use lets say a DIV element with the same ID as a previously loaded tab, all JS function related to that ID try to interact with the old tab.
IN other words, lets say I have a page with 2 tabs, "Traffic Data1", "Traffic Data2". Now first, I click on the Traffic Data1 tab which makes the ajax call and loads the page just fine. This page, has 2 date input fields, id for the first field is "dateFrom" and the other field is "dateTo". Next to that is a "Go" button. Upon clicking the button, a JS function shows an alert box with the values in each of the input fields.
Now, I click on the "Traffic Data2" tab. The contents of the page are very different, but it has the identical input fields, 2 for dates (with same IDs) and Go Button. When I press the Go button on this page, I see the alert box with values form the previous tab.
So my question is, Is there a way to unload the previous tab? Or is the only alternative to use elements with unique divs (even though the pages are complete separate).
Thanks
You cannot have multiple element with the same ID. When you find an element by ID the first one found is always returned because it is expected that IDs will be unique.
Leave the name attributes for the input elements the same but change their IDs to be unique.
You can select an element by its name attribute like this: $('[name="foobar"]')
Update
In the docs for jQuery UI Tabs there is an option called cache that when set to false should remove the old tabs from the DOM after you navigate away from them:
Whether or not to cache remote tabs content, e.g. load only once or
with every click. Cached content is being lazy loaded, e.g once and
only once for the first click. Note that to prevent the actual Ajax
requests from being cached by the browser you need to provide an extra
cache: false flag to ajaxOptions.
Source: http://jqueryui.com/demos/tabs/
You are looking for jQuery Live.
Description: Attach an event handler for all elements which match the current selector, now and in the future.
If you use it jQuery will magically auto-update to match your new elements as they appear/disapear.
// code sample
$("a.offsite").live("click", function(){ alert("Goodbye!"); });
Since the tabs click event reloads your form and assuming you're using divs to contain the ajax-loaded content, add .click(function () { $(this).children('div').children.remove(); }) to your tabs() declaration.
That should remove the div content and any event handlers that are bound to it.
If you can pass a context to the jquery functions, you could make your calls relative to currently selected tab...
$("#someDuplicatedId", activeTab).doStuff();
Or if caching the content is not important, go with Jasper's answer.
I have a program that given an SQL statement (browser database using HTML5-SQL), it populates a set of field in my jquery mobile page. The SQL statement is changed based on an ID passed through the url. So when a button/link is clicked, the same page is called with a different parameter value: index.html?id=545.
Although the first page load seamless, when I click the link to the next page, the objects (page, buttons, link, div) show, but the text inside these objects doesn't show up.
I am using the $('div').live('pageshow',function(event, ui){ event in order to trigger the events of doing the following:
$("#title").text(Title);
$("#date").text(mdate);
When I print the value of Title and mdate in the console of Chrome debugger, it shows the right value. I don't know why the same text doesn't show in the buttons and labels.
Can anybody help me with this.
Thanks
When using jQM you need to refresh the controls. Here are the docs:
http://jquerymobile.com/demos/1.0/docs/forms/docs-forms.html
Refreshing form elements In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom
controls (selects, sliders) built from, and kept in sync with, the
native control. To programmatically update a form control with
JavaScript, first manipulate the native control, then use the refresh
method to tell the enhanced control to update itself to match the new
state. Here are some examples of how to update common form controls,
then call the refresh method:
Checkboxes:
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
Radios:
$("input[type='radio']").prop("checked",true).checkboxradio("refresh");
Selects:
var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
Sliders:
$("input[type='range']").val(60).slider("refresh");
Flip switches (they use slider):
var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");
if it's the page you need, try this:
http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
Enhancing new markup The page plugin dispatches a pagecreate event, which most widgets use to auto-initialize themselves. As long
as a widget plugin script is referenced, it will automatically enhance
any instances of the widgets it finds on the page.
However, if you generate new markup client-side or load in content via
Ajax and inject it into a page, you can trigger the create event to
handle the auto-initialization for all the plugins contained within
the new markup. This can be triggered on any element (even the page
div itself), saving you the task of manually initializing each plugin
(listview button, select, etc.).
For example, if a block of HTML markup (say a login form) was loaded
in through Ajax, trigger the create event to automatically transform
all the widgets it contains (inputs and buttons in this case) into the
enhanced versions. The code for this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );