I have a html page in which i have a div where i need to load content from another page, which contains javascript and html. if i load as plain html, the html doesn't work.
so is there anyway make the javascript to work the way it has to and the html too when loading it using ajax.
<script type="text/javascript">
$(document).ready(function(){
$("#myDiv").load("myPage.html");
});
</script>
If I'm reading this properly, then you might not be-able to do this, there are all sorts of mechanisms to stop javascript from accessing data from other places, due to security concerns.
However, can you not simply just use an IFrame ?
$(document).ready(function(){
$('#result').load('ajax/test.html'); });
else try this
$('#result').load('ajax/test.html', function() {
alert('Load was performed.'); });
Related
Is there a way to refresh only a part of a website using ajax or a similar technique? The visitor must not notice the refresh.
What I want to do is refresh the <head></head> container of a website only one time after the website has been fully loaded using ajax?
Generally speaking, yes, you can modify <head> after the page has loaded. This can be used to quietly load remote scripts, or similar actions.
Without more specifics of what you're trying to do, here's some generic example code:
window.onload = function() {
//Send your ajax request, with success callback ajaxCallback
}
function ajaxCallback(response) {
//Parse response to create HTML tags you want inserted into <head>
var newHTML = response.newHTML;
document.getElementsByTagName("head")[0].appendChild(newHTML);
//If you want to completely replace the contents of <head>,
//you can use .innerHTML instead of .appendChild
});
Ck-editor is not displaying my content as HTML instead it displaying with HTML tags.
I have initialize ck-editor by below code:
$(document).ready(function() {
CKEDITOR.replace('long_description');
});
Please check form_helper file. May be html_escape will be problematic. Please try by removing this html_escape and let me know if it works.
I have a page with a lot of buttons on it. I need to get data from database when I click on each of them . I need to implement some jQuery styling for which I need to use AJAX to do it. How do I pass the url of the button to the "ajax.php" page(where my processing is done and where I can use my GET method to retrieve data from the database).
A few points of clarification:
First, jQuery can be used for communication via AJAX, and also for "styling" (that is, controlling layout elements and interacting with CSS. However, styling and AJAX do no intersect. AJAX is used to allow a page to communicate with a server. Styling controls how the page looks and acts.
Second, buttons do not have URLs. You can give them IDs, classes, or names, but not URLs. As noted in the comments, you can wrap your button in an anchor tag (<a>) to easily assign an action to it.
If you are already comfortable with building HTML forms and passing data to server-side scripts for processing, I suggest that you check the jQuery website for helpful documentation and tutorials.
If you are unfamiliar with HTML forms, there are a great many tutorials available via your favorite search engine.
If you are unfamiliar with server-side scripting, PHP is a language that is easy to pick up and learn quickly.
Well as your buttons are actually links you can do something like following
HTML:
<a class="btn" href="myurl.php?id=2"></a>
Jquery:
$('.btn').click(function(event){
event.preventDefault();
$.ajax({
url: $(this).attr('href'),
type: 'GET',
success: function(data){
alert('server respond with' + data)
}
});
})
<a class="button" href="page.html">do some ajax</a>
<script>
$('.button').click(function() {
var btn_url = $(this).attr('href');
$.get('ajax.php', {url: btn_url}, function(data){
alert('done');
});
return false;
});
</script>
Since you talk about "buttons" and "urls" I think you mean <a>-tags styled as buttons, because <button> does not have something like a href-attribute. <a>-elements should not be abused as buttons - that's what <button> is for, actually. You can apply some information to the id or class-attribute though, e.g.
<button class="button" id="page">do some ajax</button>
Then you could gather the 'url' with
var btn_url = $(this).attr('id')+'.html';
So have a look at jQuery.get (or jQuery.post, if you like) and try to use XHTML in the way it was meant to ;)
I haven't explained this well.
But what i mean is, if I have an ajax script that loads the content of a page in a DIV element, through the function 'loadpage('whatever.php');, instead of going around manually doing this to all links, is there a way of having a script that automatically makes all regular links load through that ajax function?
Like on Facebook, your profile loads through ajax, yet if you look at their code, they just have a regular link to the profile.
Cheers!
Sure, you can do it with jQuery.
This script goes through the document, finds every anchor element and binds an event handler to the click event of each. When the anchor element is clicked, the event handler finds the href attribute and loads that page into #targetDiv (you can call this div whatever you want, of course).
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#targetDiv").load(($(this).attr("href") + " body");
return false;
});
});
</script>
...
<!-- In your document body, this is the div you'd load the pages into. -->
<div id="targetDiv"></div>
You can use JQuery for this (if I understand your question right).
First you can make the function loadpage() as follows:
function loadpage(divId, url) {
$('#' + divId).load(url);
return false;
}
.load() isn't supported by all browsers though. If you want to do this without .load() then you can check out .get(). For more info on .load(), take a look at http://docs.jquery.com/Ajax/load
I'm assuming it would go something like this:
$(document).ready(function(){
$("a").click(function(){
$("body").load($(this).attr("href") + " body");
return false;
});
});
This would make all <a> tags on the page call a function that downloads a HTML document from the href attribute of the tag, strip out it's body tag, and replace the contents of the current page's body tag with the contents of the new body tag. This way, it's easier to work this with no JavaScript, as well as integrate it into an existing site.
To use it, you place this into a <script> tag in the head of your main page, or in an external JS file.
Please note, however, that this code only updates the contents of the <body> tag, the head (including the title tag) remains untouched. You may need to add extra code to update things like this.
Simple and Nice. Check this out:
Bjax
Usage:
<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />
Finally, include this in the HEAD of your html:
$('a').bjax();
For more settings, checkout demo here:
Bjax Demo
I thought this was pretty straight forward but I don't get the same results as the tutorials I read. I have a button on an html page that calls a function in script tags. I also have a reference to the prototype.js file which I haven't even begun to implement yet. If I leave that reference in the page, my function call does not work from the button's onclick event. Below is what is called from the button onclick event.
callIt = function(){
alert('It worked!');
}
</script>
A couple of things: first, make sure your HTML is valid. Run it through the validator at http://validator.wc.org.
Next, once you're sure that your page is valid, add the prototype.js library as the first script reference on the page:
<script type="text/javascript" src="prototype.js"></script>
Notice that I didn't close it like this <script ... /> Script blocks need to have an explicit closing tag (at least in XHTML 1.0 Transitional)
Now, to answer your question, I'm really not sure what you're asking, but if you wanted to attach the callIt method to the onclick handler of your button using Prototype, then do this:
Event.observe(window, 'load', function() {
Event.observe('button_id', 'click', callIt);
});
Put this in script tags in the element of the page, below the prototype script reference. This will execute when the DOM is loaded & the button exists on the page.
Hope this helps.
That worked. I'm just puzzled why none of the examples I have been working from have done this.
Thanks!