Hello I am using jquery to do some ajax that calls in some data from a database, on the mouseover and element the method runs and I get the expected results, however when I then mouse over another element, the method runs again, however I need to delete the first lot of data from the screen first, this is what I have so far,
$("a.contentlink").mouseover(function(){
var url = $(this).attr("href");
$.ajax ({
url: url,
type: "POST",
success : function (html) {
$('#abstract').append(html);
}
});
});
Can anyone help?
You need to call the empty method first, which removes all children from the matched elements.
For example:
$('#abstract').empty();
Alternatively, you can call the html function, which replaces the contents of the matched element with a string of HTML.
For example:
$('#abstract').html(html);
Related
i use an jquery-Plugin: https://code.google.com/archive/p/jquery-in-place-editor/
. In the following section I use "JEIP" instead of the full name.
I try to bind JEIP not to an ID but to many objects by css class.
<div class="jeip" id='key1' data-type='elephant'>Text 1</div>
<div class="jeip" id='key2' data-type='mouse'>Text 2</div>
Now i want to pass the data-type element dynamically, too. I figured the "params" option out to pass additional data. But it seemst not to be dynamical.
To initialize JEIP I use:
$(".editInPlace").editInPlace({
url: "http://submitUrl/",
params: "datatype="+$(this).data('type'),
callback: function(){
console.log( $(this).data('type') );
},
}
But the params are wrong. I only get undifiend in the Server scripts which receives the submit action. When I use the callback function I am able to get an console output with the right data. How to pass data-elements to the Server?
Thanks for help.
Assuming all elements are in place at the time of execution of the script (i.e. they are not being dynamically added at some later point), you can simply loop the elements and call the editInPlace plug-in function with the appropriate values:
$('.editInPlace').each(function(i, el){
var $el = $(el); // cache the jQuery object corresponding to the current element
var dataType = $el.data('type');
// call the editInPlace plugin directly on the element
$el.editInPlace({
url : 'http://submitUrl/',
params : 'datatype=' + dataType,
callback : function(){
console.log(dataType);
}
});
});
I have a view page where i have an object inside a div like :-
<div id="booking_id"><%#booking_id%></div>
I want to get the value of #booking_id to be passed in AJAX data params and my ajax function is like this :
<script type="text/javascript">
$(document).ready(function(){
$("#selecthotel2").change(function(){
var room = $(this).children(":selected").val();
var params = $('#booking_id').filter('#booking_id').val();
$.ajax({
url: "/rooms/assign_room",
data: {
room,
params
}
})
});
});
</script>
But i am not getting the #booking_id value to be passed to another action.
I think i am going somewhat wrong in the ajax syntax,kindly help.
change
$('#booking_id').filter('#booking_id').val();
to simply
$('#booking_id').text();
Currently your code is trying to look inside $("#booking_id") for another element with the same ID, instead of taking the value of $('#booking_id') itself.
Also since $("#booking_id") is a div and not an input, I think you need to get the contents using text(), not val().
I am looping through an AJAX request and adding a list of <li> to a <ul> from the results.
What I am having trouble with is storing DATA being returned from the AJAX request on these items as HTML5 DATA attributes. Here is some example code:
function load_items(json_url, callback) {
// Set a variable to contain all the items
var all_the_items = $('<ul class="all_items_cont"></ul>');
$.ajax({
type: 'GET',
cache:false,
url: json_url,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(data) {
$.each([].concat(data.item), function(i, post){
// Create An Item
var current_item = $('<li><a>'+ post.title + '</a></li>');
// This is how I tried to add the data... not working
current_item.find('a').data('description',post.description)
// Append Item to <ul>
$(all_the_items).append(current_item);
});
if (typeof callback === 'function') {
callback(all_the_items.html());
}
}
});
}
Ten I call the function and append the HTML to a target <div>:
load_items('http://jsonurl.com',function(html){
$('div#container').append(html)
})
I've found that if I write the DATA into the HTML explicitly than it works just fine, but if I use jQuery to store the data attributes than I cannot retrieve them later.
I can't write the Data Attributes out explicitly in the HTML because sometimes they are an entire JSON feed or really complicated description.
Any ideas?
------ EDIT 5/21/15 3:38pm -------
I am accessing the data using the jQuery data function as such:
$('div#container ul li:first a').data('description')
This is just an example as the code I am actually utilizing is jQuery Droppable and retrieving the content on DROP. This is a lot of unnecessary code for the questions sake.
If I gather your question correctly, what you're trying to do (set arbitrary data on a DOM element, then pull it out as a data-foo="" attribute) isn't something that JQuery was meant to do.
data-foo attributes are not the same as what the .data method sets. Data can flow in one direction, from the attribute to the element's data store (done automagically by JQuery), but not the other way around
If you really want to pull it out as part of the HTML, you'll have to set the data-foo attribute manually.
// attach the data to the DOM element
$(myElement).data('description', post.description);
// set the data-description attribute so we can pull it out as HTML
$(myElement).attr('data-description', post.description);
Another problem I see with your code is that if post.title contains malformed HTML it could break the <a> element when you call $('<a>'+post.title+'</a>').
When setting callback(all_the_items.html()); it will remove the DATA associated with the DOM element and variable and turn it into straight HTML. By changing it to this: callback(all_the_items); it will work.
My question is as follows: I have started using the $.ajax function with jQuery and I am wondering how I work with the return of an HTML page. The request completes and I can console.log the returned HTML page however I would now like to select a single element from that page. I have had several attempts which included:
$(data).find('p');
$('button').click(function() {
$.ajax(funciton() {
dataType: 'html',.
url: 'localhost/sw',
success: function(data) {
// This is where I would like to select a element or node from the complete
// returned html document
});
});
I know i can simply use .load() which you can provide select criteria but .ajax is the root function to begin with and I would like to learn that way as well for more complicated queries. Second half of this would be should I not be trying to select elements this way and just serve up json or a single key phrase instead of the entire html page? All help is appreciated.
Just pass the returned HTML to jQuery, and treat it like a regular jQuery collection:
$.ajax({
dataType: 'html',.
url: 'localhost/sw',
success: function (html) {
var paragraphs = $(html).find('p');
// Manipulate `paragraphs` however you like. For example:
$(document.body).append( paragraphs );
}
});
Joseph's answer above is correct if you just want to get the objects.But if you want to load the content of that element, you may change this:
var paragraphs = $(html).find('p');
to
var paragraphs = $(html).find('p').html();
Hope it helps.
I'm afraid very similar question has been asked already here, but for some reason it simply outputs "null".
I'm trying to find a div html from an ajax output by id. Below is my script.
// LOAD NAVIGATION
$.ajax({
type: 'POST',
url: 'includes/content/bookingsystem/b_navigation.php',
data: thisButtonType + '=true&loadNav=date',
success: function(output) {
alert(output); // Outputs correctly two divs #navDay, and #navMonth
alert($(output).find('#navDay').html()); // Results into "null"
$('#navDay').html($(output).find('#navDay').html()); // Results in an empty div, since it overwrote the html with 'null' - nothing.
//$('#navDay').replaceWith($('#navDay', output)); // Same here - nada.
//$('#navMonth').html($(output).find('#navMonth').html());
}
});
The first alert(output) results this:
<div id="navDay">Im day nav!</div>
<div id="navMonth">Im month nav!</div>
You need to wrap your two divs in an outer div if you expect to be able to use .find() or $(selector, context) - those functions only find descendent nodes, and you have two sibling nodes in your HTML without a real parent.
You could either do that wrapping server side, or use .wrap().
Furthermore, the .html() function only returns the inner content of your tags, not the tags themselves.
Assuming (based on your use of .replaceWith) that your intention is to replace entire elements, and not just text, I'd go for:
<div>
<div id="navDay">Im day nav!</div>
<div id="navMonth">Im month nav!</div>
</div>
At which point this line from your previously non-working code will work too:
$('#navDay').replaceWith($('#navDay', output));
Try this
// LOAD NAVIGATION
$.ajax({
type: 'POST',
url: 'includes/content/bookingsystem/b_navigation.php',
data: thisButtonType + '=true&loadNav=date',
success: function(output) {
//alert(output); // Outputs correctly two divs #navDay, and #navMonth
//alert($(output).find('#navDay').html()); // Results into "null"
$('#navDay').html($('#navDay', $(output).wrap("<div />")).html()); // Results in an empty div, since it overwrote the html with 'null' - nothing.
//$('#navDay').replaceWith($('#navDay', output)); // Same here - nada.
//$('#navMonth').html($(output).find('#navMonth').html());
}
});