I got a simple code when users are filtering brands, categories etc..
Everything works as it should.
BUT when you for example want to go back twice, the first popstate returns the last page perfectly. But when you go back again, it still returns the last page, so it loads it again. And not the page before that one.
A piece of my code:
The pushstate
var params = $('fme_layered_params').value.parseQuery();
// Object { cat="274", dir="desc"}
if (!params['dir'])
{
$('fme_layered_params').value += '&dir=' + 'desc';
}
if(window.location.href.indexOf('?') > -1){
var u = window.location.href.split("?");
var url = u[0]+"?"+$('fme_layered_params').value;
}else
var url = window.location.href+"?"+$('fme_layered_params').value;
window.history.pushState($('fme_layered_params').value, 'link', url);
The popstate
window.onpopstate = function(e) {
if(e.state!==null){
var state = e.state;
state = state.split("&");
// ["cat=272", "dir=desc"]
jQuery.each(state, function(i,v){
var info = v.split('=');
fme_layered_add_params(info[0], info[1], 1);
});
fme_layered_make_request();
}
};
What am i doing wrong?
Thanks in advance!
I solved this problem.
Every time i went back it also pushed the current page. So i went back and the same page was pushed in history resulting in endless reloading of that certain page.
TL;DR?
check, double check, triple check how your code 'walks' through the lines.
Related
Does localStorage only work with variables inside the listener? I can't understand what's the difference.
var _form = document.querySelector("#formMovies");
_form.addEventListener('submit', ()=>{
var title = document.querySelector("#addMovie").value;
localStorage.setItem(title, title);
});
It works!! But the next one doesn't
var _form = document.querySelector("#formMovies");
var title = document.querySelector("#addMovie").value;
_form.addEventListener('submit', ()=>{
localStorage.setItem(title, title);
});
The reason it doesn't work in your second example is because your code checks the value of #addMovie when the page loads and stores it in title. Since the user hasn't inputted anything right as the page loads, title is set to undefined. It works in the first example because the value of #addMovie is being stored after the user is presumably done filling out the form.
How can I store the elements of an iframe into a variable?
This is something I want to happen within the parent.
I know the elements should have an id to implement this repeatedly proposed solution that does not work:
var foo = document.getElementbyId([IFRAME ID]).contentWindow.document.getElementbyID([ELEMENT ID]);
nor does this code work:
var foo = document.getElementbyId([IFRAME ID]).contentDocument.getElementbyID([ELEMENT ID]);
Saving each section into individual variables makes no difference.
i.e.
var x = document.getElementbyId([IFRAME ID]);
var y = (x.contentDocument || x.contentWindow.document);
var foo = y.getElementbyID([ELEMENT ID]);
What works? Please demonstrate a solution in jfiddle.
Thanks.
UPDATE:
I tried running this function with the iframe id passed into it (on my site there is a jukebox page which is loaded into the main iFrame and it has an iFrame itself -- which has an id called 'albumcover'):
function showIframeContent(id) {
var iframe = document.getElementById(id);
try {
var doc = (iframe.contentDocument)? iframe.contentDocument: iframe.contentWindow.document;
alert("The jukebox page's iframe URL is" +
doc.getElementById('albumcover').contentWindow.location.href);
}
catch(e) {
alert(e.message);
}
return false;
}
I then received this message:
[ Permission denied to access property "href" ]
-- 100% of my site, all referenced data...everything, is within a public_html folder...same domain, same hosting service area...the works.
What in the world is going on?
Thanks again.
The following is working for me:
$('#datatable').on('page.dt', function() {
alert("changed");
});
Whenever I am changing the page,the alert is shown.But if I want to alert the page no. which is clicked then what's the way
table.page.info() returns the current pagination information. That is current page, number of pages, recordsDisplay, recordsTotal and more.
var table = $('#datatable').DataTable();
$('#datatable').on('page.dt', function() {
var info = table.page.info();
var page = info.page+1;
alert('changed - page '+page+' out of '+info.pages+' is clicked');
});
see demo -> http://jsfiddle.net/qpLtLfaz/
So my problem is this. I can remove a record from localstorage proxy just fine the first time. But if I do it again, it gives me an error, where everything in the Store is undefined, like it didnt exist anymore.
onTapRemoveKegelReminder: function(button) {
console.log(button.getData());
//Find and delete the button and the record
var store = Ext.getStore('KegelReminders');
store.load();
store.filter('button_id', button.getData());
var record = store.first();
console.log(record);
console.log(button.getData());
console.log('Remove count'+ store.getCount());
if (typeof record !== 'undefined'||record!=null ) {
store.remove(record);
store.sync();
console.log('removed record correctly')
this.trainingCount--;
var rmButton = this.getKegelExercises().down('#container-' + button.getData());
this.getKegelExercises().remove(rmButton);
}
But if I restart my application, and then remove again it works fine. I cant seems to remove more than once without having to restart the application.
FYI in case anyone else finds this, removing a record from a Store only removes it from that instance of the store, not from the storage mechanism (for example, localstorage). If you want to do that you have to use the erase method on the model object.
store.remove(record); // may not even be necessary
record.erase();
store.sync();
I've been playing around with IBM's tutorial at this link.
http://www.ibm.com/developerworks/web/tutorials/wa-dojotoolkit/section6.html
I've done very well so far, but I can't seem to get the drop down list to populate the new group entry. Even the original code isn't working.
//Refresh the data store for the groups dropdown (in case groups added, edited or deleted)
function refreshGroupDropDown() {
var theStore = dijit.byId("edit_contact_group").store;
theStore.close();
theStore.url = "data/groups.php";
theStore.fetch();
}
Thanks!
Update: Still having trouble. I tried this below and still nothing. The function refreshGroupDropDown() is called when the user opens the edit contact windows or new contact window.
//Refresh the data store for the groups dropdown (in case groups added, edited or deleted)
function refreshGroupDropDown() {
var new_store = new ItemFileReadStore({url: 'data/groups.php' , clearOnClose: true});
var theStore = dijit.byId("edit_contact_group");
theStore.store = new_store;
theStore.close();
theStore.fetch();
}
//Clears the "Edit Contact" form, sets it up for adding a new contact
function newContact() {
var contact = contactsGrid.selection.getSelected()[0];
refreshGroupDropDown();
dojo.byId("edit_contact_real_id").value = "";
dojo.byId("edit_contact_id").value = "[NEW]";
dijit.byId("edit_contact_group").reset();
dijit.byId("edit_contact_first_name").reset();
dijit.byId("edit_contact_last_name").reset();
dijit.byId("edit_contact_email_address").reset();
dijit.byId("edit_contact_home_phone").reset();
dijit.byId("edit_contact_work_phone").reset();
dijit.byId("editContactDialog").set("title", "New Contact");
dijit.byId("editContactDialog").show();
}
//Process the adding of a new group to the database
function doNewGroup(e) {
e.preventDefault();
e.stopPropagation();
dojo.byId("new_group_ajax").value = "1";
if(this.isValid()) {
dojo.xhrPost({
form: this.domNode,
handleAs: "json",
load: function(data) {
if(data.success) {
okDialog.set("title","Group created successfully");
okDialogMsg.innerHTML = "The group <strong>"+data.name+"</strong> was created successfully.";
groupsStore.newItem({"id":data.id.toString(),"name":data.name}, {"parent": groupsModel.root, "attribute":"groups"});
groupsStore.save();
newGroupDialog.hide();
okDialog.show();
}
else {
okDialog.set("title","Error creating group");
okDialogMsg.innerHTML = data.error;
okDialog.show();
}
},
error: function(error) {
okDialog.set("title","Error creating group");
okDialogMsg.innerHTML = error;
okDialog.show();
}
});
}
}
Hopefully this helps! I'm a beginner so any help is appreciated.
I figured it out! The issue was with the index.html. The input tag for the groups drop-down list looks like this
<input dojoType="dijit.form.FilteringSelect" name="move_contact_new" store="groupsStore" searchAttr="name" query="{type:'node'}" id="move_contact_new" required="true" style="margin-bottom: 6px" />
The query attribute was never set correctly. Once I deleted query="{type:'node'}" the groups re-populate after adding, editing, or deleting groups.
A beginner answer for a beginner question.
Hope this can help any beginners out there.
Based on what you've posted, the only problem I see is with the line var theStore = dijit.byId("edit_contact_group").store;because it doesn't acutally create a dataStore. You need to make sure you also include something like `var edit_contact_group = new dojo.data.ItemFileReadStore();or an equivalent. Othewise, have you connected the refreshGroupDropDown() function to the appropriated event ('onclick' or whatever) using dojo.connect()? Have you loaded the function refreshGroupDropDown() using dojo.ready? ie. dojo.ready(function(){refreshGroupDropDown();});Those are always the first things that come to mind...