var Result;
$(document).ready(function(){
location.href="index.php?Result=" +1;
$("a").click(function(){
Result=$(this).attr('id');
location.href="index.php?Result=" + Result;
})
});
<div id="tabs">
<ul>
<?php include "config.php";
$query = "select * from tabs";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result)) {
$name = $row['name']; $tabid = $row['tabid'];
echo '<li><a id="' . $tabid . '" href="#' . $name . '"> ' . $name . '</a></li>';
} ?>
</ul>
</div>
Hie,
I have seven tabs,which are fetched from database using mysql query,Onclick on each tab am passing the tab value from javascript to php variable and by using that tabvalue am running the required querys to load the data into tabs,My issue is am unable to load the first tab content by default,on click the first tab content is loading properly,i want that first tab content to load by default here am using jquery ui tabs,when i followed the above code by calling first tab before onclick it is loading multiple times....and even focus is moving to first tab by default...suggest any solution......thanks....
The reason is, you are redirecting to index.php from the same file. So during the first execution of document ready function, it redirects you to the same file with a different query string parameter. But since the document ready function will execute again now, it keeps on reloading.
The simplest approach will be to handle this in PHP, when the "Result" parameter is not set, make it as 1.
In a javascript way, you can grab the query string value and check if "Result" parameter is set. If its not set then redirect the page to index.php?Result=1.
A javascript way of getting query string parameter is below.
function param(name)
{
var url = window.location.search.substring(1);
var query = url.split('?')[0];
var data = query.split('&');
for(var i in data)
{
if(data[i].split('=')[0] == name)
{
return data[i].split('=')[1];
}
}
}
You can call it by using
var page_num = param('Result');
if(page_num == null)
{
location.href = 'index.php?Result=1';
}
try this
var Result = 1;
$(document).ready(function(){
location.href="index.php?Result=" + Result;
$("a").click(function(){
Result=$(this).attr('id');
location.href="index.php?Result=" + Result;
})
})
This will trigger automatically first tab click.
<script type="text/javascript">
$('.parent > a').trigger('click');
</script>
var Result;
$(document).ready(function(){
$("a").click(function(){
Result=$(this).attr('id');
location.href="index.php?Result=" + Result;
})
}
And Body tag
<body onload="location.href='index.php?Result=1'">
Related
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
I want to change url without reload the page because Im using AJAX function to reload a div.
The problem is that when the AJAX load the div, it doesn't read the url parameter.
My code (I've already load the jquery.js etc.) :
index.php
<a href="#page=1" onClick='refresh()'> Link </a>
<a href="#page=2" onClick='refresh()'> Link2 </a>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
function refresh() {
$("#test").load("mypage.php"); //Refresh
}
</script>
<div id="test">
</div>
mypage.php
<?php
if (isset($_GET['page'])){
$page = $_GET['page'];
}
echo $page;
?>
PHP can't read the fragment without reloading the page. This can be done using JS.
Below the script I use to read the parameter values without reloading the page. I don't think it's the best method there is, as there are plugins you could use to do the same (and much more), but it works. I found it online some time ago, but unfortunately I don't remember where :(
var urlParams;
(window.onpopstate = function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.hash.slice(1);
urlParams = {};
while (match = search.exec(query)) {
urlParams[decode(match[1])] = decode(match[2]);
}
})();
You would then get the parameter value with:
urlParams['page']
If you will work a lot with hash urls, you should check out this plugin: http://benalman.com/projects/jquery-bbq-plugin/
Getting after # hash tag:
With PHP (Required page load)
parse_url() fragment index thats you need
$url = parse_url($_SERVER['REQUEST_URI']);
$url["fragment"]; //This variable contains the fragment
With jQuery: (Not required page load)
var hash = $(this).attr('href').split('#')[1];
var hash = $(this).attr('href').match(/#(.*$)/)[1];
Demo (Used without hash tag)
index.php
Link | Link2
<script type="text/javascript">
$(".myLink").click(function(e) { // when click myLink class
e.preventDefault(); // Do nothing
var pageId = $(this).attr('data-id'); // get page id from setted data-id tag
$.ajax({
type:'POST',
url:'mypage.php', // post to file
data: { id: pageId}, // post data id
success:function(response){
$("#test").html(response); // write into div on success function
}
});
});
</script>
<div id="test"></div>
mypage.php
<?php
// get with $_POST['id']
echo "Loaded Page ID: ".($_POST['id'] ? $_POST['id'] : "FAILED");
?>
You need to pass a page parameter to the URL you're requesting.
Try this:
<a href="#page=1" onClick='refresh(1)'> Link </a>
<a href="#page=2" onClick='refresh(2)'> Link2 </a>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
function refresh(pageNumber) {
$("#test").load("mypage.php?page="+pageNumber); //Refresh
}
</script>
It is possible for you to pass parameters through the load() function in jQuery.
There are 2 common ways of doing so:
Using get:
JS:
$('#test').load('mypage.php?page=mypage');
PHP:
<?php
if (isset($_GET['page']))
{
$page = $_GET['page'];
}
echo $page;
?>
Or using data as a post:
JS:
$('#test').load('mypage.php', { page: mypage });
PHP:
if (isset($_POST['page']))
{
$page = $_POST['page'];
}
echo $page;
?>
I'm looking to put a div on my website where the content changes based on what link is clicked without refreshing. The content to put there comes from a MySQL database and it's put in JSON.
My problem is that I can't get the JSON data to display when clicking the links.
Here's the script I'm using:
$(document).ready(function () {
$.getJSON("jsondata.php",rightSideData);
function rightSideData(data) {
for(var i=0; i<data.length;i++) {
$("#changetext"+data[i].id).click(function() {
$("#rightside").html("<h1>" + data[i].title + "</h1><p />" + data[i].content);
});
}
}
});
This is the div element that has to change:
<div class='rightside' id='rightside'>Test</div>
The links are constructed this way:
echo "<a id='changetext" . $row['id'] . "'> ";
echo "<div class='tile'>";
echo "<h2>Tile</h2></div></a>";
I've tested the different elements and they work fine (changing the divs content with hardcoded data, displaying the JSON data), but I'm having a hard time figuring out why the combined thing isn't working.
Objects does'nt have a length, use $.each to iterate it instead, unless it's actually an array containing objects :
$(document).ready(function () {
$.getJSON("jsondata.php",rightSideData);
function rightSideData(data) {
$.each(data, function(i, d) {
$("#changetext" + d.id).on('click', function() {
var h1 = $('<h1 />', {text : d.title}),
p = $('<p />', {text : d.content});
$("#rightside").html(h1.add(p));
});
});
}
});
The problem is that i var will be data.length at the end of the loop and that's what the click handler will see.
I'm attempting to take the ImageResolver plugin and adapt it to work with a php array.
Stripping the code to this returns the image without a form:
$(function(){
var url = $('#url').val();
ImageResolver.resolve(url, function(image){
if (image) {
$('#result').html('<img src="' + image + '" alt="">');
} else {
$('#result').html('<h2>No image found</h2>');
}
});
});
I want to adapt it to work within a php foreach loop. results would be replaced on the next class='result' div. IE: after the page has loaded the urls from the query, the function will parse the url and return image link if one is found. I'm guessing I need to use (each) or this(), but I can't figure it out.
can someone point me in the right direction?
<script src="ImageResolver/URI.min.js"></script>
<script src="ImageResolver/ImageResolver.js"></script>
<?
$javascriptarray = 'var urls = [';
$counter=0;
foreach (array('http://www.apple.com/','http://github.com/','http://www.test.com/') as $url)
{
if ($counter++ > 0) $javascriptarray .= ',';
$javascriptarray .= '"'.$url.'"';
}
$javascriptarray .= '];';
?>
<script>
<?=$javascriptarray?>
//The ImageResolver will try all the resolvers one after the other
//in the order of their registration
//Resolvers that guess the image URL
ImageResolver.register(new FileExtensionResolver());
ImageResolver.register(new ImgurPageResolver());
ImageResolver.register(new NineGagResolver());
ImageResolver.register(new InstagramResolver());
//Resolvers that need extra ajax requests
ImageResolver.register(new ImgurAlbumResolver());
ImageResolver.register(new OpengraphResolver());
ImageResolver.register(new WebpageResolver());
//Some jQuery code to make the demo work
//Use a crossdomain proxy (required by some plugins)
$.ajaxPrefilter('text', function(options) {
options.url = "http://furious-stream-4406.herokuapp.com?src=" + encodeURIComponent(options.url);
});
$(function(){
var length = urls.length,
url = null;
for (var i = 0; i < length; i++) {
url = urls[i];
ImageResolver.resolve(url, function(image){
if (image) {
$('#result').append('<img src="' + image + '" alt=""><br>');
} else {
$('#result').append('<h2>No image</h2>');
//$('#result').append('<h2>No image found for ' + url + '</h2>');
}
});
}
});
</script>
Watch out cause ImageResolver.resolve() works asynchrone you can get unexpected results. Call ImageResolver.resolve() again before the previous call has finished will change url in $('#result').append('<h2>No image found for ' + url + '</h2>'); to the url of your last call by example. To prevent this you need to initialize a new Resolver in the for-loop. see: Javascript prototypes and instance creation
I have a slider that load all of my content at once. Into a div. Like so:
external page.php
$get_users = mysql_query("SELECT * FROM user WHERE id!='$user_id'");
while ($rows = mysql_fetch_assoc($get_users)) {
$id = $rows['id'];
$firstname = $rows['firstname'];
$display_info .= '
<div class="f_outer" id="' . $id . '">
<div class="f_name likeu">' . $firstname . '</div>
</div>';
}
echo $display_info;
I call this page from my find.php page using bxslider
Here is my find.php page below.
<script type="text/javascript">
$(function() {
var slider = $("#slider1").bxSlider();
$("#slider-like").live('click', function() {
slider.goToNextSlide();
return false;
});
});
</script>
<div id="slider-like>Yes</div>
<div id="slider1">
<?PHP
include ("external.php");
?>
</div>
So what I get is all of my .f_outer div on the find.php page. I have hundreds of user and they will all be loaded at once. I would like to only load one slide at a time. So when I click #slider-like it load one of my dive from my external page.
If you include external.php, it loads all of the data from user. If you want to dynamically load, you need to use ajax instead of including the file on the server. You can keep track of what user you are up to with JS or the php session. I think the former is easier:
var nextUser = 0;
$(document).on('click', '#slider-like', function (e) {
var slider = $("#slider1").bxSlider();
$("#slider1").load("getuser.php?num=" + nextUser, function () {
slider.goToNextSlide();
nextUser++;
});
e.preventDefault();
});
Then, on getuser.php, you would have:
$num = isset($_GET['num']) ? $_GET['num'] : exit;
$query = "SELECT * FROM user WHERE id != '$user_id' LIMIT $num,1";
This queries the $numth user and limits it to one result.
NOTE: You should use PDO or mysqli instead of mysql_*. Both $user_id and $num need to be escaped.