I'm trying to append my href attribute values by using the below code
$(document).ready(function() {
jQuery("#help_url").click(function(){
var href = $(this).attr('href');
alert(href);
var txt_api_key = $('#txt_api_key').val();
var txt_postcode = $('#txt_postcode').val();
var txt_countrycode = $('#txt_countrycode').val();
$('a#help_url').attr('href', href+txt_postcode+"/"+txt_countrycode+"?api_key="+txt_api_key);
});
});
This is working perfect. But the issue is after the first click the link will become http://api.fastway.org/v1/psc/pickuprf/2148/1?api_key=5340c900251a6105a19a58a1590472bb and on the next click after I changing the "txt_countrycode" value or if not chnaging any value it becomes http://api.fastway.org/v1/psc/pickuprf/2148/1?api_key=5340c900251a6105a19a58a1590472bb2148/1?api_key=5340c900251a6105a19a58a1590472bb
ie, again adding "href+txt_postcode+"/"+txt_countrycode+"?api_key="+txt_api_key"
How can I solve this?
One easy solution is to read the value of the href in dom ready and use it in the click handler, so that the href will have a non updated value
$(document).ready(function () {
var href = jQuery('#help_url').attr('href');
jQuery("#help_url").click(function () {
alert(href);
var txt_api_key = $('#txt_api_key').val();
var txt_postcode = $('#txt_postcode').val();
var txt_countrycode = $('#txt_countrycode').val();
$('a#help_url').attr('href', href + txt_postcode + "/" + txt_countrycode + "?api_key=" + txt_api_key);
});
});
When you click the button the click event will call .
the click event function have concatenation with existing url.So the existing url is append with country code
Related
It is known that URL with querystring parameter can be rewritten with .htaccess. For example
localhost/mynews/category.php?cat=news&subcat=9
To
localhost/mynews/news/9
But is there any way to customize anchor tag
which is shown in bottom left corner while hovering link.
localhost/mynews/category.php?cat=news&subcat=9
to
localhost/mynews/news/9
PHP, jquery/javascript or htaccess, any way can we customize ?
On hover you can get your anchor href get querystring value rebuild url and set new url using attr in anchor tag.
var link = '';
$("a").hover(function() {
link = $(this).attr('href');
var var1 = $.urlParam('cat', link);
var var2 = $.urlParam('subcat', link);
var url = link.split('?')[0] + '/' + var1 + '/' + var2;
$(this).attr('href', url);
}, function() {
$(this).attr('href', link);
});
$.urlParam = function(name, link) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(link);
if (results == null) {
return null;
} else {
return decodeURI(results[1]) || 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hover Me
Note: I take urlParam function from https://stackoverflow.com/a/25359264/965146 and slightly modified it. Rest code are mine.You must reset your url when anchor click may be routing didn't get your new url
I have this issue i'm trying to solve.
I have this page lista.php
In which i load another page (which refreshes every x seconds) named pagination.php
I use this script:
function LoadContent()
{
$('#lista').load('pagination.php');
}
$(document).ready(function(){
LoadContent(); //load contentent when page loads
setInterval('LoadContent()',30000); //schedule refresh
});
Well, there is this URL:
lista.php?id=3
I need the pagination.php to grab the id, but it won't work..
the pagination.php is inside lista.php... how can i solve it?
I tried the GET method..
Any suggestion please?
Thanks.
To obtain id from your url like lista.php?id=3 you could use
var url = window.location.href;
var queryStr = url.substring(url.indexOf("?")+1);
var id = queryStr.split('=')[1];
So the whole code maybe like:
function LoadContent()
{
var url = window.location.href;
var queryStr = url.substring(url.indexOf("?")+1);
var id = queryStr.split('=')[1];
$('#lista').load('pagination.php?id=' + id);
}
$(document).ready(function(){
LoadContent(); //load contentent when page loads
setInterval('LoadContent()',30000); //schedule refresh
});
Add the parameter to the url, e.g.:
function LoadContent()
{
var id = ... <== assign id here
$('#lista').load('pagination.php?id=' + id);
}
$(document).ready(function(){
LoadContent(); //load contentent when page loads
setInterval('LoadContent()',30000); //schedule refresh
});
If you're using AJAX to load dynamically then that's a different URL, so append the current query string to the request with something like location.search.substring(url.indexOf("?")).
$('#lista').load('pagination.php' + location.search.substring(url.indexOf("?")));
i think you can use this:
$('#lista').load('pagination.php?id=<?php echo $_GET['id'] ?>');
I'm trying to load content without reloading the whole page with this code
$(document).ready(function() {
$('article').load('content/index.php');
$('a.cta , a').click(function() {
var page = $(this).attr('href');
$('article').load('content/' + page + '.php');
return false;
});
});
For the most part its working fine as seen here:
The only problem I'm getting is that the links withing my content area aren't working but every other link outside my content area is. Why is that? What am I missing in my code?
that is beacuse you need to delegate the dynamically added element with on. click events won't work for dynamically added elements..
try this
$(document).on('click','a.cta , a',function() {
var page = $(this).attr('href');
$('article').load('content/' + page + '.php');
return false;
});
});
delegating it to the closest static parent is recommended for better performance.
$(article).on('click','a.cta , a',function() {
link to read more about on delegated event
It's because those as within the article element are dynamic. The click event was never bound to those. Instead, use event delegation:
$('article').on('click', 'a.cta, a', function(e) {
e.preventDefault(); //better than return false
var page = $(this).attr('href');
$('article').load('content/' + page + '.php');
});
You have to use delegated events (on() function).
$('article').load('content/index.php', function () {
$("article").on("click", 'a.cta , a', function() {
var page = $(this).attr('href');
$('article').load('content/' + page + '.php');
return false;
});
});
See the documentation for more information.
When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.
I managed to get it to work with this :
$(document).ready(function() {
$('article').load('content/index.php', function () {
$(document).on('click','a.cta , a',function() {
var page = $(this).attr('href');
$('article').load('content/' + page + '.php');
return false;
});
});
});
It's really frustrating when you barely know what you are doing.
try commenting out the line return false; and all the links will work.
so...
return false;
change to...
//return false;
Hi I am trying to append facebook friends thumbnail in list item and add trigger on each of them. but now it trigger the click but it's only getting fbid of the last appended item inside the click callback. How can I attach click event on each of them correctly?
for(var i=0;i<obj.photo.length;i++) {
var img=$('<img src="https://graph.facebook.com/'+obj.photo[i]['fb_id']+'/picture" />');
var anchor=$('');
var li = $('<li></li>');
var fbul = $('#fb_friends');
anchor.append(img);
li.append(anchor);
fbul.append(li);
anchor.click(function(){
alert(anchor.attr('id'));
});
}
the problem is because, you are using a closure variable anchor inside your callback function for click event. The solution to this problem is to fetch the clicked element from the event properties as given below. Inside the event handler method this points to the element to which the handler is registered to.
anchor.click(function() {
var $this = $(this);
alert($this.attr('id'));
});
But since you are working with dynamic element I recommend using event delegation with .on()
var fbul = $('#fb_friends');
fbul.on('click', 'a', function() {
var $this = $(this);
alert($this.attr('id'));
})
for (var i = 0; i < obj.photo.length; i++) {
var img = $('<img src="https://graph.facebook.com/' + obj.photo[i]['fb_id']
+ '/picture" />');
var anchor = $('');
var li = $('<li></li>');
anchor.append(img);
li.append(anchor);
fbul.append(li);
}
I am trying to get a PHP variable to send through javascript and I am having trouble. I am using a jQuery popup I found online and when a user clicks an item, I need that item_id variable to be fetchable in the popup where I want to add a form.
My PHP section.
<a href="#?w=500&item_id='.$stock['id'].'" rel="popup1" class="poplight">
and the Javascript.
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
var itemID = dim[0].split('=')[2]; //Gets the second query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<img src="/layout/close_pop.png" class="btn_close" title="Close Window" alt="Close" />');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
document.getElementById('popup1').innerHtml = itemID;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
I added what I thought you work, but it does not var itemID = dim[0].split('=')[2]; //Gets the second query string value and document.getElementById('popup1').innerHtml = itemID;
Use a sophisticated function to retrieve URL query parameters:
function getParameterByName(name, locationObject)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(locationObject.search);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
[Adopted from here]
Simply call it like so:
getParameterByName('item_id', someLink);
Working Fiddle: http://jsfiddle.net/ADpYT/
You have a simple oversight in your original code ..
When you obtain your dim variable, you get an array with 2 items split at & . In the above code you get ["w=500", "item_id=some_value"] .So in order to get the itemID you have to use dim[1].
var itemID=dim[1].split('=')[1];