I have an box in Page1 with some different alternatives and below this a div where I want to load in content (different divs) from an external page (Page2) based on choosen alternative.
Page1
<select id="choose_alternative">
<option> Books </option>
<option> Paper </option>
</select>
Page2
<div id="Book_div">Content</div>
<div id="Paper_div">Content</div>
I found THIS POST and tried figure out how to use the code and ended up with this:
$("#choose_alternative").change(function(){
$("#show_alternative").load( $(Page2.html #Book_div).val() );
$("#show_alternative").load( $(Page2.html #Paper_div).val() );
});
Does anybody know what I have done wrong?
Thanks.
If I understand your question right, what you want to do is according to the selection load the div. check the code below.
$("#choose_alternative").change(function(){
var choose_alternative = $("#choose_alternative option:selected").text();
if(choose_alternative == 'Books'){
$("#show_alternative").load('Page2.html #Book_div');
}
else if(choose_alternative == 'Paper'){
$("#show_alternative").load('Page2.html #Paper_div');
}
});
else you can just load the content right away
$("#choose_alternative").change(function(){
$("#show_alternative").load("Page2.html #Book_div");
$("#show_alternative").load("Page2.html #Paper_div");
});
Read more
Here is the relevant part of the documentation:
http://api.jquery.com/load/#loading-page-fragments
It says to do it like this:
$("#choose_alternative").change(function(){
$("#show_alternative").load("Page2.html #Book_div");
$("#show_alternative").load("Page2.html #Paper_div");
});
Ok I dont get it to work so something is wrong. Its strange becuse there is other similar scripts on the same page that works great.
$(document).ready(function (){
$('#choose_alternative').change(function(){
$show_alternative = $('#show_alternative');
var selectedElement = $('#choose_alternative :selected');
switch($(selectedElement).val())
{
case " Books ":
$show_alternative.load('Page2.html #Book_div');
break;
case " Paper ":
$show_alternative.load('Page2.html #Paper_div');
break;
default:
$show_alternative.html('No option selected.');
break;
}
}
}
Never forget the $(document).ready( function(){...}) part; it is what renders your code so it can be triggered.
Related
I'm developing a web application,after login the user is redirected to the inbox page,
where he will find many widgets, each with hundreds of records.
So it is taking too much time to open inbox page after login success.Very much performance issue.
So i want to display some(5-10) records in each widget
and after the page loads in the backend(user doesn't know) the request will be processing still and fetch the records and append them to the widget records.
Eg. If you open google images and search for cricket, it will display the page with images and if you scroll down only you will come to know the ajax request going and appending the response to the web page,
But it is not waiting till the entire page is loaded.
I must develop my application in the same way.
Any idea is Highly Appreciated and sample code too.
This should work for you, Mr.Chowdary.
You would need something to handle your requests in the backend. Since you did NOT specify whether you used Java or PHP or Python or whatever, I used PHP - its what I know best :D
PSEUDO CODE (loadmore.jsp)
Begin
widget = URL(widget) //the widget id or name
page = URL(page) //the page being retrieved
switch (widget)
{
case "widget1":
data_for_widget1 = paginated_query1(page)
print data_for_widget1
break
case "widget2":
data_for_widget2 = paginated_query2(page)
print data_for_widget2
break
default :
print "Invalid Widget"
break
}
End
PHP Version
<?php
if (isset($_GET['page'])) {
$widget = $_GET['page'];
$page = $_GET['page'];
switch ($widget) {
case "MyWidget1": //dynamic example
$manyManyItems; //A massive array of items
$pages = array_chunk($manyManyItems, 5); //break it up into chunks of 5 items
if( array_key_exists ($pages[$page]) )
for ($i = 0; $i < count($pages[$page]); $i++) { //load those chunks
echo '<div class="item">'.$pages[$page][$i].'</div>';
}
else {
echo "zero"; //code word that tells ajax that there is nothing more to load
}
break;
case "MyWidget2": //manual example
if($page==1) { //loads the first chunck manually
echo '<div class="item">dynamic content 1</div>';
echo '<div class="item">dynamic content 2</div>';
echo '<div class="item">dynamic content 3</div>';
}
elseif($page==2) { //loads the next batch
echo '<div class="item">dynamic content 1</div>';
echo '<div class="item">dynamic content 2</div>';
echo '<div class="item">dynamic content 3</div>';
}
else
echo "zero"; //code word that tells ajax that there is nothing more to load
break;
default:
echo "zero"; //code word that tells ajax that there is nothing more to load
}
}
?>
HTML
Each widget could look like this
<div id="MyWidget1" class="widget" data-widgetPage="0">
<div class="item">default content</div>
<div class="item">another default content</div>
...
<div class="loadmoreajaxloader" style="display:none;"><center>Loading...</center></div>
</div>
Javascript
<script type="text/javascript">
$(".widget").scroll(function()
{
if($(this).scrollTop() == $(this).height() - $(this).height())
{
var nextPage = eval($(this).attr("data-widgetPage") + 1);
$(this).find('.loadmoreajaxloader').show();
$.ajax({
url: "loadmore.php?widget="+$(this).attr("id")+"&page="+nextPage,
success: function(html)
{
if(html != "zero")
{
$(this).append(html);
$(this).('.loadmoreajaxloader').hide();
}else
{
$(this).find('.loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
$(this).attr("data-widgetPage", nextPage);
}
});
</script>
Success with the app.
I got to know the following answer suits my requirement from the following site.. Jquery endless scrolling
--Select--
admin/order/orderlist/paid" style="color:#000000; text-decoration:none">Paid
admin/order/orderlist/successfully" style="color:#000000; text-decoration:none">Successfully
?>
Maybe you are looking for the :selected Selector in jQuery: http://api.jquery.com/selected-selector/ ?
To put it simple, you could do some JS similar to this:
$("#mySelect").change(function () {
var selected = $(this + "option:selected").text();
if(selected == "someValue")
window.location = "someUrl";
});
... that is, when someone selects an item, the text of the selected item is grapped using the jQuery selector. Knowing that value you could then decide to which URL you want to sent the user - in this case, by using window.location.
The corresponding HTML could look like this:
<select id="mySelect">
<option>someValue</option>
<option>someOtherValue</option>
</select>
I am having some difficulty passing a correct id function back to AJAX.
I'm creating a product bulletin generator that lets items to be added by their SKU code (which works fine). My problem is that when a bulletin is clicked on, a preview of that bulletin is loaded into a div and shows all products associated with that bulletin.
From inside those results, I am trying to add the ability to delete a product from the bulletin. The problem is that the value being passed back to AJAX belongs to the first product only. It won't send the value belonging to the particular item if it is any other item than the first one.
This is the code (belonging to main.php) that gets loaded via AJAX into a div and is looped with each product associated with a selected bulletin
echo "<form name='myDelForm'>
$news_gen_id<br>
<input type='hidden' id='delccode' value='".$news_gen_id."'>
<input type='hidden' id='deledit' value='".$edit."'>
<input type='button' onclick='ajaxDelCcode()' value='Delete' /><br></form>
</td>";
The AJAX code (on index.php, where the div that calls in main.php is also located) is this
function ajaxDelCcode(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById("ajaxMain2");
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var deledit = document.getElementById("deledit").value;
var delccode = document.getElementById("delccode").value;
var queryString = "?delccode=" + delccode + "&deledit=" + deledit;
ajaxRequest.open("GET", "main.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
Currently, using those two pieces of code, I can successfully delete only the first product. The delccode variables do not seem to change when the products are looped (although when I echo the variables during the loop, it is definitely changing to the appropriate value...it's just not passing it correctly back to AJAX.)
I tried taking the AJAX code, putting it inside the main.php product loop, and change the function name during each loop (so ajaxDelCcode$news_gen_id() for example) and also to the button itself so that it is calling the AJAX specific to it. And it works if you are visiting main.php directly...but not from index.php after main.php has been called into the div.
I can't figure out how to pass the correct looped value from main.php within the div, back to the AJAX code on index.php
Can anyone help me with this?
Thanks,
Dustin
Instead of storing the id in the input, just pass it as an argument to the function:
function ajaxDelCcode(delccode) { ...
<input type='button' onclick='ajaxDelCcode(\"".$news_gen_id."\")' value='Delete' />
Also, I'd swap the quotes if I were you. Or better yet, instead of using echo, break the PHP code and just write HTML:
<? ... ?><input type="button" onclick="ajaxDelCcode('<?= $news_gen_id ?>')" value="Delete" /><? ... ?>
What does the code you use to delete look like? Is it in the same php file as the form you posted above? If so, is the form getting submitted to itself accidentally? Like perhaps when a user presses enter while on an input type=text control? I understand that you want to do this by ajax but I am suspecting that the form is your problem.
Seconding the jQuery comment.
Here try this
1) add jquery to your document.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
2) give your inputs name attributes
<input type='hidden' name='delcode' id='delccode' value='".$news_gen_id."'>
<input type='hidden' name='deledit' id='deledit' value='".$edit."'>
3) Use a function something like this instead of all that code above
function ajaxDelCcode() {
$.ajax({
url: "main.php",
type: "GET",
dataType: "text",
data: $("#myDelForm").serialize(),
success: function(rText) {
$("#ajaxMain2").text(rText);
}
});
}
sorry if its a stupid question but i need a bit of a help.
I made a signup form, and i would like to people select 2 phone numbers.
If i select hungarian a hungarian phone type input slides down, if he selects ukraine than an ukraine phone input type slides down.
here is the html
<input type='text' name='telefon' id='magyar' class='input_title' value='<?php echo set_value('telefon'); ?>' />
<input type='text' name='telefon' id='ukran' class='input_title' value='<?php echo set_value('telefon'); ?>' />
<div class='hiba'><?php echo form_error('telefon'); ?></div>
magyar = hingarian
ukran = ukraine
telefon = phone
telo_tipus = phoe type
my problem is the validation, if i select hungarian and fill it out it says i need to add a phone number but if i select ukraine its ok
here is the validation
$this->form_validation->set_rules('telefon', 'Telefon', 'required|callback_hasznalt_telefon');
could please someone point out what im missing with the validation?
i tried with na=telefon[] but in that case the validation wont work
the callback only validates if the phone is taken thats ok but here it is
function hasznalt_telefon()
{
$telefon = trim($this->input->post('telefon'));
$query = $this->db->query(' SELECT telefon FROM felhasznalok WHERE telefon = "'.$telefon.'" ');
if($query->num_rows() > 0)
{
$this->form_validation->set_message('hasznalt_telefon', 'Ez a telefonszám már használatban van ');
return false;
}
else
{
return true;
}
}
Your codeigniter code is fine, but your html/javascript is what needs to change.
Instead of having two input fields with the same name (which the php script will only read the last one, btw), you should make a select field that changes what input type slides down from the 'telefon' field.
I'm not sure what javascript you are using, but in jquery you can have the the input field event bound on selection from the select field.
If you need more specific guidance for this, let me know and I'll edit my answer.
<select id="telefon_type">
<option>Telefon Type</option>
<option value="magyar">Magyar</option>
<option value="ukran">Ukran</option>
</select>
<input type="text" name="telefon" id="telefon" disabled />
$("#telefon_type").bind("change", function() {
$("#telefon").removeAttr("disabled");
if ($(this).val() == "magyar") {
$("#telefon").bind("focus",function() {
// onfocus event for #telefon for magyar
});
} else if ($(this).val() == "ukran") {
$("#telefon").bind("focus",function() {
// onfocus event for #telefon for ukran
});
} else {
$("#telefon").attr("disabled","disabled");
$("#telefon").val('');
}
});
Please note: I have not tested this code. The general idea behind it is that the filter you are running for the telefon field changes based on your selection of the select field.
Your question has beeen already answered. Phil Sturgeon is working on that issue, so you can try to use the development branch of CI from github.
If you want only ONE telephon number (depends on nationality) I think it would be simplier when you use only ONE input field and write its value to database (or do anything what you want). Or is there any reason to use two input fields?
I have browsed for a question similar to this but haven't happened to find exactly what i need but apologies if it has been answered somewhere.
I have started using java script light-boxes in my webpage to display images and am told to place on the links:
This means that the images now open in lightboxes however an HTML 5 validator says that 'lightbox' is obviously not an allowed link type.
How can i relate the required links to the lightbox java script so that it validates?
thanks alot in advance,
matt
Either
Ignore the validation errors (as they don't cause any problems), or
Change from rel="lightbox" to something like data-lightbox="true". Any attribute starting with "data-" is allowed and valid in HTML5.
Matthew's answer works, but you must remember to customize your lightbox source code as well. The example of such a modification you can see here: http://wasthere.com/lightbox2/js/custom-lightbox.js - it works (you can see here e.g. http://wasthere.com/asia/en/show-entry/141/kerala---munnar-(india) ), HTML5 validation passes. Check the comments in source file above, if you decide to use it - just change all "rel" attributes relevant to light box images to "data-rel" on your site.
Best regards,
Lukas
what helped me validating it, is based on what was stated above:
Javascript
function externalLinks()
{
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++)
{
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
{
anchor.target = "_blank";
}
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "lightbox")
{
anchor.setAttribute('data-lightbox','lightbox');
}
}
}
window.onload = externalLinks;
HTML:
<a href='assets/newsTemplate/07_350wtd.jpg' rel='lightbox' title='DumbThumb'><img src='assets/newsTemplate/07_350wtd.jpg' alt='dumb'></img></a>
A si lo solucione:
Modifico el html:
<a href="img/2.jpg" data-rel="lightbox" title="" >
Modifico el javascript:
jQuery(function($) {
$("a[data-rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}