I have a multi level select chain, where by the value of the first select generates the options for the next select list. And within the second list some of the values will cause a div to display with another input.
My codes (below) seem to work just fine when tested on static content (ie: the second select is hard coded in the html). But when I add it with JQuery, the second level no longer triggers the .change function.
<script type="text/javascript">
$(document).ready(function() {
$dts = $("select[name='tourdes']");
$dts.change(function() {
var dtsValue = $(this).val();
var dtsString = '?tourdes=' + dtsValue;
$('#dateSelect').show();
$('#dateSelect').load('include/avdates.php' + dtsString).append();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$tags = $("select[name='tourcode']");
$tags.change(function() {
if ($(this).val() == "private") {
$(".prvcal").css({"visibility":"visible"});
}
});
});
</script>
I am guessing something needs to be re-initialized, but I am getting no where with my experiments.
If you're using jQuery 1.7 you'll want to use on, as both live and delegate are deprecated.
$(document).on("change", "select[name='tourcode']", function() {
var dtsValue = $(this).val();
var dtsString = '?tourdes=' + dtsValue;
$('#dateSelect').show();
$('#dateSelect').load('include/avdates.php' + dtsString).append();
});
docs for on()
You are probably using dynamically-generated HTML elements. If that is the case, you need to use .delegate() to handle them:
$('select').delegate("[name='tourdes']", 'change', function() {
Related
I have a form where small labels are displayed above each field, once the user adds a value to that field.
This for is sometimes loaded with some of the fields being pre-populated.
How would i check on page load if any of the form fields have a value and if so, have the label visible?
Here's my current code for displaying labels once a field has a value:
$('.form-control').blur(function() {
if( $(this).val() ) {
$(this).prev().show();
}
});
on page load try this:
$('.form-control').each(function() {
if( $(this).val() ) {
$(this).prev().show();
}
});
$(document).ready(function(){
$('.form-control').each(function(){
if($(this).val() != ''){
$(this).prev().show();
}
});
});
On document ready, for each .form-control, if the input's value is not blank, do whatever code you would to show the label.
Using focusout Event wouldn't be much of an overkill, would it?
<script type="text/javascript">
(function ($) {
$(document).ready(function (e) {
// ALTHOUGH BLUR IS OK, ONE COULD SIMPLY BIND THE .form-control CLASSES TO THE focusout EVENT
// THIS ENSURES THAT THERE IS A HIGHER LIKELIHOOD THAT THE FIELD IN QUESTION ONCE HAD FOCUS
// WHICH MAY IMPLY THAT THE USER ALSO INTERACTED WITH THE FIELD IN SOME WAY...
$('.form-control').each(function(elem){
var objElem = $(this);
objElem.focusout(function(evt) {
if ($(this).val()) {
// NOW, YOU SHOULD KNOW WHICH METHOD TO USE TO TRAVERSE THE DOM
// AND GET AT THE LABEL....
// IN YOUR CASE IT SEEMS TO BE THE PREVIOUS ELEMENT BEFORE THE FORM-FIELD.
$(this).prev().show();
}
});
});
});
})(jQuery);
</script>
So I am trying to get this code below to work with updating a price based on an ajax onclick:
$('#main_body li[data-pricefield="special"]').delegate('onclick','change', function(e)
{
var temp = $(this).attr("id").split('_');
var element_id = temp[1];
var pricedef = $(this).data('pricedef');
if(pricedef == null)
{
pricedef = 0;
}
$("#li_" + element_id).data("pricevalue",pricedef);
calculate_total_payment();
});
Things seem to be working ok so far - when I type in the console:
jQuery('#li_273').data('pricevalue');
I do get a value of "1.00" returned which is actually being set here on the onclick command:
'onclick' => 'jQuery(\'#li_273\').data(\'pricevalue\',\'1.00\');',
My question is what is wrong with my first block of code that is stopping this from calculating the price the right way and how do I correct it?
You are using
$('#main_body li[data-pricefield="special"]').delegate('onclick','change', function(e){
// ...
});
but delegate's syntax is .delegate( selector, eventType, handler(eventObject) ) and in this case you should write
$('#main_body').delegate('li[data-pricefield="special"]','click', function(e){
// ...
});
There is no onclick event in jQuery and AFAIK an li doesn't have a change event so if you want to use multiple events then you can use
$('#main_body').delegate('li[data-pricefield="special"]','click another_event', function(e){
// ...
});
Also you can use on instead of delegate.
An Example and Read more.
'onclick', 'change' should be 'click change' in the delegate
EDIT: "$('#main_body li[data-pricefield="special"]').delegate('li','change', function(e) { actually works when you tab out of the field - it adds the $1 to it."
so you should have:
$('#main_body li[data-pricefield="special"]').on('li','click change', function(e) {
and perhaps check
if(pricedef == undefined || pricedef == null){
I have got site with dynamic refreshing divs.
Source:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('boo.php').fadeIn("slow");
$('#loaddiv2').fadeOut('slow').load('boo2.php').fadeIn("slow");
}, 1000);
</script>
But I want fadeout and fadein only if boo.php return different(updated) value than actuall div. How compare new and actuall value and do this?
P.s Sorry for bad English but I'm Polish
You'll need to write a callback function that inspects the returned data and compares it to what's stored within the div already. Additionally, the functions that show/reveal the div will probably need to be moved to the callback function as well.
Documentation is available here.
You'd have to write an Ajax function to boo.php and compare the result with the div's value
$.ajax(
{
url: "boo.php",
success: function(result)
{
if($("#loaddiv").html() != result)
{
$("#loaddiv").fadeOut("slow")
$("#loaddiv").html(result);
$("#loaddiv").fadeIn("slow");
}
}
});
You need to check the result you are getting from the ajax call and compare it with the current content. Assuming you have an element with ID MsgCount in your Ajax response and current Div Markup and you are using the value of that to compare, the below code will work
$(function() {
var auto_refresh = setInterval(function(){
var currentMsgCount= $('#MsgCount').text();
$.get("boo.php",function(data){
var resultData=$(data);
var newMsgCount= resultData.filter('#MsgCount').text();
if(newMsgCount!=currentMsgCount)
{
//content is different. Let's show it
$('#loaddiv').fadeOut('slow',function(){
$('#loaddiv').html(data).fadeIn("slow");
});
}
});
}, 1000);
});
I have a search box. I'm using jQuery and keyup to filter repeating divs.
Each div looks like this:
<div class="searchCell" id="searchCell' . $id . '">';
<div class="friendName">
// someNameOutputWithPHP.
</div>
</div>
Now, I want to filter based on the name text. If someNameOutputWithPHP contains the search query, the entire searchCell should show(). If it doesn't, the entire searchCell should hide().
This doesn't work, though:
<script type="text/javascript">
$(document).ready(function() {
$("#searchbox").keyup(function() {
var searchValue = $(this).val();
if(searchValue === "") {
$(".searchCell").show();
return;
}
$(".searchCell").hide();
$(".searchCell > .friendName:contains(" + searchValue + ")").show();
});
});
</script>
EDIT
New problem: I got the divs show() to show how I want. But the :contains isn't working exactly right.
For instance: say one of the name's is Ryan. When I search for 'Ryan', I get nothing. But when I search for 'yan' I get the Ryan div.
What's wrong?
Here's the :contains code:
$(".friendName:contains(" + searchValue + ")").parent().show();
That is because you are hiding the .searchCell and then showing its children .friendName divs, which though get display property will not show up because parent is hidden.
Try this:
<script type="text/javascript">
$(document).ready(function() {
$("#searchbox").keyup(function() {
var searchValue = $(this).val();
if(searchValue === "") {
$(".searchCell").show();
return;
}
$(".searchCell").hide();
//$(".searchCell:has(.friendName:contains(" + searchValue + "))").show();
// OR
//$(".friendName:contains(" + searchValue + ")").parents(".searchCell").show();
// OR
$(".friendName:contains(" + searchValue + ")").parent().show(); // If .searchCell is always a direct parent
});
});
</script>
Your selector
$(".searchCell > .friendName:contains(" + searchValue + ")")
will select all .friendName divs that contain the text from searchValue. That works just fine, but you need to .show() the parent element. Just invoke the .parent() method for that:
$(".searchCell > .friendName:contains(" + searchValue + ")").parent().show();
Demo: http://jsfiddle.net/d3ays/3/
And by the way, you HTML markup looks messed up too. There is a ; behind your div.searchCell for instance.
somehow still not able to do what I’m inted to do. It gives me the last value in loop on click not sure why. Here I want the value which is been clicked.
Here is my code:
$(document).ready(function() {
var link = $('a[id]').size();
//alert(link);
var i=1;
while (i<=link)
{
$('#payment_'+i).click(function(){
//alert($("#pro_path_"+i).val());
$.post("<?php echo $base; ?>form/setpropath/", {pro_path: $("#pro_path_"+i).val()}, function(data){
//alert(data);
$("#container").html(data);
});
});
i++;
}
});
Here the placement_1, placement_2 .... are the hrefs and the pro_path is the value I want to post, the value is defined in the hidden input type with id as pro_path_1, pro_path_2, etc. and here the hrefs varies for different users so in the code I have $('a[id]').size(). Somehow when execute and alert I get last value in the loop and I don’t want that, it should be that value which is clicked.
I think onready event it should have parsed the document and the values inside the loop
I’m not sure where I went wrong. Please help me to get my intended result.
Thanks, all
I would suggest using the startsWith attribute filter and getting rid of the while loop:
$(document).ready(function() {
$('a[id^=payment_]').each(function() {
//extract the number from the current id
var num = $(this).attr('id').split('_')[1];
$(this).click(function(){
$.post("<?php echo $base; ?>form/setpropath/", {pro_path: $("#pro_path_" + num).val()},function(data){
$("#container").html(data);
});
});
});
});
You have to use a local copy of i:
$('#payment_'+i).click(function(){
var i = i; // copies global i to local i
$.post("<?php echo $base; ?>form/setpropath/", {pro_path: $("#pro_path_"+i).val()}, function(data){
$("#container").html(data);
});
});
Otherwise the callback function will use the global i.
Here is a note on multiple/concurrent Asynchronous Requests:
Since you are sending multiple requests via AJAX you should keep in mind that only 2 concurrent requests are supported by browsers.
So it is only natural that you get only the response from the last request.
What if you added a class to each of the links and do something like this
$(function() {
$('.paymentbutton').click(function(e) {
$.post("<?php echo $base; ?>form/setpropath/",
{pro_path: $(this).val()},
function(data) {
$("#container").html(data);
});
});
});
});
Note the use of $(this) to get the link that was clicked.