Whats the best way to replace a <table> with a new one using jQuery? I'm using ajax on the page to get the new data.
If you don't want to add a wrapper element, something like this should work:
$.ajax({
url: 'yoururl.php',
success: function(r) {
$('table#something').replaceWith(r);
}
});
..assuming the response you get is an table element.
Wrap it in a div, and:
$("#myDiv").load("/some/url.php"); // where url.php outputs the entire table
You can specify a portion of the remote document to insert by putting it's selector with the URL parameter as follows:
$("#myDiv").load("/some/url.php #myTable");
Related
i have one jsp page(addStep1.jsp) where i have lot of input fields and drop downs to get values from user.
among all the dropdowns i want to get value from one of the drop down whose id is svoAffectedSoftware.
<select id="svoAffectedSoftware" name="svoAffectedSoftware" class="form-control" >
Now, on the same page i want to include other jsp file for which i have uses below code (i have uses two approach to solve this but in both the cases i am not getting the desire output. the problem in first approach is i am not getting any error but my page doesn't comes up not even my addStep1.jsp where i have included this code and in the second approach it saying:: The method $(String) is undefined for the type
__2F_ssappmgr_2F_webapps_2F_sam_2F_apps_2F_itapp_2F_ticket_2F_addStep1_2E_jsp. )
approach 1
<%# include file="ticketResolutionChatBot.jsp?svoAffectedSoftware="svoAffectedSoftware %>
or
approach 2
<jsp:include page="ticketResolutionChatBot.jsp" >
<jsp:param name="svoAffectedSoftware" value="<%= $("#svoTicketState").val() %>"/>
</jsp:include>
can anyone tell me how do i pass parameter in the correct way also how to achieve this?
I would like to suggest you to use javascript for this purpose. With jQuery it is very easy to achieve your goal.
Include jQuery library in your jsp page
Example is here https://www.w3schools.com/jquery/jquery_get_started.asp
And here: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_lib_microsoft
Don't forget to use all your jquery code inside
$(document).ready(function(){
// your code for the page
});
use my example for you from fiddle
https://jsfiddle.net/u0frjksd/3/
This function subscribes to your select value and loads content page, based on the selection:
$(".form-control").on('change', function() {
var value = $(this).val();
$('.content').load(value);
});
Instead of first value you can provide your own value, I mean your href(in value) to the jsp page you want to include.
Your jsp page will be loaded to the div .
i have uses change() and ajax function here.
$('#svoAffectedSoftware').change(function() {
var form_data = {
svoAffectedSoftware: $("#svoAffectedSoftware").val()
};
$.ajax({
type: "GET",
cache: false,
url: "getNewPage.jsp",
data: form_data,
success: function(data){
$("#contentDiv").html(data);
}
});
});
where, url: "getNewPage.jsp"--> redirecting page,
var form_data = {svoAffectedSoftware: $("#svoAffectedSoftware").val()}; --> takes value for the new page which i was asking through parameter,
success: function(data){$("#messageDiv").html(data);} --> include the content of the resultant page into original page (addStep1.jsp) in the specified div.
I am trying to parse a jQuery get request into an object or some other way of getting a particular div on a page.
Here's my code:
$.get("http://en.wikipedia.org/wiki/Afghanistan", function(response) {
var elements;
elements = $.html(response);
console.log(elements);
});
The only problem is that elements is not HTML to parse. Let's say I want to get a specific div on the response variable - how would I go about doing that? This is with the intention of (eventually, after some processing) copying it to a div on my local page.
Don't worry about cross domain issues - this is for a Phonegap application
Use $.parseHTML() so you can convert that response to a set of DOM nodes and later insert that to the document.
You can do it like this:
$.get("http://en.wikipedia.org/wiki/Afghanistan", function(response) {
var elements;
elements = $.parseHTML(response);
console.log(elements);
var myDiv = $(elements).find('#idForDiv');
});
It sounds like the jQuery load function does exactly what you want. You can specify a selector after the url to load a particular part of the page:
$("#mydiv").load( "http://en.wikipedia.org/wiki/Afghanistan #divonpage");
http://jqapi.com/#p=load
If the response from the server is HTML then you can wrap it in a jQuery object and act upon it.
I would vouch for this approach:
var server_response = '<div style="background-color:yellow;"><div class="find-me">Hello</div></div>';
$('span').html($(server_response).find('.find-me'));
.find-me {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span></span>
I have a Div of Class
<div class='navigation five-icons'></div>
and i want to load a URL which returns html inside it, how can i select that div with jquery,
what i have tried is
$('.navigation .five-icons').load('URL');
$('.navigation.five-icons').load('http://www.astuffaday.com/shot/menu.php');
but no use.
I dont know about loading but you can use below code to select more than one class
$('.navigation, .five-icons')
Are you trying to get the data asynchronously?
Use $.post() or $.get()
$.post('filename.php', {'name1':'value1', 'name2':'value2'}, function(result) {
alert(result); // result has the HTML content returned by filename.php
$('#resultDiv').html(result); // resultDiv will have its contents
// Now you need to get only particular div
// You can use 'find()'
// Something like this may help [Have not been tested]
var data = $('result').find('.navigation .five-icons');
alert(data);
})
References
$.ajax()
$.post()
$.get()
$.load()
.find()
Basically, I want the value to be passed from one div to other div through ajax call on success in the same page.
But still, I am able to do it
using another page which get the value from div .And on success, the value is load to the other div.
Here are my codes:
My index.pl has following code.
while($query->fetch()) {
print qq( "<option id='$tblname_id'>$tblname_name</option>" );
}
print "<div id='body'></div>";
My script.js contains following code.
$(document).ready(function(){
$('option').click(function(){
var selected=$(this).val();
var id=this.id;
//alert(id); //here I am getting the id of selected option
$.ajax({
type:"get",
url:"hello.pl", //instead of hello.pl,I want to do with index.pl itself
data:{'id':id},
success: function(msg){
$("#body").html(msg);
$("#body").show();
}
});
});
});
Hello.pl contains
$obt_id=$q->param('id');
This one works. But when I do same with index.pl, it doesn't.
Where is the problem?
In one line, my question is simple.
How to get value in a div through ajax call, sent from other div, in the same page?
How to get value in a div through ajax call, sent from other div ,in
the same page ?
Take a look at jQuery's load() function. An Example:
$('#result').load('test.html #foo');
That would get contents of an element with id=foo and append the results to an element with id=result
I'm loading a html snippet, insert it after a certain element and want to focus an input field with the class .focus. There could be more than one element with this class. Similar code with load(...) works.
var item = $(this).closest(".something");
$.get(
url,
function(data) {
item.after(data);
$(data).find(".focus").focus(); /* everything works except this line */
}
);
The relevant part of the loaded html:
<input type="text" class="focus" value="" name="email"/>
It looks like the element to be focussed is found (in the debugger), but it doesn't get the focus. Any idea what is wrong?
item.after(data) parses data into a set of DOM elements and puts them in your document.
$(data) then parses data into another set of DOM elements, which are never displayed.
You want
$(data).insertAfter(item).find(".focus").focus();
This is because data is not in the DOM.
Try this:
var item = $(this).closest(".something");
$.get(
url,
function(data) {
var $data = $(data);
item.after($data);
$data.find(".focus").focus(); /* everything works except this line */
//or you can do: $(".focus", $data).focus();
}
);
Try,
item.next().find(".focus").focus();
Try using item.next().find('.focus').focus(). In the Ajax callback, data isn't a jQuery object but a string of HTML; calling item.after() makes jQuery create DOM nodes from the HTML but they're not linked to your data variable.
That is because you are not calling focus() on the element which is added into the dom.
Try this.
var item = $(this).closest(".something");
$.get(
url,
function(data) {
item.after(data);
item.nextAll(".focus").focus(); /* everything works except this line */
}
);