I've coding pagination with JS
out like this
<a id="prev">Previous Page</a>
<a id="next">Next Pages</a>
and JS Code like this
$('#next').click(function(){
var url = window.location.href;
var urllen = url.length;
var cur = parseInt((url.substr(urllen-1)).substr(0,1));
var nurl = url.substr(0,(urllen-1))+(cur+1);
if(cur=="NaN") { window.location = (url); }
else { window.location = (nurl); }
});
$('#prev').click(function(){
var url = window.location.href;
var urllen = url.length;
var cur = (url.substr(urllen-1)).substr(0,1);
if(cur==1||cur=="NaN") { window.location = (url); }
else { var nurl = url.substr(0,(urllen-1))+(cur-1); window.location = (nurl); }
});
and my url like
http://localtest/rftpages/record.html?s=1&l=1&bike_id=1
let's me explain the reason that i'm using a JavaScript method is i don't want to change my URL that containing page variable that i use in my whole page
so what i'm doing is get all the URL and change bike_id value to next/prev
and the problem is when it count to 19 or URL like
http://localtest/rftpages/record.html?s=1&l=1&bike_id=19
then i goes next again the URL will become
http://localtest/rftpages/record.html?s=1&l=1&bike_id=110
any idea/suggestion to fix this ?
Thanks
What you should do is grab the page from the query string and the either increment or decrements it based on what is clicked.
all you need is this function to get the parameters:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
So if I assume your example:
http://localtest/rftpages/record.html?s=1&l=1&bike_id=19
Then you can change your function to be:
$('#next').on("click", function() {
var currentPageParameter = getParameterByName("bike_id");
var s = getParameterByName("s");
var l = getParameterByName("l");
var myPage = parseInt(currentPageParameter);
if (! isNaN(myPage )) {
myPage = myPage + 1;
window.location = location.protocol + '//' + location.host + location.pathname + "?s=" + s + "&l=" + l + "&bike_id=" + myPage;
}
});
$('#prev').on("click", function() {
var currentPageParameter = getParameterByName("bike_id");
var s = getParameterByName("s");
var l = getParameterByName("l");
var myPage = parseInt(currentPageParameter);
if (! isNaN(myPage )) {
myPage = myPage - 1;
window.location = location.protocol + '//' + location.host + location.pathname + "?s=" + s + "&l=" + l + "&bike_id=" + myPage;
}
});
Related
The following function is designed to replace a variable in the URL.
It works, but I want to make it so that if you pass in a variable that doesn't exist in the URL, it will add it to the URL.
window.setUrlParameter = function(param, value) {
const regExp = new RegExp(param + "(.+?)(&|$)", "g");
const newUrl = window.location.href.replace(regExp, param + "=" + value + "$2");
window.history.pushState("", "", newUrl);
}
There is the function. It takes the param name that you want to replace, and the value you want to set.
As I stated earlier, I want it to be able to not only replace variables, but set them as well.
Thanks!
This function should also be faster than using a regex, modified from this answer.
(The arrow function is just ES6 syntax, you can use normal functions if you want too)
window.setUrlParameter = (param, value) => {
var url = window.location.href;
var hash = location.hash;
url = url.replace(hash, '');
if (url.indexOf(param + "=") >= 0)
{
var prefix = url.substring(0, url.indexOf(param));
var suffix = url.substring(url.indexOf(param));
suffix = suffix.substring(suffix.indexOf("=") + 1);
suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
url = prefix + param + "=" + value + suffix;
}
else
{
if (url.indexOf("?") < 0)
url += "?" + param + "=" + value;
else
url += "&" + param + "=" + value;
}
window.history.pushState(null, null, url + hash);
}
You have the regex, you can just test the url for the same thing, and add it if it isn't there
window.setUrlParameter = function(param, value) {
const regex = new RegExp(param + "(.+?)(&|$)", "g");
const exist = regex.test(window.location.href);
let addQS = window.location.search.length > 0 : '&' : '?';
let newUrl;
if (exist) {
newUrl = window.location.href.replace(regExp, param + "=" + value + "$2");
} else {
newUrl = window.location.href + addQS + param + "=" + value;
}
window.history.pushState("", "", newUrl);
}
I'd highly recommend cleaning this up with RegEx, but you could just check whether or not the href includes the parameter
window.setUrlParameter = function(param, value) {
const regExp = new RegExp(param + "(.+?)(&|$)", "g");
let newUrl = window.location.href.replace(regExp, param + "=" + value + "$2");
if (! window.location.href.includes(param) )
newUrl+='&'+param+'='+value
window.history.pushState("", "", newUrl);
}
Nobody here used the URLSearchParams API, so I thought I'd show you that way:
function modifyLocation( param, value )
{
var qParams = window.location.search.split('?')[0];
var urlParams = new URLSearchParams(qParams);
if( urlParams.has(param) ){
urlParams.delete(param);
}
urlParams.append(param, value);
return window.location.href.split('?')[0] + '?' + urlParams.toString();
}
// To test on CodePen, I used editors = 4, because CodePen has that param
var newUrl = modifyLocation('editors','4');
console.log(newUrl);
// window.history.pushState("", "", newUrl);
I am writing a REST client to remote api. And I am using xmlHTTPRequest to get information about images.I need to refresh my images in every 30 seconds. My implementation of setTimeout function doesn't work. Anyone can help me? Thank you in advance.
Here is my code: Image.js
function Camera(id, name, ip, port) {
var button = document.createElement("button");
button.classList.add("camera");
button.innerHTML += "<h3>" + name + "</h3><br>";
var ismin = true;
this.id = id;
this.name = name;
this.ip = ip;
this.port = port;
this.getURL = function getURL(min) {
var url = 'http://' + ip + ":8080/api";
return min ? url + '/miniature/' + id + '?t=' + new Date().getTime() : url + '/image/' + id + '?t=' + new Date().getTime();
};
this.appendImg = function appendImg(url) {
button.innerHTML = "<h3>" + name + '</h3><br><img src="' + url + '"/>';
setTimeout(appendImg(url),30000);
};
this.showElement = function showElement(url) {
this.appendImg(url);
var that = this;
document.querySelector('#camera-section').appendChild(button);
button.addEventListener('click', function () {
ismin = !ismin;
that.appendImg(that.getURL(ismin), false);
});
};}
And a part of main.js:
function showImage(response) {
response = JSON.parse(sessionStorage.getItem('camera'));
console.log(response);
for (var i = 0; i < response.length; i++) {
var a = response[i];
var camera = new Camera(a.cameraId, a.name, ip, port, true);
var curl = camera.getURL(true);
camera.showElement(curl);
}
}
xml.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
sessionStorage.setItem('camera',JSON.stringify(response));
//console.log(sessionStorage.getItem('camera'));
showImage(sessionStorage.getItem('camera'));
}
};
xml.open('GET', mainUrl);
xml.send(null);
Regarding the comment of Pranay Kumar, first part of your code could be like this::
function Camera(id, name, ip, port) {
var button = document.createElement("button");
button.classList.add("camera");
button.innerHTML += "<h3>" + name + "</h3><br>";
var ismin = true;
this.id = id;
this.name = name;
this.ip = ip;
this.port = port;
this.getURL = function getURL(min) {
var url = 'http://' + ip + ":8080/api";
return min ? url + '/miniature/' + id + '?t=' + new Date().getTime() : url + '/image/' + id + '?t=' + new Date().getTime();
};
this._appendImg = function(url) {
return function() {
button.innerHTML = "<h3>" + name + '</h3><br><img src="' + url + '"/>';
}
};
this._timerHandle = 0;
this.appendImg = function(url) {
if (this._timerHandle) {
clearInterval(this._timerHandle);
}
this._timerHandle = setInterval(this._appendImg(url),30000);
}
this.showElement = function showElement(url) {
this.appendImg(url);
var that = this;
document.querySelector('#camera-section').appendChild(button);
button.addEventListener('click', function () {
ismin = !ismin;
that.appendImg(that.getURL(ismin), false);
});
}
}
You want refresh image every 30 seconds.
So use setInterval instead of setTimeout
I tried to run this but it doesn't work.
It is intended to return a variable assigned inside a function, that was passed as callback to sendRequest(), which is retrieving data from the Internet through XMLHttpRequest asynchronously.
Can anyone tell me why this is not working and always returning ""?
function sendRequest(requestCode, args, callback){
var req = requestEngineUrl + "?req=" + requestCode + ";" + args;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4)
{
if(callback != null){
callback(xmlHttp.responseText);
}
}
};
xmlHttp.open("GET", req, true);
xmlHttp.send(null);
}
this.assembleProcess = function(){
if(!isNull(this.id) && !isNull(this.titles)){
var titles = this.titles;
var id = this.id;
c = "";
sendRequest('304', id,
function(result){
var res = result.split("/");
var title = res[0];
var possibilities = res[1];
var fcontent = title + '<br><div>';
if(titles.length != possibilities){
console.log("WARNING: [SURVEYCARD].titles has not the same length as possibilities");
}
for(i = 0; i < possibilities; i++){
fcontent += '<div><a onclick="sendRequest("301",' + id + ',' + i + ',null)">' + titles[i] + '</a></div>';
}
fcontent += '</div>';
c = fcontent;
});
return c;
}
As an XMLHttpRequest is async, you should write an async function for that matter, like this
this.assembleProcess = function(callback){
if(!isNull(this.id) && !isNull(this.titles)){
var titles = this.titles;
var id = this.id;
c = "";
sendRequest('304', id,
function(result){
var res = result.split("/");
var title = res[0];
var possibilities = res[1];
var fcontent = title + '<br><div>';
if(titles.length != possibilities){
console.log("WARNING: [SURVEYCARD].titles has not the same length as possibilities");
}
for(i = 0; i < possibilities; i++){
fcontent += '<div><a onclick="sendRequest("301",' + id + ',' + i + ',null)">' + titles[i] + '</a></div>';
}
fcontent += '</div>';
c = fcontent;
callback(c)
});
}
and then, instead of using this.assembleProcess as a function with a result, you should pass a function as parameter:
Instead of
console.log(this.assembleProcess);
do this
this.assembleProcess(function(c){console.log(c)});
For example I have the URL:http://www.website.com/example?something=abc&a=b
How can I get the something's content, "abc" and the content of a as strings?
Thanks in advance,
Mateiaru
var path = window.location.href;
var index = path.indexOf('?');
var paramstr = path.substring(index + 1);
var paramstrs = paramstr.split('&');
paramstrs.forEach(function(str, index){
var parts = str.split('=');
alert('value of ' + parts[0] + ' is ' + parts[1])
});
//var url = window.location.href;
var url = "http://www.website.com/example?something=abc&a=b";
var attributes = url.split("?")[1].split("&");
var keyValue = {};
for(i in attributes)
{
var pair = attributes[i].split("=");
keyValue[pair[0]] = pair[1];
}
alert(keyValue["something"]);
alert(keyValue["a"]);
Use a function helper:
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
Then call it like:
var aValue = getURLParameter(a);
I have this function which returns some XML datas from a foreign website :
function sendData()
{
var dev_statut = jQuery("select[name='statut']").val();
var dev_fdpaysid = jQuery("select[name='pays']").val();
var dev_fddeffet = jQuery("input[name='date_effet']").val();
var dev_fdnbadu = jQuery('select[name="nb_adultes"]').val();
var dev_fdnbenf = jQuery('select[name="nb_enfants"]').val();
var date_naiss_a_val = jQuery("input[name^=date_naissance_a]").map(function() {
var dev_date_naiss_a = 'dev_fadnaiss_';
return dev_date_naiss_a + this.id + '=' + this.value;
}).get().join('&');
var date_naiss_e_val = jQuery("input[name^=date_naissance_e]").map(function() {
var dev_date_naiss_e = 'dev_fadnaiss_';
return dev_date_naiss_e + this.id + '=' + this.value;
}).get().join('&');
var xdr = getXDomainRequest();
xdr.onload = function()
{
alert(xdr.responseXML);
var xml = xdr.responseXML;
var prod = xml.documentElement.getElementsByTagName("produit");
var proddata = [];
proddata.push('<ul>');
var len = prod.length;
for (var i = 0; i < len; i++) {
var nomprod = xml.getElementsByTagName('nomprod')[i].firstChild.nodeValue;
var url = xml.getElementsByTagName('url')[i].firstChild.nodeValue;
var desc = xml.getElementsByTagName('desc')[i].firstChild.nodeValue;
var texte = xml.getElementsByTagName('texte')[i].firstChild.nodeValue;
proddata.push("<li><div class='resultat_produit'>" + "<h1>" + nomprod + "</h1>" + "<p class='from_devis_desc'>" + desc + "</p>" + "<p class='form_devis_texte'>" + texte + "</p>" + "<a href='" + url + "'class='btn_url'>Faire un devis</a>" + "</div></li>");
}
proddata.push('</ul>');
jQuery('#mydiv2').append(proddata.join("\n"));
jQuery('.resultat_produit a').click(function(e)
{
e.preventDefault();
var href = jQuery(this).attr('href');
jQuery('#myDiv').empty();
jQuery('#myDiv').append('<iframe src="'+ href +'" scrolling="auto" width="960" height="100%"></iframe>');
});
}
xdr.open("GET", "http://www.MYURL.fr/page.php?dev_statut="+ dev_statut +"&dev_fdpaysid="+ dev_fdpaysid +"&dev_fddeffet="+ dev_fddeffet +"&dev_fdnbadu="+ dev_fdnbadu +"&dev_fdnbenf="+ dev_fdnbenf +"&"+ date_naiss_a_val +"&"+ date_naiss_e_val +"");
xdr.send();
}
It works fine on any major browsers (Chrome, FF, etc) but not on ... IE ! I've opened the console and it says : "DocumentElement is undefined ..."
I'm tired and can't fix that, any help will be very very appreciated !!