Remove Single Variable from URL - javascript

I currently have the following:
$( "#Coupon" ).keyup(function() {
$(this).val (function () {
return this.value.toUpperCase();
})
var url = window.location.href;
var addon = $('#voucher').val();
$("#ApplyCoupon").attr('href', url + "&coupon=" + addon);
which checks a text field and then adds the content to a url variable to check if the coupon is vali the next time the page loads.
My issue is that if you check multiple coupons, it keeps adding &coupon=blah
Is there any way of just replacing the coupon variable in the URL instead of creating new ones?

Related

Refresh table for every 5 seconds for a specific URL

Basically i have a dynamic HTML table
<table id="example"></table>.
The contents inside the table changes based on the URL. My default
URL will be
index.php?action=add
For this i have written a function to refresh my table for every 5 seconds, which works fine
var autoLoad = setInterval(
function ()
{
$('#example').load('index.php?action=add #example').fadeIn("slow");
}, 5000);
Then i'l change my URL to
index.php?action=add&subdo=loc.
This will change the contents inside my HTML table.
So how do i refresh the new contents for every 5 seconds in my HTML table for index.php?action=add&subdo=loc
EDIT : I will have to change to multiple URL's for different contents in my TABLE for different URL's. NOT one
index.php?action=add&subdo=loc1
index.php?action=add&subdo=loc2
use window.location.search
try this: UPDATE
var autoLoad = setInterval(
function ()
{
var url = window.location.search;
$('#example').load('index.php' + url + ' #example').fadeIn("slow");
}, 5000);
You can make second function
var autoLoad2 = setInterval(
function ()
{
$('#example').load('index.php?action=add&subdo=loc #example').fadeIn("slow");
}, 5000);
this might solve.
If I understand right when you change the url in the browser the script remain the same...
did you try using the window.location like:
$('#example').load(window.location.href).fadeIn("slow");
this way the interval will re-call the current url whatever it is.
Let me know...
Try this:
var url = '',
autoLoad = setInterval(function() {
if (window.location.pathname.indexOf('subdo') != -1) {
url = 'index.php?action=add&subdo=loc';
} else {
url = 'index.php?action=add';
}
$('#example').load(url + ' #example').fadeIn("slow");
}, 5000);

Off click of focused div not activating on jQuery function

Here is my HTML
$html .= " <td><div class='edit_course' data-id='{$id}' data-type='_title' contenteditable='true'>{$obj->title}</div></td>";
Here is my jQuery:
var selector = 'div[contenteditable="true"]';
// initialize the "save" function
$(selector).focus(function(e) {
content_holder = $(this);
content = content_holder.html();
var id = $(this).data('id');
var type = $(this).data('type');
alert( id + type)
// one click outside the editable area saves the content
$('body').one('click', function(e) {
// but not if the content didn't change
if ($(e.target).is(selector) || content == content_holder.html()) {
return;
}
// Edited out AJAX call
});
});
The problem is, when I click on the div, the alert below triggers. When I click outside of the div (after the edit has been made), nothing happens. Can anyone see what is happening?
First click let's user edit content in div. The first click outside, should make ajax call to save.
EDIT: From recommendation below.
Here is new code this works perfectly except it calls the DB every time, all I need is a check to do that only if data is different and I think I got it from there.
Edit2: Final Code
var original_value = '';
$(".edit_course").focus(function(e) {
original_value = $(this).html();
});
// initialize the "save" function
$(".edit_course").blur(function(e) {
var content = $(this).html();
var id = $(this).data('id');
var type = $(this).data('type');
if (content !== original_value) {
// Ajax edited out
}
});
You're not using one() correctly. What you should do is run the AJAX when focus is taken away from the div. Using blur() would probably be your best bet here.
$('body').blur(function(e) {
// your code here...
});

JS: incrementing pages (page1.html, page2.html,page3.html...) for window.replace

What approach should for this scenario. I want the page to go to the next page after it finishes all the function it needs to.
so, example. after all function for page1.html has been done, it will call a function next_page().
next_page() function will evaluate the current page and add "1" it. so from page2.html it will now be page3.html. page3.html will also contain the same function of the previous html, that after all the functions have been done, it will call the next_page() function that will also evaluate the current and increment it.
//current_url = "mysite.com/page1.html"
var current_url = window.location;
var end_page = "mysite.com/page12.html"
var increment_url = eval(current_ur + 1 );
if(current_url != end_page ) {
setTimeout(next_page,2000)
}
else {
alert("this is the last page!")
}
function next_page() {
window.location.replace(increment_url);
}
var increment_url = addone('mysite.com/page1.html');
returns mysite.com/page2.htm
function addone(url) {
var pattern=new RegExp("(.*)([0-9+])(\..*)");
var match=pattern.exec(url);
return match[1] + (parseInt(match[2]) + 1 ) + match[3];
}
​
so assuming the example URL you gave is accurate enough that the regular expression will work use
var increment_url = addone(current_url);
The easiest thing to do would be to have a hidden input on each page that has the value of the next page url. This would allow you to use arbitrary page urls and still be able to get the effect you want.
Using jQuery
$(function() {
setTimeout(function() {
var url = $('#next_page_url').val();
window.location.replace(url);
}, 2000);
});
<input type="hidden" id="next_page_url" value="http://mysite.com/page2.html" />

How to get the parameters of an href attribute of a link from the click event object

Is there a simple way to get the parameters at the end of an href attribute of a clicked link using the click event object?
I have some jQuery code that looks like this:
$(document).ready(function() {
$('#pages').delegate("a", "click", function(e) {
var formData = "parameters to clicked link";
$.ajax({
url: 'friends2.php',
dataType: 'json',
data: formData,
success: function(data) {
$('#searchbutton').attr("disabled", false);
$('#searchresults').html(data.results);
$('#pages').html(data.paginate);
}
});//ajax end
return false;
});
});
And here is the relevant HTML:
<div id="pages">
<span class="disabled">previous</span>
<span class="current">1</span>
2
</div>
What I'm trying to do is paginate the results of a search that I've done with ajax. The search runs fine and a get a list of users that match the query. The part of the results script that creates the pagination links is also working.
In the example above, there are two pages of results. What I want to do when a user clicks the link to go to page 2 of the results is to intercept the link click and instead create a new ajax request using term=ma&p=2 as the data passed to the request.
So, long story short, is there an easy way to get term=ma&p=2 from the event object passed the the anonymous function in my jQuery above?
You can use the this.href method to read the link attribute:
$('#pages').delegate("a", "click", function(e) {
var str = this.href.split('?')[1];
Example:
str = 'friends.php?term=ma&p=2';
console.log(str.split('?')[1]); // output: term=ma&p=2
Yes, you can use the .search property of the link...
alert( this.search );
DEMO: http://jsfiddle.net/sHqmF/
To get rid of the ?, just .slice() it...
this.search.slice(1)
DEMO: http://jsfiddle.net/sHqmF/1/
Developing Sarfraz answer, given an anchor
<a class="the_link" href="http://www.example.com/?a=1&date=2014-7-30&cat=all">click here</a>
You can get the query params
jQuery(document).ready(function($) {
$('a.the_link').click(function(){ // when clicking on the link
var href = $(this).attr('href'); // get the href of the anchor
var params = get_params_from_href(href);
console.log(params); // OUTPUT: [a: "1", date: "2014-7-30", cat: "all"]
return false; // optional. do not navigate to href.
});
function get_params_from_href(href){
var paramstr = href.split('?')[1]; // get what's after '?' in the href
var paramsarr = paramstr.split('&'); // get all key-value items
var params = Array();
for (var i = 0; i < paramsarr.length; i++) {
var tmparr = paramsarr[i].split('='); // split key from value
params[tmparr[0]] = tmparr[1]; // sort them in a arr[key] = value way
}
return params;
}
}
jQuery itself doesn't support URL parsing. However there are lots of jQuery extensions available which do and make this an easy task. For example
https://github.com/allmarkedup/jQuery-URL-Parser
With this extension you can do the following
$('#pages').delegate("a", "click", function(e) {
var href = $(this).attr('href');
var url = $.url(href);
var query = url.attr('query')
...
});
The extension itself supports much more than just the query string. You can use attr for practically every part of the url.

jQuery function - pass params from the URL into the function

I have following function:
It bassicly takes the value form clicked href and than load file into the #loader div with the same name.
$('.loader').click( function() {
// Check clicked element href
var ActiveTab = $(this).attr("href");
//Content
var TrimedClickedTab = $(this).attr("href").substring(1);
$('#loaderDiv').load( TrimedClickedTab +'.html', function() {
// Show New Loaded Div
});
return false;
});
How can I pass param into the function form the URL and than run it with this param?
I want the URL to set the var ActiveTab = "#form"
I'm looking to run this on the load, so it would load straight away given file. ( var #ActiveTab)
I think you're looking for something like this:
var path = document.location.toString();
var anchor = '#' + path.split('#')[1];
So, if your URL looks like "http://example.org/test#form", anchor will contain "#form"

Categories