here, when i m going to replace my div i want to refresh only data not whole html design at 7 line
function func_name(id_1,id_2)
{
$.ajax({
type :"GET",
url:''<?php echo site_url('controller/function');?>/'+id_1+'/'+id_2,<br />
success: function(data){
$('#right').html(data); // id where do you want to replace div
}
});
}
If you want to refresh data, you'll need to define some HTML document element identifiers and set them one by one.
For example, in the $.ajax success callback, instead of calling $('#right').html(data);, if your right container has 2 spans to show first and second name of some user, you would do this:
$("#right #name").text(data.name);
$("#right #secondName").text(data.name);
...and your HTML should look as follows:
<div id="right">
<span id="name"></span>
<span id="secondName"></span>
</div>
Related
Hi I am printing the ajax html response to div element and giving radio input option to select the file. after selecting the specific file the another div should show the message. but the ajax html response is not working
Jquery script:
$(document).ready(function()
{
$('#upload').ajaxForm({
beforeSubmit: function() {
$('#Analysis').show();
$('#Content_column').hide();
$('#file_list').show();
$('#trait').show();
$('#trait').html('Submitting...');
},
success: function(data) {
var $out = $('#file_list');
$out.html('       File list:');
$out.append('<div id="list">');
$('#list').html(data);
$out.append('</div>');
}
});
});
The output of this script is
<ul class="php-file-tree"><li class="pft-directory">Genotypic<ul><input id="Penotypic" type="radio" name="uploads/Genotypic/" value="uploads/Genotypic/jquery.txt" />jquery.txt<br><input id="Penotypic" type="radio" name="uploads/Genotypic/" value="uploads/Genotypic/marker.csv" />marker.csv<br></ul></li><li class="pft-directory">Other</li><li class="pft-directory">Penotypic<ul><input id="Penotypic" type="radio" name="uploads/Penotypic/" value="uploads/Penotypic/namPheno.csv" />namPheno.csv<br><input id="Penotypic" type="radio" name="uploads/Penotypic/" value="uploads/Penotypic/perl.pl" />perl.pl<br></ul></li></ul>
Jquery script:
$('#Penotypic').click(function() {
var $out1 = $('#trait');
$('#trait').show();
$out1.append('Submitted...');
});
this is not showing anything in the div trait. may be the html response is loading as a tesxt so the #Penotypic is not recognised. please help me to fix this.
Thanku
You have many inputs of id="Penotypic". Make every id unique or use classes as function trigger.
I wouldn't use "/" in the name attribute. See: http://www.w3.org/TR/html401/types.html#type-name
Then try if your ajax script does work. If it doesn't work, try if it works from static page (don't use your first jQuery script, but it's output as a static form). You probably need to bind your event trigger. Use jQuery's on().
I need to make a page with a sidebar on the left, and a search page on the right. I need to be able to perform a search and have the results appear without refreshing the content in the chat frame on the left. Ideally, I need these pages to be able to talk to each other so that a link from the frame on the left can invoke a search on the right. Right now I'm using PHP to handle the search functionality on the right, but I can use any language really.
I looked at iframes, but I was really hoping to have the "search" page be the main page so that the scrollbar in the browser reflects the position on the search page.
I also thought maybe this could be done with AJAX, but since my search box is a form, I wasn't sure how to pass parameters to the page that shows the results.
Hopefully this makes sense, I'll clarify what I can. Thank you!
You can still use ajax. Consider jQuery:
HTML Search Form:
<form id="searchForm">
<input name="searchterm" />
<input type="submit" value="Search" >
</form>
HTML Search Results Container:
<div id="searchResults"></div>
jQuery:
$('#searchForm').on('submit', function(e) {
var $form = $(this);
e.preventDefault();
$.ajax({
url : '/path/to/search.php',
type : 'post',
data : $form.serialize(),
success : function (data) {
$('#searchResults').html(data); // or parse out your data into HTML if it isnt already sent that way
}
});
});
I have some results on the page (firts 10), then with a "load more result" button, I send the "id" of the last report to a PHP page.
I'v read here that I have to use .on (because .live is depreciated) so click event on new elements added to the DOM (through AJAX) can work.
My question is ... can I display somehow the content that came through AJAX on a div that was not on the initial DOM ?
$("#jokesWrap").on('click', 'a.share', function(event) {
var joke_id = $(this).attr('name');
var msgbox = $("#success[name='" + joke_id + "']");
$("#post-to-wall[name='" + joke_id + "']").hide();
msgbox.html('<img src="includes/images/load.gif"> Loading...');
$.ajax(
{
type: "POST",
url: "includes/php/ajax.php",
data: "joke_id=" + joke_id,
success: function(msg)
{
if(msg == 'OK')
{
msgbox.html('<img src="includes/images/success.png" /> DONE!');
}
} // function(msg)
}); // ajax
event.preventDefault(); });
This is the HTML part:
<div id="jokesWrap">
<div class="joke" id="1">
<p class="txt">
some text
</p>
<div class="joke-options-bar">
Post to wall
<span id="success" name="1" class="share floatL"></span>
<br class="floatClear" />
</div>
</div>
// the above area comes through loop from the ajax call
PS: Everything is ok: the ajax call (The tetxt is posted to the wall) the #post-to-wall is hidden. The "loding..." and the success message it's not shown.
PS2: the "Loading..." text and success message it's shown when I click on link that was on the DOM before the AJAX call ( because the #success was there)
Any help it's apprecied!
As long as the element exists in the DOM when the success callback of the AJAX is executed, you can use jQuery to select and manipulate it in the same way as you would an element that did exist in the DOM when the page was initially loaded. Or you can use jQuery to create the element as part of the success callback, manipulate it using the response from the AJAX request, then append your newly created element to the DOM in the required position. Something like so:
var div = $('<div/>').attr('id', 'new-div-id').html(data);
$('body').append(div);
That creates a new div, gives it an id of new-div-id, then sets its innerHTML to be whatever data was (assuming data is the name of the variable that contains the response text from the AJAX), then finally appends it as a new child of the <body> tag of the page.
Looking at what seem to be edits to the question: Element IDs (specified with the id attribute) have to be unique throughout the entire document; that includes elements added later as part of an AJAX callback. You can't have multiple elements with an id of success - make them unique by doing away with the name attribute, and adding the value to the end of the id instead, so you'd have success1, success2, etc as your IDs.
Add it to the DOM before writing to it?
What I want to achieve, is not the autocomplete effect. What I want to achieve is that when you type on google the search results come up almost inmediately without cliking on a search button.
I already did the ajax example with a search button, but I would like it to make it work while you type it shows the results in a table.
The problem is I have no idea where to start.
EDIT: To ask it in another way.
Lets suppose I have a grid with 1000 names. The grid is already present on the page.
I have a textbox, that when typing must filter that grid using AJAX, no search button needed.
Thanks
Use a PartialView and jQuery.ajax.
$(document).ready(function () {
$("#INPUTID").bind("keypress", function () {
if($(this).val().length > 2) {
$.ajax({
url: "URL TO CONTROLLER ACTION",
type: "POST|GET",
data: {query: $("#INPUTID").val(),
success: function (data, responseStatus, jQXHR)
{
$("#WRAPPERDIVID").html(data);
}
});
}
});
});
Then in your view:
<div>
<input type="text" id="INPUTID" />
</div>
<div id="WRAPPERDIVID"></div>
Edit
Also, you could build in some sort of timer solution that submits the request after say 1 second of no typing, so you don't get a request on every key press event.
Theres a good example you can check here try to type 's' in the search
if thats what you want
then the code and the tutorial is here
another good example here
If you are working on "filtering" a set already located on the page, then you seem to want to set the visibility of the items in the list, based upon the search criteria.
If so, then first, you need to first establish your HTML for each item. You can use the following for each item:
<div class="grid">
<div class="item"><input type="text" value="{name goes here}" readonly="readonly" /></div>
{ 999 other rows }
</div>
Then, you must use some jquery to set each row visible/invisible based on the search criteria:
$("#searchBox").live("change", function () {
$("div[class='grid'] input").each(function () {
var search = $("#searchBox").val();
if ($(this).val().toString().indexOf(search) != -1)
$(this).parent().show();
else
$(this).parent().hide();
});
});
This will cause the visibility of each item to change, depending on whether or not the text in the search box matches any text in the item.
I'm trying to set up a basic web page, and it has a small music player on it (niftyPlayer). The people I'm doing this for want the player in the footer, and to continue playing through a song when the user navigates to a different part of the site.
Is there anyway I can do this without using frames? There are some tutorials around on changing part of a page using ajax and innerHTML, but I'm having trouble wrapping my head aroung getting everything BUT the music player to reload.
Thank you in advance,
--Adam
Wrap the content in a div, and wrap the player in a separate div. Load the content into the content div.
You'd have something like this:
<div id='content'>
</div>
<div id='player'>
</div>
If you're using a framework, this is easy: $('#content').html(newContent).
EDIT:
This syntax works with jQuery and ender.js. I prefer ender, but to each his own. I think MooTools is similar, but it's been a while since I used it.
Code for the ajax:
$.ajax({
'method': 'get',
'url': '/newContentUrl',
'success': function (data) {
// do something with the data here
}
});
You might need to declare what type of data you're expecting. I usually send json and then create the DOM elements in the browser.
EDIT:
You didn't mention your webserver/server-side scripting language, so I can't give any code examples for the server-side stuff. It's pretty simple most of time. You just need to decide on a format (again, I highly recommend JSON, as it's native to JS).
I suppose what you could do is have to div's.. one for your footer with the player in it and one with everything else; lets call it the 'container', both of course within your body. Then upon navigating in the site, just have the click reload the page's content within the container with a ajax call:
$('a').click(function(){
var page = $(this).attr('page');
// Using the href attribute will make the page reload, so just make a custom one named 'page'
$('#container').load(page);
});
HTML
<a page="page.php">Test</a>
The problem you then face though, is that you wouldnt really be reloading a page, so the URL also doesnt get update; but you can also fix this with some javascript, and use hashtags to load specific content in the container.
Use jQuery like this:
<script>
$("#generate").click(function(){
$("#content").load("script.php");
});
</script>
<div id="content">Content</div>
<input type="submit" id="generate" value="Generate!">
<div id="player">...player code...</div>
What you're looking for is called the 'single page interface' pattern. It's pretty common among sites like Facebook, where things like chat are required to be persistent across various pages. To be honest, it's kind of hard to program something like this yourself - so I would recommend standing on top of an existing framework that does some of the leg work for you. I've had success using backbone.js with this pattern:
http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/
You can reload desired DIVs via jQuery.ajax() and JSON:
For example:
index.php
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<a href='one.php' class='ajax'>Page 1</a>
<a href='two.php' class='ajax'>Page 2</a>
<div id='player'>Player Code</div>
<div id='workspace'>workspace</div>
one.php
<?php
$arr = array ( "workspace" => "This is Page 1" );
echo json_encode($arr);
?>
two.php
<?php
$arr = array( 'workspace' => "This is Page 2" );
echo json_encode($arr);
?>
ajax.js
jQuery(document).ready(function(){
jQuery('.ajax').click(function(event) {
event.preventDefault();
// load the href attribute of the link that was clicked
jQuery.getJSON(this.href, function(snippets) {
for(var id in snippets) {
// updated to deal with any type of HTML
jQuery('#' + id).html(snippets[id]);
}
});
});
});