so, I have read just about every question on this subject, but the solutions don't work for my project, it seems that when I change the dropdown, it does the first event, but when I change to a different element it doesn't do anything else, but when I do this with an alert message it changes every time.
here is what I have to demonstrate what I mean
I tried .post it works great until I add php and all the dynamic functions, is it because I used $('#updateDiv').html(url);
I also hide and showed the div based on the change of the dropdown, but all that did was hid and show the div, I want the div to show the content based on a list of categories.
the PHP side will be dynamic, but if I do .html() none of the php renders properly.
http://fiddle.jshell.net/LrxUS/
$.post(url, function(data) {
$("#updateDiv").html(data);
});
As per the fiddle, you have specified
var mydropdown = $('#mydropdown');
but in the change function, you have specified $(mydropdown), either define only id in the variable or the object. Like,
var mydropdown = '#mydropdown';
$(mydropdown).change(function() {}
After that use $.ajax to get the dynamic content.
Ok, lets make it the simplest so that there is no room for mistake in the client side script. Use $.load method defined here.
AS:
$("#updateDiv").load(url);
And don't forget to check what your firebug, chrome inspector or fiddler says about your request in case if you don't get the required result.
Related
Is it possible to remove a value whilst the page is loading?
I'm using OSClass, and on one of the pages it's by default adding a value for region (cambridshire):
I need to clear this value since it's causing problems, everytime I type something else in, by default, it registers it as Cambridgeshire...
If I look at code for it:
It's being generated by a function (can see my JQuery attempt to clear it which hasn't worked).
Then if I search the function is splits up in many different parts, so I don't know where to go from there.
Basically, is there a way to remove the value when page loads and save the new value when the user submits?
JSFiddle - Note it won't display anything due to the way code is generated
Have you tried removing <?php ItemForm::region_text(); ?> on it's own? Or passing an empty string <?php ItemForm::region_text(''); ?>
I'm not familiar with OSClass though I'm afraid.
Paste this code below the jQuery initialization:
$(document).ready(function(){
$("#region").val('');
})
I am trying to load a specific portion of an article with using of jquery load() function when a tab is clicked. The tab is inside an article and trying to show another article within the first article from where the tab is being clicked. The jquery code I have put inside the template.php of choosen template. The main problem is that when I click nothing is comming inside the first article under the tab. I am using joomla2.5.11 version. Please give some suggestion.The jquery code what I am trying is shown below:
$(function(){
$("h3.menuheader").click(function(){
$(".active-tab").removeClass("active-tab");
$(this).addClass("active-tab");
$(".tabcontent-ul").slideUp();
$(".tabcontent").load("http://www.mpsinfoservices.com/projects/teamzstudio/web-application-development#link1",function(){
$(".tabcontent").slideToggle();
});
});
});
Unfortunately I don't think you've provided enough to diagnose this issue. But perhaps I can help with how I would diagnose.
To start with, try this instead:
// http://www.mpsinfoservices.com/projects/teamzstudio/web-application-development#link1
$(".tabcontent").load("http://www.google.co.uk",function(){
$(".tabcontent").slideToggle();
});
Then open up your developer tools and see if a call is being made to load that data.
If it is, then you need to consider that it might be loading the data and putting it in another element you can't see.
So to test, create a new container on the page near your footer, which you know will be visible with a specific #ID like <div id="testID"></div> and load into that. Once that is working, look to confirm your .tabcontent element is the one you want using something like console.log().
First I want to say that the code in jsfiddle works exactly as I'm expecting. However, when I try to insert it in my page, it does not work.
I am using
get.ajax
To move html with php a mysql data into a div named #latest-divs. I have a form with an
input#search
button that gets
val()
when
.bind('input property...)
and checks if there is exact match in the child divs of #latest-divs. I call these child elements
#latestblock
If there is exact match, then the event should execute, which, as I mentioned above, works in the jsfiddle but dies on my site. I have attempted everything I could think of:
Load in php file
Load from head
Load from body
Load with and without "CDATA"
Change my jquery version
My site is codefault (dot) org.
The jsfiddle link is http://jsfiddle.net/gAnyM/10/.
As of right now, I am loading the second part (random positioning of divs) from script/latest-topics.php and the first part in head, from index.php.
are you sure you have it inside a:
$(document).ready( function() {
// code here
});
?
The dom needs to be ready before you bind things
jsfiddle adds this for you automatically
Try another kind of event
$('input#search').bind('change keyup', function()
EDIT:
OK, I believe I've found a way around the issue using the info posted by #ManseUK along with #Johan's comment. As a n00b I can't answer my own question but I've added an explanation below the question in case it helps anyone else out.
I am re-writing part of an e-commerce solution which was written by
another development team some years ago. In the new version, we are
experimenting with shortening the user journey using Ajax but doing so
gives JavaScript errors and causes some functions to fail. Dev URL is
here:
http://cognition.thelightbulb.co.uk/type-18/general-purpose-lamps-and-bulbs/craftlight-daylight
The errors appear once the dropdowns have been selected and the
product displays.
The errors are displaying most notably in IE7:
Error: 'frm.qty' is null or not an object
Error: 'qty.value' is null or not an object
I believe this is where the problem is coming from:
var frm = document.frmOrder;
var qty = frm.qty;
In the lines above, frmOrder is the name of the form and qty is
the name of the input for product quantity.
Compare that to http://cognition.thelightbulb.co.uk/product-54 where
the product loads without the Ajax selection process and you'll see
that the functions work correctly.
I suspect that the problem is to do with the fact that var frm =
document.frmOrder; is not working due to the way it relates to the
DOM when loaded with Ajax.
I am using innerHTML=xmlhttp.responseText as the Ajax method. Is
there an alternative way to define var frm so that it will function
properly when loaded with Ajax?
EDIT:
Using the info posted by #ManseUK along with #Johan's comment, I added another argument to CheckMinQty(minorder) so that it now looks like this...
function CheckMinQty(minorder,qty)
...where qty is passed to the function on an onclick event as document.forms['frmOrder'].qty.value
I then moved the whole function out into a separate .js file. It's maybe not the best approach but it still feels tidier for the Ajax call to just return workable HTML which CheckMinQty can use rather than bringing in a whole load of <script> and then trying to run it.
Thanks for all the suggestions and I'd welcome any comments about the approach/solution outlined above.
Change this
var frm = document.frmOrder;
to this
var frm = document.forms['frmOrder'];
That will give you a handle to the form
document.frmOrder refers to the element with id frmOrder on the page, which happens to be the form on this page. Just try to get the correct form-element as the variable there.
Though the Manse's solution might work, use a more sensible way and assign an id to the form and since you're using jQuery anyway, retrieve the form with var frm = $(#formid); Not only is it easier to write, it's much more easier to read by you and everybody else.
When loading script via AJAX, you don't have DOMReady event anymore. In other words, when you want to execute your script on AJAX load, you should use self-invoked functions.
Wrap your ajax-loaded script inside a function like this:
(function(){
// Do what you want to do here.
})();
See if that solves the problem?
I am trying to expand on some code written by someone else, but I am having trouble using one of the javascript variables. If I set it in the title of a div or something similar like so:
$("#test12").attr("title" , ccode);
then it works fine and the title of the div is 'CA', which it should be. But if I try to put it into the text area of the div, then it tries to run a function or something but I can't see where it's doing it.
Is there a way I can convert it to simple text and stop it from running any functions?
Thanks for any help
Edit:
This is all of the code I can see at the moment:
<script>
//<!--
function loadForeignOffices(ccode){
//load window with details...
$('#iframe_3').attr("src", "<?php echo $html->url("/", true); ?>erc/maps/contacts/"+ccode);
$("#test12").attr("title" , ccode);
}
//-->
</script>
Basically what I'm trying to do is use the ccode variable because I want to display CA on the screen, but when I try to do that it seems to run some other function and fails, and doesnt show CA.
You may need to brush up on your jQuery dot-operators:
.load() is an ajax call that will load the contents of () into the selected element. In one of your comments you mention you are trying to do this $("#test12").load(ccode); which is inherently silly, if ccode is the string "CA"
.attr() will change the attributes of the selected element. If you are trying to display "CA", $("#test12").attr("title" , ccode); this will clearly not accomplish that -- As "CA" is added to the title attribute. As in <div id="test12" title="CA"></div>
Perhaps what you are looking for is .html() which inserts the string into the selected element. Or even .innerText()
Why don't you spend some time reading the jQuery documentation. A little bit goes a long way!
Keep in mind your PHP code is executing first on the server, then your javascript.
Here's a JS Fiddle as a start: http://jsfiddle.net/QsFJ4/3/