I have some issues with JQuery.
Code;
$(document).ready(function(){
$("#area_results").click(function(){
$("#areaclickpass2 a").click(function(){
var value = $(this).html();
var input = $('#inf_custom_TESTclubarea');
input.val(value);
$("#area_results").hide(); // hide results after click
});
});
});
The current website is requiring 2 clicks to input the value into a field.
I understand why it's doing this (Best solution I can think of to achieve the outcome), however I was curious whether it is possible to achieve the same result by only using a single click.
Thanks for your time.
Create a variable that counts up with each click and execute your code when that variable equals 2.
$(document).ready(function(){
var click_count = 0;
$("#area_results").click(function(){
click_count++;
if(click_count==2){
var value = $(this).html();
var input = $('#inf_custom_TESTclubarea');
input.val(value);
$("#area_results").hide(); // hide results after click
}
});
});
You are binding a event handler within another event handler. #areaclickpass2 will not be handled unless you click on #area_results first.
Just move $('#areaclickpass2') event binding out of #area_results scope:
$("#area_results").click(function(){
//may not even be necessary to have this
});
$("#areaclickpass2 a").click(function(){
var value = $(this).html();
var input = $('#inf_custom_TESTclubarea');
input.val(value);
$("#area_results").hide(); // hide results after click
});
Related
I have built two functions which work separately (when the other is deleted) but do not work together. The overall aim is that when a person selects the number of results they want to see per page, this then reloads the page, and the value is put in the url and then retrieved using get in php; and then on the new page the selected value in the drop down menu to is the value what triggered the reload.
Jquery
$(document).ready(function(){
//the first section takes the value from the php script and then selects the option if it's not null - this works fine on it's own
var data = "<?php echo $rp;?>";
if (data){
$("#bo2 option[value="+data+"]").attr('selected', 'selected');
}
//this too works fine on it's own but not with the above
$('#bo2').change(function(){
var opt = $(this).val();
var url = "sales.php?results=";
var newurl = url + opt;
window.location.replace(newurl);
});
});
Together, the first works fine, in that it re-selects the right value if, say, I put ?results=50 after sales.php but then the jQuery to trigger the reload doesn't work. What am I doing wrong?
Just to clarify. The first page is called "sales.php" and the drop down menu has the currently selected value of "10", with 25 and 50 being other options. When I click on another number the jquery doesn't work. However should I type into the url the ending "?result=50", for example, it does work; and the drop down menu now shows 50; when i click on ten, the url updates, and the drop down shows ten also; the problem then is they seem to conflict only at the start, as it were.
It would seem the problem may concern how jquery deals with php. Take for example the following first example which works, and then the second which doesn't:
1)
$(document).ready(function(){
$('#bo2').change(function(){
var opt = $(this).val();
var url = "sales.php?results=";
var newurl = url + opt;
window.location.replace(newurl);
});
});
2) This change function however will not trigger a reload of the page because of the inclusion of the php defined jquery variable.
$(document).ready(function(){
var data = "<?php echo $rp;?>";
$('#bo2').change(function(){
var opt = $(this).val();
var url = "sales.php?results=";
var newurl = url + opt;
window.location.replace(newurl);
});
});
This achieves what I want (I don't know if the php posed a problem or not). The function is from here - Get url parameter jquery Or How to Get Query String Values In js.
Also, I'm surprised nobody more experienced than me didn't point out what also seems to have made a difference; the "first" function in the original post needs to in fact be second.
So the below will reload a new page, when a user clicks on an option in a select menu with pre-defined options for how many results they want to see per page; this value will then show in the url, and, importantly, the current select value of the select menu will now be this value also; this is important so that if the user goes back to the original number of views, the change() function works still.
$(document).ready(function(){
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
var data = getUrlParameter('results');
$('#bo2').change(function(){
var opt = $(this).val();
var url = "sales.php?results=";
var newurl = url + opt;
window.location.replace(newurl);
});
if (data)
{
$("#bo2 option[value="+data+"]").attr('selected', 'selected');
}
});
In my jquery mobile app, when I click a list element, I get the id of that element. Now I want to pass that id to another page so I can make a query to the database. What would be the best way to achieve this? I tried with a form to post the id, but I don't want a form with a submit button on the page. I also tried using sessionStorage, but I am unsure how to use it properly. Presently, when I click a list element, an alert shows me the id of that selected list element.
<script>
$(document).ready(function(){
$("li").click(function() {
var journeyID = this.id;
sessionStorage.journeyId = journeyID;
alert(sessionStorage.journeyId);
var j = getElementById(journeyDetailsForm);
j.innerHTML = journeyID;
//document.forms["journeyForm"].submit();
});
});
</script>
If you know the url of the page
$("li").on("click",function(){
var url = "example.com/page.php",
id = this.id;
window.location= url + "?id=" + id;
});
I have very limited knowledge with scripts so I hope you guys can help me with a simple solution to a small problem that I have...
I'm using the following jquery function to refresh a div with new content when a link is clicked
<script>
$(function() {
$("#myButton").click(function() {
$("#loaddiv").fadeOut('slow').load("reload.php").fadeIn("slow");
});
});
</script>
My problem is, I need to send 2 variables to the reload.php page to use in a mysql query (I have no idea how to accomplish that), also I need to make multiple links work with this function, at the moment I have multiples links with the same id and only the first link works so I guess I must associate different ids to the function in order for this to work, how can I do that?
here's the page where i'm using this: http://www.emulegion.info/teste/games/game.php
You may want to use document ready instead of function on your first line as this will make sure the code is not executed until the full page (and all elements) have loaded.
You can then use the callback functions of the fade and load to perform actions in a timely manner.
additional variables you can add after the .php, these can then be read in your reload.php file as $var1 = $_GET['var1'];
Do make sure to sanitize these though for security.
<script type="text/javascript">
// execute when document is ready
$(document).ready(function() {
// add click handler to your button
$("#myButton").click(function() {
// fade div out
$("#loaddiv").fadeOut('slow',function(){
// load new content
$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){
// content has finished loading, fade div in.
$("#loaddiv").fadeIn('slow');
}); // end load content
}); // end fade div out
}); // end add click to button
}); // end document ready
</script>
For different variables you could add a HTML5 style variable to your button.
<input type="button" id="myButton" data-var1="foo" data-var2="bar" />
You can retrieve this when the button is clicked:
// add click handler to your button
$("#myButton").click(function() {
// get vars to use
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
...
load("reload.php?var1="+var1+"&var2="+var2
if you have multiple buttons/links I would use class instead of id "myButton". that way you can apply the function to all buttons with the above script. Just replace "#myButton" for ".myButton"
First, you should use .on('click', function() or .live('click', function() to resolve your one click issue.
You'll want to do something like:
<script>
$(function() {
$("#myButton").on('click', function() {
var a = 'somthing';
var b = 'something_else';
$.post('url.php', {param1: a, param2: b}, function(data) {
//data = url.php response
if(data != '') {
$("#loaddiv").fadeOut('slow').html(data).fadeIn("slow");
}
});
});
});
</script>
Then you can just put var_dump($_POST); in url.php to find out what data is being sent.
Try creating a function that would accept parameters that you want.
Like:
$(document).ready(function(){
$('.link').click(function(){
reload(p1,p2);
});
});
function reload(param1, param2){
$("#loaddiv").fadeOut('slow').load("reload.php?param1="+param1+"¶m2="+param2).fadeIn("slow");
}
But by doing the above code your reload.php should be using $GET. Also you need to use class names for your links instead of id.
<script type="text/javascript">
// execute when document is ready
**$(document).ready(function() {**
**$("#myButton").click(function() {**
**$("#loaddiv").fadeOut('slow',function(){**
**$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){**
// content has finished loading, fade div in.
$("#loaddiv").fadeIn('slow');
});
});
});
});
</script>
$("#myButton").click(function() {
// get vars to use
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
I have a DIV that contains paginated results of a MySQL query.
I was attempting to use the .load() function to change the content of the DIV based upon the page number clicked.
The functionality worked perfect except for the other event listeners stopped working properly. In the query results I had several listeners for clicking on different buttons etc which stopped working once I navigated away from page 1 even though the parent page never changes and the ids and names of the content is the same.
This is the jquery I was using.
$('input[name="pagenumbutton"]').click(function(){
var thispagenum = this.value;
var thispagestart = (thispagenum - 1) * 10;
$("#result").load("querydb.php", "thispagestart="+thispagestart);
});
after clicking any of the inputs named pagenumbutton the result div content would update but then the following jquery would no longer fire.
$('img[name="appdetailimg"]').click(function(){
var appName = $(this).parent().parent().children().get(0).textContent;
var appDetail = $(this).parent().children().get(1).value;
document.getElementById('detaildivtd').textContent = appName + " : DETAIL";
document.getElementById('detailtext').value = appDetail;
$("div#fuzz").fadeIn();
$("div#detaildiv").center();
$("div#detaildiv").show();
});
Everything works perfectly fine if I change the page statically and reload the entire index page but not when I use the .load() function to only reload the div.
Is this expected behavior with the .load() function or am I missing something?
Event handlers apply to the specific element they are applied to. If the element is replaced, even by an identical element, the handler will no longer exist.
jQuery solves this with live, delegate, and on, the former two being deprecated for the latter.
If you apply the handler using on, you attach it to a parent element that does not change, so it can be triggered as the child elements are modified:
$('#result').on('click','img[name="appdetailimg"]', function(){
...
}
This is expected behavior. The 'click' event is bound to currently accessible elements in this call. So, anything you add to the page after the 'click' event is bound, won't be bound.
You need to take a look at 'live', 'delegate', and 'on'.
// change to "live" and bind the "click" event
// "click" event will bind to all selected elements in the future
$('img[name="appdetailimg"]').live('click', function(){
var appName = $(this).parent().parent().children().get(0).textContent;
var appDetail = $(this).parent().children().get(1).value;
document.getElementById('detaildivtd').textContent = appName + " : DETAIL";
document.getElementById('detailtext').value = appDetail;
$("div#fuzz").fadeIn();
$("div#detaildiv").center();
$("div#detaildiv").show();
});
Do NOT use .live() it's deprecated and watches the whole DOM... that's certainly excess
It's not got anything to do with load, it has to do with your event binding match with what you're doing with load();
The click function is bound to elements that are available in the DOM when that piece of JavaScript is called.
Try this instead:
$('.wrapper').delegate('input[name="pagenumbutton"]', 'click', function(){
var thispagenum = this.value;
var thispagestart = (thispagenum - 1) * 10;
$("#result").load("querydb.php", "thispagestart="+thispagestart);
});
$('.wrapper').delegate('img[name="appdetailimg"]', "click", function(){
var appName = $(this).parent().parent().children().get(0).textContent;
var appDetail = $(this).parent().children().get(1).value;
document.getElementById('detaildivtd').textContent = appName + " : DETAIL";
document.getElementById('detailtext').value = appDetail;
$("div#fuzz").fadeIn();
$("div#detaildiv").center();
$("div#detaildiv").show();
});
#swatkins is right use:
$('body').delegate('img[name="appdetailimg"]', 'click', function(){.....}
click only attack functions to elemetes that were rendered when the click attach performed.
you should use JQuery on\ live\ delegate function, based on your JQuery version:
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
on version:
$('body').on('click', 'img[name="appdetailimg]', function(){
var appName = $(this).parent().parent().children().get(0).textContent;
var appDetail = $(this).parent().children().get(1).value;
document.getElementById('detaildivtd').textContent = appName + " : DETAIL";
document.getElementById('detailtext').value = appDetail;
$("div#fuzz").fadeIn();
$("div#detaildiv").center();
$("div#detaildiv").show();
});
I assume that the second code-block references elements in the area that reloads. In that case, use 'delegate' (replace 'body' with a static container for your elements):
$('body').on('img[name="appdetailimg"]', 'click', function(){
var appName = $(this).parent().parent().children().get(0).textContent;
var appDetail = $(this).parent().children().get(1).value;
document.getElementById('detaildivtd').textContent = appName + " : DETAIL";
document.getElementById('detailtext').value = appDetail;
$("div#fuzz").fadeIn();
$("div#detaildiv").center();
$("div#detaildiv").show();
});
First problem is that I do not know how to get the values of SPECIFC checkboxes when they are checked.
I need a function that will get the value of the selected checkboxes by checkbox ID or Name.
This is the code I have so far:
$("#doStatus").click(function(){
var Tuitting = $('textarea#tuitting').val();
var F = $('input#Fb').val(); //checkboxes with ID Fb
var T = $('input#Tw').val(); //checkboxes with ID Tw
$.get("<?echo $site['url'];?>modules/yobilab/tuitting_core/classes/doStatusBox.php", { tuitting: Tuitting, f: F, t: T });
window.setTimeout('location.reload()', 1000);
return false;
});
Now the second problem is that both var F and var T may contain MORE than one values in an array..
Obviously when I use the ajax get functions the multiple values for both var F and var T are not
passed at all. What is the problem..?
How do I pass multiple values in an array that will be then runed by the foreach on the doStatusBox.php page?
Please help me.
$("#doStatus").click(function() {
var Tuitting = $('textarea#tuitting').val();
var F = $('input[name="fb"] :selected').val();
//You can give the name of checkbox and get the values of selected checkbox
return false;
});
I'm answering based on an assumption: you need checked checkboxes to pass them via GET method to your doStatusBox.php script.
However, why would you go trough the trouble of finding which checkbox is checked if you can simply use the serialize() method and let jQuery do the job for you?
$("#doStatus").click(function()
{
var serialized = $("#someFormHere").serialize()
// or, if you have your form elements within a div or another element
var serialized = $("#elementID :input").serialize();
$.get("<?echo $site['url'];?>modules/yobilab/tuitting_core/classes/doStatusBox.php", serialized);
window.setTimeout('location.reload()', 1000);
return false;
});
However, is "#doStatus" a submit button submitting the form or something else? If it submits the form, bind the submit event to the form, not click event to the button submitting it.