I am trying to get parent element's id after re-attaching click event to a list item's third a tag (Delete), after list item is added via ajax. The structure looks as follows:
<ul id="list">
<li id="list_23">
Title
Edit | Delete
</li>
<ul>
The javascript is:
$('#list li').on("click", 'a:nth-child(2)', function(event) {
event.preventDefault();
id = $(this).parent().parent().attr('id');
console.log( id );
});
I am trying to get the list items id (the "list_23"), when third a link is clicked, after element is added via ajax.
That isn't the proper way to write delegated events with .on(). Try the following instead:
$('#list').on('click', 'li a:nth-child(3)', function(event) {
event.preventDefault();
id = $(this).parent().attr('id');
console.log( id );
});
See specifically this section of the .on() documentation for jQuery.
Edit: Updated my answer based on the li item being the element dynamically added to the DOM.
Edit 2: The problem was the :nth-child(n) selector is not zero index-based, rather it is one indexed based. Added working JSFiddle.
JSFiddle: http://jsfiddle.net/wyze/vTkYf/
Related
I have a div like this
<section class="item_container">
<article class="item">
<h2>Page Title</h2>
<p><a class="delete_page" href="http://www.abc.com/delete/1/">delete</a></p>
</article>
<article class="item">
<h2>Second Page Title</h2>
<p><a class="delete_page" href="http://www.abc.com/delete/2/">delete</a></p>
</article>
</section>
And i am using this code to remove/delete items from item_container
$('a.delete_page').live('click', function(e){
e.preventDefault();
$('footer#ajax_footer').html('')
$('footer#ajax_footer').show("slide", { direction: "down" }, 500);
var url = $(this).attr("href");
var parent_div = $(this).parents("div").parent("article");
var title = $(this).parents("div").parent("article").find('h2').html();
$('footer#ajax_footer').html('<h2>Are you sure you want to delete <u>'+ title +'</u> Page</h2><p>'+ url +'</p><p>Yes, Please Delete It</p>');
$('a.delete_this_page').live('click', function(e){
e.preventDefault();
parent_div.remove();
$('footer#ajax_footer').html('').slideUp();
$.sticky('<b>Page Deleted</b><p><u>'+ title +'</u> Page has been successfully deleted.</p>');
});
});
All the contents are loaded via Ajax and there are few more div in each article and there are 30+ articles.
The problem is i am using Sticky plugin to display notification after every item is deleted and it's working fine, Everything is working fine, But after i delete an Article, The sticky notification of previous deletion is displayed as well.
Like, After i delete an item, i see 1 sticky notification, After i delete second item i see 2 sticky notifications (1 of this and 1 of previous) i only want to see 1, And For every item i delete it display all the previous sticky notifications + 1.
Hope i made it clear enough, Thanks guys.
The problem you have is that every time you click on a a.delete_page element you're setting up a new click event handler using .live(), so for each subsequent click you get one more event handler that gets run.
The whole point of .live() - though, as a side note, it's deprecated; consider using .on() (jQuery 1.7+) or .delegate() (prior to 1.7) - is that it handles events triggered by dynamically added elements. Call this:
$('a.delete_this_page').live('click', function(e){
e.preventDefault();
parent_div.remove();
$('footer#ajax_footer').html('').slideUp();
$.sticky('<b>Page Deleted</b><p><u>'+ title +'</u> Page has been successfully deleted.</p>');
});
outside of your other callback function (in your $(document).ready()), and find another way to identify parent_div. Or, bind the click event to that specific link directly inside the callback handler.
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?
I am very new to MVC and jQuery and I have a problem adding a new tab to a jQuery tab panel.
I have a ASP.NET MVC3 View that contains two partial views. The first one is a search form and the second one displays the search results.
Now I need to put the search results in a tab of a tab panel. At a later point in this project it should work like this: The user searches for some keywords, and for each new search a new tab is added to the tab panel. This way it should be possible for the user to switch to a previous search. But I am not this far yet.
What I tried first was to add a static tab panel to the page with a single tab that contains the search results. This was rather easy and I had no problems. What I tried to do next, was to add a new tab with static content ("Hello World") to the tab panel each time the user clicks the submit button of the search form. But this doesn't really work:
I can see that the new tab is added to the tab panel. But only for < 1 sec. The new tab disappears as soon as the search results are rendered. It seems like rendering the partial view overwrites the changes made by jQuery/JavaScript.
This is the view (_SearchInput is the partial view for the search form, _SearchResults is the partial view used to display search results):
<div class="roundedBorder">
#Html.Partial("_SearchInput")
</div>
<div id="tabs" style="margin-top:7px;">
<ul>
<li>Test 1</li>
</ul>
<div id="contentcontainer">
<div id="fragment-1">#Html.Partial("_SearchResults")</div>
</div>
</div>
In _SearchInput I add the tabs when the document is ready and call searchClick when the submit button of the form is clicked:
<script>
$(document).ready(function () {
/* show tabs */
$('#tabs').tabs();
});
function searchClick() {
var keyword = $("#searchTextInput").val().trim();
if (keyword == null || keyword == "") {
return false;
}
var title = keyword.substring(0, 10);
$('#contentcontainer').append("<div id='fragment-2'>hello world</div>");
$('#tabs').tabs("add", "#fragment-2", title);
}
</script>
How are you submitting the form? If your not posting an ajaxy type of result this would be expected as your page will be refreshing on form submit.
Rather, than submit the form, submit the form with jquery and in your success callback perform your post form submission tasks.
EG:
$('form').submit(function(evt) {
evt.preventDefault();
$.ajax({
type: "POST",
url: "formsubmiturl",
data: dataposted,
success: function() {
// add jquery tab stuff here
}
});
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.
This is my first attempt at chaining select boxes in a web form using ajax and I I'm obviously missing something. I'm simply at a loss for what that is, exactly. Here is my issue:
A user selects a Country from one select box and an ajax request is made and options (containing names of States and Territories) are returned to a select box below. While the options are returned into the form select field, the user-selected option is NOT sent when the form is submitted.
Here is the code I've cooked up:
<script type="text/javascript">
jQuery(document).ready(function($){
$("select#state").attr("disabled","disabled");
$("select#country").change(function(){
$("select#state").attr("disabled","disabled");
$("select#state").html("<option>Loading States...</option>");
var id = $("select#country option:selected").attr('value');
$.post("http://example.com/terms.php", {id:id}, function(data){
$("select#state").removeAttr("disabled");
$("select#state").html(data);
});
});
});
</script>
You can see the live example here (see the Country/State section):
http://shredtopia.com/add/
Any ideas what is needed to get this working?
As far i can see, the user input is sent
input_32 79
input_29 alberta
Being 79 the country canada and alberta the state.
<select tabindex="11" class="medium gfield_select" id="input_1_32" name="input_32"></select>
<select tabindex="12" class="medium gfield_select" id="input_1_29" name="input_29" disabled=""></select>
Maybe i misunderstood the issue?
Try .live( eventType,handler )
Description: Attach a handler to the event for all elements which match the current selector, now and in the future.
http://api.jquery.com/live/
Add to your code and try it~
$('select#state').live('change', function() {
var id = $("select#state option:selected").attr('value');
alert(id);
});
Or try this:
add a hidden in form:
<input type="hidden" id="hiddenValue">
alter your select#state like this:
<select onchange='innerValue(this.options[this.options.selectedIndex].value)'></select>
and create a javascript function
function innerValue(value){
$("#hiddenValue").val(value)
}
then,click submitbutton,$("#hiddenValue").val() is you need
$("#submitbutton").click(function(){
alert($("#hiddenValue").val())
})
but,I think this is not the best solution...