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/
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 thought this would be really simple but obviously after a couple of days trial and no success I have to ask the people to help, looked everywhere.
right im basically creating a php template without much guidance on the foundation 4 framework with is a responsive framework. Now this framework is rather basic and so to add page transitions ive had to use jquery to do what i believe is an ajax call to take "content" from another page and display it on the template page index.html
for which I am currently using the following
<script>
$(document).ready(function() {
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function() {
var toLoad = $(this).attr('href')+' #content';
$('#content').hide(1000,loadContent);
$('#load').remove();
$('#main_wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
function showNewContent() {
$('#content').show(1000,hideLoader);
}
function hideLoader() {
$('#load').fadeOut('fast');
}
return false;
});
});
</script>
NOW before i changed over to using ajax and jquery i was operating the menu "active" class and the page name with a simple variable set on each page in the first line listed as $page='' and then the page name
now that im loading the content with ajax even if i include this variable in the content of the new page it will not update in either the or the menu title
im very sorry i dont write things correctly im new to this forum thing
thank you for the help in advance
:) I prefer someone to explain what i need to do and how to do it rather than just copy and pasting code as im a learner :)
You probably want to load the page and parse the result in jQuery to get the new page’s <title> tag and set the requesting page’s <title> tag.
The only thing I’d ask is: why are you doing this? Are you just wanting AJAX page navigation in your website instead of the traditional propagating navigation?
I am only able to answer one part of your question due to extreme confusion, so:
First off, here's why your url changes:
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
You are modifying it with that line. That line, however, has an interesting little quirk:
attr('href').length-0
at the end. Why the -0? That would make no difference. I'd clean it up.
Outside of that, I'm incredibly confused with what you're asking so let me try rephrasing it and you can tell me what I'm missing.
You want to have a user click on a navigation link, and load that link's content via an AJAX call using jQuery, and then replace the content on the page with the newly loaded page, correct?
When you say "right on top main page i have variable $page = then the page name", what do you mean by "main page"? Do you mean it's a line of text in HTML? Part of a script that you haven't included here? Part of your PHP code?
And then you say "ive tried including the tag in a div that changes along with the above content"- what is "the tag"?
By reading this 4 or 5 times I could barely discern the above understanding of what you're trying to do.
Please make heavy edits to you question- it's incredibly hard to understand.
Lastly, why are you trying to replace the browser's functionality of a user clicking a link and loading content? That's what the browser is for. The browser also, conveniently, has a loading indicator in the url bar usually (or some form thereof), letting the user know the content is still loading.
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
So first off, look at the jQuery doc for the load method:
http://api.jquery.com/load/
Your issue is that it is calling for three arguments, and you are passing two. If there are multiple arguments listed and you only want to pass SOME of them, you still need to supply a null value for the ones you want to "skip". Try changing your call to this:
function loadContent() {
$('#content').load(toLoad, null, showNewContent);
}
You'll notice that I'm passing "null". If that doesn't work, pass an empty string, like this:
function loadContent() {
$('#content').load(toLoad, "", showNewContent);
}
That second argument is data to be passed with the request. It's the THIRD argument that you list as your callback, which as far as I can tell is where you're making the mistake.
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.
I have a jquery function that controls some css that sets state to active or not. It runs on a click event. I need to have a similar function run when a php function runs (when the user searches with a form). The search term goes through a php function which will match the term with an id. How can I set the state to active with the php function?
Here is a link to a test area
http://vtour.dev4.webenabled.net/tester/index.html
If you click an area, the selection remains active. if you type a name in the lavender search box, and click the search icon, the corresponding area does not become selected.
(attaching the search functionality file. i know there is a bunch of junk in there but the section that corresponds to this example starts around line 149
The small lavender box next to the input line is the click/search icon
Thank you
You can't do this from PHP, you do everything through Javascript (and see Ohgodwhy's comment, especially the note about using jQuery or not using jQuery - you should use .ajax() or .post() for example).
To do it, the AJAX would return some flag to tell Javascript what blocks to turn on/off, as well as the text response. You can wrap all this up in a JSON object.
<?php
$returnArray = array('html' => 'HTML TO DISPLAY', 'blocks'=>array(1,3,4));
echo json_encode($returnArray);
?>
and in javascript use the JSON object elements to display the text, and then also turn on/off the right blocks. This bit will be easier in jQuesry as it handles the JSON object for you, so you'd only need response.html for the html bit, and response.blocks for the blocks.
You can execute a javascript function by outputting a html script tag.
ie.
<?php
echo "<script type=\"text/javascript\">runJavascriptFunction()</script>";
?>
So you could technically drop that into the response from your FetchData.php - but if it were me, I would do it all with jQuery:
$('#woodward-title-search-button').click(function() { //on button click
var term = $('#searchTerm').val(); //the search term
$('#room-'+term).css('background','red'); //or more nicely: .addClass('highlighted');
//load the response of fetchdata into #myDiv
$('#myDiv').load('FetchData.php?searchTerm='+term);
});
I would suggest communicating with your PHP in json and providing an ID of some kind to better target your div.. but this should work as a down and dirty solution.
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?