We Keep Coding

Data appears below in each child div

I am creating a page in which when an anchor tag is click it pulls in data from the URL associated with that anchor. I want the data pulled in to only display in the div class popup associated with that anchor. Each anchor and div class popup are in a parent div named employee. When it is click now it pull in the data but to every div class popup on the page. I have tried .find and .children but neither is working. Can anyone help me?
(function($) {
function find_page_number(element) {
return parseInt(element.html());
}
$('.leadership').on('click', function(event) {
event.preventDefault();
page = find_page_number($(this).clone());
var memberSrc = $(this).attr('href');
$.ajax({
url: memberSrc,
type: 'get',
dataType: 'html',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function(html) {
$(".popup").empty();
$('.popup').append($(html).find('.single-member').html());
}
});
})
})(jQuery);
<div class="employee">
<a class="leadership" href="different for each">
<img src="#" />
</a>
<div class="popup"></div>
</div>
<div class="employee">
<a class="leadership" href="different for each">
<img src="#" />
</a>
<div class="popup"></div>
</div>

That's because you're using the class selector .popup and you have multiple popups on the page.
To get a reference to the popup you want, you can go up to the parent and look for a popup in the element, or look at the siblings of .leadership.
Something like this may work:
$('.leadership').on('click', function(event) {
event.preventDefault();
page = find_page_number($(this).clone());
var memberSrc = $(this).attr('href');
// Get a reference to your parent employee div
var parent = $(this).parent();
$.ajax({
url: memberSrc,
type: 'get',
dataType: 'html',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function(html) {
var popup = parent.find(".popup");
popup.empty();
popup.append($(html).find('.single-member').html());
}
});

I think this will do it for you - you need to target the child popup tag with .find()
$('.leadership').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent();
^^^^^^^^^^^^^^^^^^^^
page = find_page_number($(this).clone());
var memberSrc = $(this).attr('href');
$.ajax({
url: memberSrc,
type: 'get',
dataType: 'html',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function(html) {
var popup = $this.find(".popup");
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
popup.empty();
popup.append($(html).find('.single-member').html());
}

How to iterate down an Array in chunks

I'm trying to build an application that takes a text from a website (for the app I'm using gutenburg.org's open ebook catalog) and displays the story in bites of 10 indexes at a time in a div to make the story easier to read for those with ADD. I have a working increment function but I'm stuck as to how to increment back to the previous chunk.
HTML:
<input type="text" id="url" style="width: 400px">
<input type="button" id="btn" value="Get JSON">
<button id="button">Next</button>
<button id="prev">Previous</button>
<div id="test"></div>
Javscript:
$(function() {
$( '#service' ).on( 'change', function(){
$( '#url' ).val( $( this ).val() );
});
//angular.module('exampleApp')
$( '#url' ).val( $( '#service' ).val() );
$( '#btn' ).click(function(){
var url = $( '#url' ).val()
$.ajax({
crossOrigin: true,
proxy: "http://localhost:8888/whorl/proxy.php",
url: url,
//dataType: "json", //no need. if you use crossOrigin, the dataType will be override with "json"
//charset: 'ISO-8859-1', //use it to define the charset of the target url
context: {},
success: function(data) {
//alert(data);
var body = data;
console.log(body.length);
//body/data is a string
var text = body.split(' ')
console.log(text.length);
var increment = function(array) {
if (array.chunk < array.length) {
var chunk = array.slice(array.chunk,Math.min(array.chunk+array.chunkSize, array.length).join(" ");
array.chunk += array.chunkSize;
$( '#test' ).html(chunk);
console.log(chunk);
}
};
$(document).ready(function(){
$("button").click(function() {
increment(text);
});
});
}
})
.done(function( data, textStatus, jqXHR ) {
//alert(data);
});
});
});

pass an attribute, value would be either INCREMENT or DECREMENT
if (value=='increment')
array.chunk += array.chunkSize;
else
array.chunk -= array.chunkSize;

Ajax section not working correctly

I'm trying to get the ajax section to work but I have had no luck. I tried putting it in a different section but the variable "selection" does not go through and the page does not update. Basically what I"m trying to do is get the a value entered in the dropdown input item and then using that value to create a table in the Ajax function.
<html>
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<script>
$( document ).on( "pagecreate", function() {
$( "#mylist li" ).on( "click", function() {
$( "#myinput" ).val( $( this ).text() );
$("#mylist li" ).addClass('ui-screen-hidden');
var selection = $( "#myinput" ).val();
var station_code = "null";
if (selection == "Location1")
{
station_code = "A254";
my_url="www.someurl.com/"+station_code;
}
else{
station_code = "A300";
}
$.ajax({
type:"get",
dataType: 'jsonp',
url: "www.someurl.com",
success: function(data) {
//write code
}
});
});
});
</script>
<div data-role="content" id="content">
<form class="ui-filterable">
<input type="text" id="myinput">
</form>
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-input="#myinput" id="mylist">
<li>location1</li>
<li>location2</li>
<li>location3</li>
</ul>
</div>

I think your javascript code is a bit messy. Try this one :
$( document ).on( "pagecreate", function() {
$( "#mylist li" ).on( "click", function() {
$( "#myinput" ).val( $( this ).text() );
$("#mylist li" ).addClass('ui-screen-hidden');
var selection = $( "#myinput" ).val();
var location_code = "null";
var my_url = "null";
if (selection == "Elm St"){
location_code = "R227";
}
my_url="www.somelink.com";
$.ajax({
type: "post",
url: my_url,
dataType: 'jsonp',
success: function(data){
document.write(data);
},
error: function(){
document.write ("didn't work");
}
});
});
});

Jquerymobile-1.4.0 keyUp event is called twice every time character is entered in the autocomplete textfield

I used the example from jQuery mobile site Autocomplete source code
It's working fine, but when I tried to give alert in the script inside the listviewbeforefilter event, it's showing the alert 3 times, so when 3 characters are entered, it will prompt around 7-9 times.
Why is it showing so many alerts? I thinks it should prompt only once when the character is inserted.
Here is the code retrun in script for autocomplete:
$( document ).on( "pageinit", "#myPage", function() {
alert("abc");
$( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
alert("789");
if ( value && value.length > 2 ) {
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
$ul.listview( "refresh" );
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
crossDomain: true,
data: {
q: $input.val()
}
})
.then( function ( response ) {
alert("123");
$.each( response, function ( i, val ) {
html += "<li>" + val + "</li>";
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
});
});
Here is the code return in the body tag:
<div data-role="content">
<h3>Cities worldwide</h3>
<p>After you enter <strong>at least three characters</strong> the autocomplete `function will show all possible matches.</p>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" `data-filter-placeholder="Find a city..." data-filter-theme="a">
</ul>
</div>

Passing parameters to a JQuery function

I'm creating HTML with a loop that has a column for Action. That column
is a Hyperlink that when the user clicks calls a JavaScript
function and passes the parameters...
example:
<a href="#" OnClick="DoAction(1,'Jose');" > Click </a>
<a href="#" OnClick="DoAction(2,'Juan');" > Click </a>
<a href="#" OnClick="DoAction(3,'Pedro');" > Click </a>
...
<a href="#" OnClick="DoAction(n,'xxx');" > Click </a>
I want that function to call an Ajax jQuery function with the correct
parameters.
Any help?

Using POST
function DoAction( id, name )
{
$.ajax({
type: "POST",
url: "someurl.php",
data: "id=" + id + "&name=" + name,
success: function(msg){
alert( "Data Saved: " + msg );
}
});
}
Using GET
function DoAction( id, name )
{
$.ajax({
type: "GET",
url: "someurl.php",
data: "id=" + id + "&name=" + name,
success: function(msg){
alert( "Data Saved: " + msg );
}
});
}
EDIT:
A, perhaps, better way to do this that would work (using GET) if javascript were not enabled would be to generate the URL for the href, then use a click handler to call that URL via ajax instead.
Click
Click
Click
...
Click
<script type="text/javascript">
$(function() {
$('.ajax-link').click( function() {
$.get( $(this).attr('href'), function(msg) {
alert( "Data Saved: " + msg );
});
return false; // don't follow the link!
});
});
</script>

If you want to do an ajax call or a simple javascript function, don't forget to close your function with the return false
like this:
function DoAction(id, name)
{
// your code
return false;
}

Do you want to pass parameters to another page or to the function only?
If only the function, you don't need to add the $.ajax() tvanfosson added. Just add your function content instead.
Like:
function DoAction (id, name ) {
// ...
// do anything you want here
alert ("id: "+id+" - name: "+name);
//...
}
This will return an alert box with the id and name values.

try something like this
#vote_links a will catch all ids inside vote links div id ...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(\'#vote_links a\').click(function() {// alert(\'vote clicked\');
var det = jQuery(this).get(0).id.split("-");// alert(jQuery(this).get(0).id);
var votes_id = det[0];
$("#about-button").css({
opacity: 0.3
});
$("#contact-button").css({
opacity: 0.3
});
$("#page-wrap div.button").click(function(){

<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
function omtCallFromAjax(urlVariable)
{
alert("omt:"+urlVariable);
$("#omtDiv").load("omtt.php?"+urlVariable);
}
</script>
try this it work for me