This web page is currently displaying data from an "all" category from an rss feed once the page is loaded. My question is there are several categories which I would like the user to select and display. There are a total of 10 categories, and each correspond to a separate rss feed. Can anyone explain how I handle this event? Also, if one of the categories is selected, will it automatically override the current data being displayed? I will elaborate any unclear parts if needed. Thank you!
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: 'GET',
url: '/example',
dataType: 'xml',
success: function (xml) {
$(xml).find("item").each(function () {
var title = $(this).find("title").text();
var description = $(this).find("description").text();
var linkUrl = $(this).find("link").text();
//var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
var displaytitle = "<a href='" + linkUrl + "' target='_blank'>" + title + "</a>"
$('#feedContainer').append('<h3>'+displaytitle+'</h3><p>'+description+'</p>');
});
}
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<!-- /field panel -->
<div data-role="panel" id="fieldpanel" data-position="left" data-display="push">
<ul data-role="listview" data-inset="true" data-filter="false">
<fieldset data-role="controlgroup">
<legend>Categories</legend>
<input type="checkbox" name="checkbox-bio" id="checkbox-bio">
<label for="checkbox-bio">Bioengineering</label>
<input type="checkbox" name="checkbox-com" id="checkbox-com">
<label for="checkbox-com">Communications</label>
<input type="checkbox" name="checkbox-eleP" id="checkbox-eleP">
<label for="checkbox-eleP">Electrical/Power</label>
<input type="checkbox" name="checkbox-eleD" id="checkbox-eleD">
<label for="checkbox-eleD">Electronics/Design</label>
<input type="checkbox" name="checkbox-nano" id="checkbox-nano">
<label for="checkbox-nano">NanoEngineering</label>
<input type="checkbox" name="checkbox-opt" id="checkbox-opt">
<label for="checkbox-opt">Optics/Display</label>
<input type="checkbox" name="checkbox-semi" id="checkbox-semi">
<label for="checkbox-semi">Semiconductors</label>
</fieldset>
</ul>
</div><!-- /field panel -->
<!-- /settings panel -->
<div data-role="panel" id="settingspanel" data-position="right" data-display="push">
<ul data-role="listview" data-inset="true" data-filter="false">
<li>Join IEEE</li>
<li> subscription services</li>
</ul>
</div><!-- /settings panel -->
<div data-role="header" data-theme="b">
Menu
Settings
<h1>MOBILE</h1>
</div>
<div data-role="content">
<div id="feedContainer"></div>
<h3></h3>
<p></p>
</div>
<div data-role="footer">
<h4>Advertisements</h4>
</div>
</div>
</body>
</html>
I will assume you want to get the basic information about this code!
Ok, the first thing to handle is the type of the data to be shown.
<input type="checkbox" id="1" />
<input type="checkbox" id="2" />
Lets start with 2 instead of 10! The jQuery code for this would be easy to understand.
$('input[type=checkbox]').click(function () { // click on checkbox
var val = $(this).attr('id'); // get its id as value
if(val == '2') {
$('someelement).html('2 was selected');
$('#1').prop('checked', false); // unselect the other one
}
}
So, this is the basic code which will execute when a click event occurs on a checkbox. Now in your code you'll be using something like ajax then add the ajax request code before the .html() thing and write the response there.
To update the content being displayed you will be needed to use only one element as the basic clipboard for your app. Why? Because everytime you will get the data, you will be needed to replace the current content with that one and this way you will get only the current data; the selected data.
Lets try one checkbox from your code:
<input type="checkbox" name="checkbox-bio" id="checkbox-bio">
<label for="checkbox-bio">Bioengineering</label>
<input type="checkbox" name="checkbox-com" id="checkbox-com">
<label for="checkbox-com">Communications</label>
Now lets handle the jQuery
$('input[type="checkbox"]').click(function () {
// and all others will be here just as they are.. to check the id
// your ajax request is perfect, just copy paste that here..:)
});
But just need to make a change there, instead of sending the same request try to add one more thing there,
$.ajax({
// url and datatype here,
data: value
// success function goes here
});
Note that the value was the variable that we took from the checkbox. Which will be sent with the request so that you can process only the necessary part of the RSS and leave all other, just like an if else block.
Here is a working fiddle for this http://jsfiddle.net/afzaal_ahmad_zeeshan/KU9JT/.
But I am sorry, I didnot include the if else block to make the code work as it was meant to be. But you'll understand how to manipulate this.
Related
Here I need to click on a thumbnail, so that it will show the details on other page, it should show the details of that particular thumb only. I used xml file here to fetch the data and display thumbnail. I am unable to pass the values to other page and open it at the same time onclick event. pls help
<div class="container-page">
<div class="row" id="portfolio">
<div class="col-md-2">
<nav>
<ul class="nav nav-pills nav-stacked" id="test">
<li role="presentation" class="active">Services</li>
<li role="presentation">Desktop</li>
<li role="presentation">Web</li>
<li role="presentation">Mobile</li>
<li role="presentation">Design</li>
</ul>
</nav>
</div>
<div class="col-md-10">
<div class="row" id="thumb">
</div>
</div>
</div>
</div>
<!-- js -->
$.ajax({
type:"GET",
url:"portfolio.xml",
dataType:"xml",
success:function(xml)
{
$(xml).find('thumbnail').each(function()
{
var $thumbnail=$(this);
var type=$thumbnail.find('type').text();
var descr=$thumbnail.find('description').text();
var title=$thumbnail.attr('title');
var imageurl=$thumbnail.attr('imageurl');
var thum='<div class="col-xs-6 col-md-3"> </div>';
thum=$(thum).appendTo("#thumb");
thum = $('').appendTo(thum);
var thumName = $('<div class="thumTitle"></div>').appendTo(thum);
$('<h2>'+title+'</h2>').appendTo(thumName);
$('<p>'+type+'</p>').appendTo(thumName)
thum = $('<img src="'+imageurl+'" alt="image" class="thumbImgSize imgSlide">').appendTo(thum);
$(".forHove").mouseup(function()
{
//here is the redirection code, and want to pass $thumbnail to testxml.html page
window.location="http://www.bookmane.in/skillworks/testxml.html";
$(thum).appendTo(".s");
});
});
}
});
Well, one of the alternative is using Web Storage API.
Just store img html and use it.
// use 'click' instead of 'mouseup'
$(".forHove").click(function()
{
// store image html to sessionStorage
window.sessionStorage.image_data = $thumbnail.clone().wrapAll("<div>").parent().html();
window.location="http://www.bookmane.in/skillworks/testxml.html";
$(thum).appendTo(".s");
});
// in http://www.bookmane.in/skillworks/testxml.html
// You have data sotred and insert it somewhere
$(document.body).append(window.sessionStorage.image_data);
You can achieve this thing using the following steps:
Add a form tag like
<form action="YOUR_PATH" method="GET">
<a class="thubnailClick" href="#" >
<html_of_your_thumbnail>
<input type="text" name="NAME_OF_PARAMETER" />
</a>
</form>
Now override the click event of <a> tag with
$(document).ready(function() {
$(".thubnailClick").on('click', function(event) {
// to override the default behavior of <a> tag.
preventDefault();
// Find the form element using closest() of jQuery.
// Call submit event of that form using $(form_element).submit();
});
})
Now on the other page you can get parameter from URL using location.search or follow:
Getting Query params using JavaScript
Now use these Params according to your needs.
JQUERY Mobile Beginner Question: I have two pages in my simple multi-page JQUERY Mobile 'App'. When the user navigates to PAGE2, I want to do an AJAX call to get a JSON object containing a list of people + DB ID pairs. I want to present the list of people as buttons on PAGE2.
Code Snippet:
<div id="PAGE2" data-role="page">
<div class="ui-content">
// I want buttons to appear sequentially here
</div>
</div>
PAGE2 is my "placeholder" to populate with:
<input type="button" id="id1" name="id1" value="Bob Smith"/>
<input type="button" id="id2" name="id2" value="Jane Doe"/>
<input type="button" id="id3" name="id3" value="Kayla Kaye"/>
I'd also need to add a 'click' event handler in the script to react to the buttons. The reaction will be the same for all buttons (dynamically populate a PAGE3 with people detail, but I think I can figure that out if I see how PAGE2 population is correctly handled). What is the proper way to go about dynamically "creating" PAGE2 using the skeleton in place?
if jquery is allowed:
var elements = { id1:'Bob Smith', id2:'Jane Doe', id3:'Kayla Kaye'};
$.each( elements, function( key, value ) {
$("#PAGE2 .ui-content").append('<input type="button" id="' + key + '" name=" + key " value " + value +'"/>');
}
You can try this
$('#PAGE2').on('pagebeforeshow', function(){
var people = [
{ name:'Bob Smith', age:'56', place:'London'},
{ name:'John', age:'65', place:'USA'},
];
var btns;
$.each(people,function(indx,ppl){
btns = btns + '<input type="button" name="id1" value="' + ppl.name +'"/>';
});
$('#content_div').html(btns);
});
set id to div content to content_div
Here is a DEMO
With your 3 pages setup like this (I have added container divs for the buttons and details):
<div data-role="page" id="PAGE1">
<div data-role="header">
<h1>PAGE 1</h1>
</div>
<div role="main" class="ui-content">
Go to page 2
</div>
</div>
<div data-role="page" id="PAGE2">
<div data-role="header">
<h1>PAGE 2</h1>
</div>
<div role="main" class="ui-content">
<div id="thePeople"></div>
</div>
</div>
<div data-role="page" id="PAGE3">
<div data-role="header">
<a data-rel="back" class="ui-btn ui-btn-icon-left ui-icon-back">Back </a>
<h1>PAGE 3</h1>
</div>
<div role="main" class="ui-content">
<div id="theDetails"></div>
</div>
</div>
You can use the pagecontainer widget's beforeshow event to make your ajax call:
http://api.jquerymobile.com/pagecontainer/#event-beforeshow
In my example, I am checking where you are coming from and where you are going to. So coming from PAGE1 to PAGE2, I make the AJAX call and create the buttons. But if returning from PAGE3 to PAGE2, I just leave the already created buttons alone. Ater adding the buttons to the page, make sure and call .enhanceWithin() on the container so that jQM enhances the buttons.
$(document).on( "pagecontainerbeforeshow", function( event, ui ) {
var prevID = ui.prevPage.prop("id");
var newID = ui.toPage.prop("id");
if (prevID == "PAGE1" && newID == "PAGE2") {
//we have come from page 1 to page 2, so make AJAX call and populate page 2
var data = [
{ "id": "id1", "name":'Bob Smith'},
{ "id": "id2", "name":'Jane Doe'},
{ "id": "id3", "name":'Kayla Kaye'},
];
var buttons = '';
$.each(data, function(indx){
buttons += '<input type="button" name="' + this.id + '" value="' + this.name +'"/>';
});
$("#thePeople").empty().append(buttons).enhanceWithin();
}
});
Finally, when PAGE2 is created, I use event delegation to create a click event for any buttons that might be added (with event delegation, the buttons don't have to exist at the time the event is bound). In the event, get the id/name for the button that is clicked, get the details (Another AJAX call?), populate PAGE3, and then navigate to PAGE3 using the pagecontainer widget change method:
http://api.jquerymobile.com/pagecontainer/#method-change
$(document).on("pagecreate","#PAGE2", function(){
$(document).on('click', '#thePeople input[type="button"]', function(e){
var personid = $(this).prop("id");
var name = $(this).val();
$("#theDetails").text('Details for ' + name);
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#PAGE3", { transition: "slide" });
});
});
DEMO
I am using phonegap to develop an one to one chat application. My problem is when user click a contact and send a message. Then user click go back button and click another contact it can still see the message which he just sent to the first user.
Here is a part of my code:
Here is using ajax to get contact from server.When it success,it will generate a list view to show all contacts.
$.each(contacts, function(i,item)
{
output += '<li data-name='+item+'>' + item + '</li>';
$('#contacts_list').html(output).listview('refresh');
//Show the contact name on the front of chat page
$('#contacts_list').children('li').on('click', function ()
{
var contact_name=$(this).attr('data-name');
$('#contact_name').html(contact_name);
get_name(contact_name);
});
});
<!--When someone click a user in contacts, it will show the chat page-->
<div data-role="page" id="chat_page" data-role="page" data-theme="a">
<div data-role="header">
<h1 id="contact_name"></h1>
</div>
<div data-role="content">
<div id="incomingMessages" name="incomingMessages" class="msgContainerDiv" >
</div>
<label for="messageText"><strong>Message:</strong></label>
<textarea id="messageText"></textarea>
</div>
<div data-role="footer">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
Go Back
</div>
<div class="ui-block-b">
<button data-theme="a" id="chatSendButton" name="chatSendButton">Send
</input>
</fieldset>
</div>
</div>
And here is part of ajax code where I using ajax to get chat data, then append them in to my chat page.
success: function(data)
{
var get_data = JSON.parse(data);
$("#incomingMessages").append
(
"<div class='message'><span class='username'>" +
(get_data.from || 'Anonymous') +"</span> : " +
(get_data.message || ' ') + "</br>" +
(get_data.message_time || ' ')
+"</div>"
);
}
});
I know the reason is when user click contact it will always go to the same page and that is why message can be seen to all of users.
Is there any solution for this?
Thanks in advance.
A simple solution will be to use local storage to store the history (#incomingMessages) and #messageText for each user.
Then you can clear #messageText and just reload it when the user reopens the chat.
You should clear #incomingMessages when you switch users. You are likely leaving the HTML content in that div when you want to be replacing it with the new user's messages.
Something like
$('#incomingMessages').html('')
[Update] code I have edited
First, the plain HTML :
<ul>
<li>coke</li>
<li>buble-tea</li>
<li>milk</li>
</ul>
Second, link page (javascript_accord.php) contain javascript:
<html>
<head>
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
<script language="javascript">
$(document).ready(function() {
var option = 'coke';
var url = window.location.pathname.split('/');
option = url[3];
showDiv(option);
});
function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();
}
</script>
</head>
<body>
<div class="boxes" id="coke">Coke is awesome!</div>
<div class="boxes" id="bubble-tea">Bubble tea is da bomb!</div>
<div class="boxes" id="milk">Milk is healthy!</div>
<p>
I change my mind:
<ul>
<li>Coke</li>
<li>Bubble Tea</li>
<li>Milk</li>
</ul>
</p>
Back to main page
</body>
</html>
I found some tutorial about 'show/hide' content based on URL parameter via JavaScript.
But I stuck when I change a part of the JavaScript code.
Here are the code that I learned from the tutorial.
First page contain some links to other page:
If you had to choose a drink, what would you choose:
<a href="/demo/demo-show-hide-based-on-url.html?option=coke"
<a href="/demo/demo-show-hide-based-on-url.html?option=bubble-tea"
<a href="/demo/demo-show-hide-based-on-url.html?option=milk
And here is the code contain in linking page (/demo/demo-show-hide-based-on-url.html) :
<div class="boxes" id="coke">Coke is awesome!</div>
<div class="boxes" id="bubble-tea">Bubble tea is da bomb!</div>
<div class="boxes" id="milk">Milk is healthy!</div>
<p>
I change my mind:
<ul>
<li>Coke</li>
<li>Bubble Tea</li>
<li>Milk</li>
</ul>
</p>
Back to main page
And the javascript :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var option = 'coke';
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();
}
</script>
It works greatly, but when I try to change the link page from
href="/demo/demo-show-hide-based-on-url.html?option=coke"
into something like this :
href="/demo/demo-show-hide-based-on-url.html/option/coke"
And change the url variable in javascript from
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
to
var url = window.location.pathname.split('/');
option = url[3];
And all content in
<div class="boxes" id="...">
appear.
It supposed to be only selected one will appear. I have tried
var url = window.location.pathname.split('/');
option = url[3];
in simple JavaScript to check whether it will catch the right or value or not. And it does return the right value (coke, milk, bubble-tea).
So, what went wrong?
I hope somebody understand this problem and help.
path to jquery is wrong. Can you please check if jquery library is loading?
jquery will be loaded from javascript_accord.php/option/coke/development-bundle/jquery-1.3.2.js
Please make the path to library absolute. That should do :)
I believe that window.location will return the full URL of the page, so you're not just working with the /demo/demo-show-hide-based-on-url.html/option/coke part.
I'd simply change the regular expression instead to replace the = with a /, like so:
option = url.match(/option\/(.*)/)[1];
"/demo/demo-show-hide-based-on-url.html/option/coke".split('/')[3] will return option and not coke
there are 5 entries in the array, because there is an empty string before the first '/':
"",
"demo",
"demo-show-hide-based-on-url.html",
"option" and
"coke"
I have this page which loads quotes. It has a search form wherein if the user types in the search keyword, it will load the results via ajax. Now, if I click on the link which should load the default page with the Quotes, instead of the search results page, nothing happens.
If I am on the home/default page itself, and click on the link, it will display a random quote, but once it displays the search page, if I click on the link to display a random quote, nothing happens. Firebug shows that the function isn't being executed.
jQuery code:
function loadQuotes() {
$("#bquote").load("quotes_in.php");
}
$("a#main").click(function() {
$(this).addClass("current");
$(".toggleDiv").slideUp(600);
loadQuotes();
});
loadQuotes(); //call it once on load
$(".bsearch").keydown(function() {
//create post data
var postData = {
"search" : $(this).val()
};
//make the call
$.ajax({
type: "POST",
url: "quotes_in.php",
data: postData, //send it along with your call
success: function(response){
setTimeout(function() {
$('#left').html(response);
$("div#smore").hide();
}, 250);
}
});
})
HTML:
<!-- Begin Left Column -->
<div id="left">
<!-- Begin Panel -->
<div class="check">
<p><input type="checkbox" value="Quote" name="quote" id="quote" checked /> <label for="quote">Quote</label></p>
<p><input type="checkbox" value="Reference" name="reference" id="reference" checked /> <label for="reference">Reference</label></p>
</div>
<!-- End Panel -->
<!-- Begin Quote -->
<blockquote id="bquote">
</blockquote>
<!-- End Quote -->
</div>
<!-- End Left Column -->
<!-- Begin Naviagtion -->
<div id="navigation">
<ul>
<li><a id="main">Another?</a></li>
<li><a id="bsearch">Search</a></li>
<li><a id="babout">About</a></li>
<li><a id="bcontact">Contact</a></li>
</ul>
</div>
<!-- End Naviagtion -->
PHP search:
public function formatSearch($row, $search)
{
$cQuote = $this->highlightWords(htmlspecialchars($row['cQuotes']), $search);
return "<div class=\"swrap\">"
. "<p id=\"s_quotes\"><img src=\"image/list1.png\" alt=\"b\" style=\"position:relative; top:2px;\"> " . $cQuote . " </p>"
. "<div id=\"smore\"><p id=\"s_arabic\">" . $this->h($row['cArabic']) . "</p>"
. "<p id=\"s_author\"><b>~</b> " . $this->h($row['vAuthor']) . "</p>"
. "<p id=\"s_reference\"><span class=\"source\">Source:</span> " . $this->h($row['vReference']) . "</p></div></div>"
. "<img src=\"image/sep.png\" style=\"position:relative; left: 600px;\">";
}
The new results aren't going to be acknowledged by the JavaScript as the script only acknowledges what HTML is there upon the page load. For your function to be able to 'see' HTML generated via AJAX Functions, you need to use he Jquery live function http://api.jquery.com/live/
Convert your current click function to something like this
$('a#main').live('click', function() {
$(this).addClass("current");
$(".toggleDiv").slideUp(600);
loadQuotes();
});