I was trying to get my head around jQuery's Ajax. I have a page made up of a number of divs. I also have an XML document generated from a MySql resultset.
In the jQuery function below I am able to populate the titleDiv with data. The question I have is how do I populate the other divs on the page without having to build the page from scratch? I hope this makes sense......
$(document).ready(function() {
$("#getData").click(function(){
var data = "";
$.get("phpAjax.php", function(theXML){
$('row',theXML).each(function(i){
var title = $(this).find("Title").text();
var rating = $(this).find("Rating").text();
data = data + title;
});
$("#titleDiv").html(data);
$("#ratingDiv").html(?????);
});
});
});
did u try with??
first decalre variable
var title='';
var rating ='';
& then inside each
title+ = $(this).find("Title").text();
rating+ = $(this).find("Rating").text();
$("#titleDiv").html(title);
$("#ratingDiv").html(rating);
Related
I have tried with below code but it is not taking current instance of class which is clicked. Instead of that it is showing content of first class which he finds within my iframe.
$(document).ready(function(){
$('#framedata').load(function(){
var iframe = $('#framedata').contents();
iframe.find(".editContent").click(function(){
$("#spanid").show();
var content_edit = iframe.find(".editContent").html();
//alert(content_edit);
//var content_edit = x.contentWindow.documentgetElementByClass('editContent').innerHTML;
$("#spanid").append("<textarea id='editor'>"+content_edit+"</textarea>");
});
//...etc...
});
});
Thanking you in advance
My goal is to obtain an array of data from a mysql database using PHP for use in a javascript function; graph() in the example below.
I have chosen to do this by loading the data i need to a DOM element. I am now trying to access it. The query works and I can see the information I need in my #loadTarget div. I am having trouble accessing the innerHTML though.
According to Jquery documentation, i can use a complete function which will execute once the load is done:
.load( url [, data ] [, complete ] )
Why then, when I can see the database data I need rendered in my element, can i not access it using getElementByID and innerHTML?
var dataLocation = document.getElementById("arrayTargetOne");
var data = dataLocation.innerHTML;
The above returns data is null. If i do the same getElementById on the parent element (not the one created in my PHP .load file, the one already there), i can see the data I need. It is like the .load function is not complete. Am i missing something minor or should i take a different approach?
The Javascript/Jquery
$( ".selectUser" ).click(function() {
var userChoice = document.getElementById(this.id);
var user = x.innerHTML;
$("#loadTarget").load("example.php",{"data":user},function() {
var dataLocation = document.getElementById("arrayTargetOne");
var data = dataLocation.innerHTML;
alert(data);
graph();
});
The PHP
<?php
$login_errors = array();
require ("config.php");
require (MYSQL);
$arrayOne = array();
$arrayTwo = array();
$exampleQuery = $dbc->prepare("SELECT exampleFieldOne,exampleFieldTwo FROM exampleTable WHERE userID=? AND name=?");
$exampleQuery->bind_param('ss',$_SESSION['user_id'],$_POST['data']);
$exampleQuery->execute();
$exampleQuery->bind_result($a,$b);
while($exampleQuery->fetch()){
array_push($arrayOne,$a);
array_push($arrayTwo,$b);
}
echo '<span id="arrayTargetOne">';
echo json_encode($arrayOne);
echo '</span><span id="arrayTargetTwo">';
echo json_encode($arrayTwo);
echo '</span>';
?>
});
var list = document.getElementById('loadTarget').children;
for (var i=0, len = list.length; i<len; ++i) {
var data = list[i].nodeValue; //for text nodes, use innerHTML for elements
//do stuff with data
}
The list will be a list of the created DOM nodes.
I have some issues with JQuery.
Code;
$(document).ready(function(){
$("#area_results").click(function(){
$("#areaclickpass2 a").click(function(){
var value = $(this).html();
var input = $('#inf_custom_TESTclubarea');
input.val(value);
$("#area_results").hide(); // hide results after click
});
});
});
The current website is requiring 2 clicks to input the value into a field.
I understand why it's doing this (Best solution I can think of to achieve the outcome), however I was curious whether it is possible to achieve the same result by only using a single click.
Thanks for your time.
Create a variable that counts up with each click and execute your code when that variable equals 2.
$(document).ready(function(){
var click_count = 0;
$("#area_results").click(function(){
click_count++;
if(click_count==2){
var value = $(this).html();
var input = $('#inf_custom_TESTclubarea');
input.val(value);
$("#area_results").hide(); // hide results after click
}
});
});
You are binding a event handler within another event handler. #areaclickpass2 will not be handled unless you click on #area_results first.
Just move $('#areaclickpass2') event binding out of #area_results scope:
$("#area_results").click(function(){
//may not even be necessary to have this
});
$("#areaclickpass2 a").click(function(){
var value = $(this).html();
var input = $('#inf_custom_TESTclubarea');
input.val(value);
$("#area_results").hide(); // hide results after click
});
In my jquery mobile app, when I click a list element, I get the id of that element. Now I want to pass that id to another page so I can make a query to the database. What would be the best way to achieve this? I tried with a form to post the id, but I don't want a form with a submit button on the page. I also tried using sessionStorage, but I am unsure how to use it properly. Presently, when I click a list element, an alert shows me the id of that selected list element.
<script>
$(document).ready(function(){
$("li").click(function() {
var journeyID = this.id;
sessionStorage.journeyId = journeyID;
alert(sessionStorage.journeyId);
var j = getElementById(journeyDetailsForm);
j.innerHTML = journeyID;
//document.forms["journeyForm"].submit();
});
});
</script>
If you know the url of the page
$("li").on("click",function(){
var url = "example.com/page.php",
id = this.id;
window.location= url + "?id=" + id;
});
I have a div with more than one ID and I need to get each ID separately and send both variables off to a PHP file. I feel this would be the simpler option if achievable but the other option is to split the two IDS on the server side with PHP once the ID has been sent to it by jQuery. One ID is the timestamp the other the ID in the database.
HTML div example:
<div style="margin-bottom:10px;" id="1000003 2012-09-04 21:24:32" class="newsItem"></div>
The 1000003 is the ID i need to get into one separate variable and the rest is the timestamp I need in another separate variable.
The jQuery I have:
window.setInterval(function(){
//scripting here
var obj = $('.newsItem:first').map(function(_, elem){
return elem.id;
});
var ids = $.makeArray(obj); //variable of IDS
$.get("AJAX/get_feed_updates.php",{ ids: ids },function(result){
$("#newsFeed").html(result);
});
}, 5000);
The PHP file just puts the ID into a variable and queries the database with it.
Store one in the DATA attribute. Here is another reference to how its used.
Is this right?
window.setInterval(function(){
//scripting here
var theId = $('.newsItem:first').attr('id');
var a = theId.split(' ');
var theId = a[0];
var theStamp = a[1]+''+a[2];
$.get("AJAX/get_feed_updates.php",{ ids: theId },function(result){
$("#newsFeed").html(result);
});
}, 5000);
You should use data attribute. Then you can do something like this..
<div data-timestamp="1000003 2012-09-04 21:24:32" id="myId"></div>