I have a problem not sure how to reload a tab based on a selector in the previous tab.
My code for tab is here:
<ul class="nav nav-tabs">
<li class="active">
<a href="#addpropertypanel1" data-toggle="tab">
<s1>
<?php echo Jtext::_( 'ADDRESS');?>
</s1>
</a>
</li>
<li>
<a href="#addpropertypanel2" data-toggle="tab">
<s1>
<?php echo Jtext::_( 'GENERAL_INFORMATION');?>
</s1>
</a>
</li>
<li>
<a href="#addpropertypanel3" data-toggle="tab">
<s1>
<?php echo Jtext::_( 'OTHER_INFORMATION');?>
</s1>
</a>
</li>
<li>
<a href="#addpropertypanel4" data-toggle="tab">
<s1>
<?php echo Jtext::_( 'PHOTOS');?>
</s1>
</a>
</li>
</ul>
In my GENERAL INFORMATION Tab, there is a category selector to choose a value. This value chosen will affect the content in Tab OTHER INFORMATION.
I would like to know how can i reload OTHER INFORMATION tab only with information based on the selection chosen in GENERAL INFORMATION.
I am a very inexperience programmer, any assistance is very much appreciated.
Regards
JavaScript
You can use JavaScript (jQuery) to manipulate the links based on their contents.
See this example: JsFiddle
var myValue = '';
switch( $('a[href=#addpropertypanel2]').text() ) {
// put here your all cases that Jtext::_( 'GENERAL_INFORMATION') can offer
case "abc":
myValue = "new value 1";
break;
case "def":
myValue = "new value 2";
break;
case "GENERAL_INFORMATION": // just for example manipulation
myValue = "new value 3";
break;
}
$('a[href=#addpropertypanel3]').text( myValue );
PHP
You could also manipulate it with PHP by switching the output of Jtext::_( 'GENERAL_INFORMATION') before inserting it to the links. So insert the value that you want after the switch instead of Jtext::_( 'OTHER_INFORMATION')
You need to bind AJAX events for loading the desired information from PHP and injecting it into the tab.
A little step by step tutorial:
The data source:
In PHP you have to write some code, that echos the desired data when calling a new URL (something like http://www.your_domain.com/get_info) depending on POST or GET parameter. For this example I'd like to use GET parameter, which would result to http://www.your_domain.com/get_info?address_id=1 (1 is just an example id value)
The container:
Then in the HTML add a container into the tab for your data. It needs an id, so you can use it with JavaScript. Something like <li><s1><div id="general_information"></div></s1></li>
The event: Now you've got a data source (the new URL) and a destination (the container in the tab of your HTML), all you need to do is use some JavaScript to add the data from the source into the destination. But before you can bind an event to your <select>, you should give it an id, to ease the binding (something like <select id="addresses_select">). I would highly recommend using jQuery for the binding, because it's easy for new developers and it just works in all browsers. (To add jQuery to your page, simply add the following snippet into the <head> of your HTML: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>). When using jQuery you can use the following snippet for retrieving the desired data and injecting it into your HTML container.
jQuery event snippet:
$('#addresses_select').change(function(){
var selected_address_id = this.value;
$.ajax({
url: "/get_info?address_id=" + selected_address_id,
success: function(desired_data_from_php) {
$("#general_information").html("<p>" + desired_data_from_php + "</p>");
}
});
});
That should be all.
Good luck :-)
PS: in the following fiddle you can see how the event for the <select> works: http://jsfiddle.net/LyLHL/
Related
Really struggling to think of a solution to this problem. I have thought anchor links might help (using the #example on the end of a link to scroll to a position on the page) but not sure how best to implement them.
So on the homepage of my site I have a list of links, that correlate to tabs on another page.
The links on the homepage:
(What is e-Bate, What are rebates etc.)
Links
When you click one of the tabs on the other page, it activates a script which shows a certain div below:
Tabs
This is how the tabs are shown:
HTML:
<div class="page-links">
<ul>
<li>What is e-Bate?</li>
<li>What are rebates?</li>
<li>e-Bate features</li>
<li>How e-Bate works</li>
<li>Case studies</li>
</ul>
</div>
<div class="page-contents">
<div id="whatebate" class="hideshowdiv">
<?php echo CFS()->get('whatisebate'); ?>
</div>
<div id="whatrebate" class="hideshowdiv">
<?php echo CFS()->get('what_are_rebates'); ?>
</div>
<div id="ebatefeat" class="hideshowdiv">
<?php echo CFS()->get('e_bate_features'); ?>
</div>
<div id="howebate" class="hideshowdiv">
<?php echo CFS()->get('how_e_bate_works'); ?>
</div>
<div id="casestud" class="hideshowdiv">
<?php echo CFS()->get('case_studies'); ?>
</div>
</div>
jQuery:
jQuery(document).ready(function() {
jQuery(".page-contents div.hideshowdiv").hide();
// Show chosen div, and hide all others
jQuery("a").click(function (e)
{
//e.preventDefault();
jQuery("#" + jQuery(this).attr("class")).fadeIn().siblings('div.hideshowdiv').hide();
});
});
So when one of the links is clicked on the homepage, for instance, the 'What is e-Bate?' link, I want it to go to the other page, and click the corresponding tab, showing the content for that section. Is this possible? Thanks in advance.
This is very possible and you had half the equation with the anchors. Now you just need to write a small function to parse out the URL and check for a certain tag.
So something like this:
$(function(){
if (location.href.indexOf("#example") != -1) {
//This is where you put your function to show the tab
}
if (location.href.indexOf("#anotherexample") != -1) {
//This is where you put your function to show the tab
}
})
Well, if you can use PHP, then it is indeed pretty easy:
First, you need to create a PHP file, obvious with an input parameter, preference, two GET variables, the first one being the link of the page you want to visit and the second one can be, well that depends on how you want it to be, it can be a div id, or a div class or pretty much id of anything you want to click on the second site (You MUST KNOW which button/link you want to click on the second site)
Then first in your php code, store these two things into variables, Let us take $Path and $DivToClick,
Now, use this PHP function:
file_get_contents(path,include_path,context,start,max_length)
Here, the path is an required field, rest is all optional.. and then after that, echo a JQuery code which will do something like this
function ClickTheButton ()
{
$('#divId').click ();
}
Now, let me explain what we are doing here... First, you are sending link to a php script that get all the contents of that webpage and display it on my screen, and then when you are echo-ing the JQuery code, you are telling browser, that yes, this is the part of the page, execute it and simulate the action of click on this page, and thus the click action is simulated and things are done as per your need...
Hope this helps... :)
So, I have been given an admin built in php and I was asked to implement an already done admin built in aspx into the new one(changing the css and so), the thing is that i want to dynamically "insert" into the main admin structure which is made in php only the part that's gonna be run in aspx, I made a reserach and found out that the way to do it was using file_get_contents and yeah it works, the thing is that i want that to show after I click on a link so I put the f_g_c into a js function to do so, the thing is that it doesnt work, it doesnt insert anything, it does it outside a function, but inside it just won't
<li class="active">
<a id="solicitud" href="" >
<i class="fa fa-file-text-o"></i>
<span>Solicitudes</span>
<span class="label label-primary label-circle pull-right">2</span>
</a>
var li = document.getElementById('solicitud');
li.onclick = aparecer();
function aparecer() {
<?php
$hola= "./solicitudAAA.aspx";
?>
var lo = document.getElementById('container');
lo.innerHTML ="<?php echo file_get_contents($hola); ?>";
return false;
}
above there are the section of code or well the link i want to click so it shows the aspx and the second section of code is the actual script, i don't know what I'm doing wrong and why inside the scriptit won't work, thanks for your answers!
The problem with your code has something to do with your link's href. A blank href in your anchor tag will refresh the page causing the onclick in your script to not work. How about adding the following:
<a href="javascript: void(0)" id="solicitud" onclick="aparecer();">
<i class="fa fa-file-text-o"></i>
<span>Solicitudes</span>
<span class="label label-primary label-circle pull-right">2</span>
</a>
To make things easier, add the function to the onclick attribute of the anchor tag to call the function rather than coding it inside the script.
Since onclick attribute(that contains the calling of function) is added to the anchor tag, you can remove this in the script:
var li = document.getElementById('solicitud');
li.onclick = aparecer();
I hope this helps!
I'm kinda new with php and ajax, so I need a little bit of help here. I'll explain my concept a little bit, please give me feedback is it possible or not.
this is a little bit of my code for the main page :
<ul class="treeview-menu">
<li id = 'menu1'>
<a>
<i class="fa fa-angle-double-right"></i>
Menu1
</a>
</li>
</ul>
<div id="content_info" style="display:none;"></div>
<div id="content_data" style="display:none;"></div>
<div id="content_input" style="display:none;"></div>
I have two other page, lets called it form_view.php and form_input.php. the form_view.php is used to show data from the database, and the form_input is used to input new data and edit old data. I'm planning to use AJAX for loading the form_view and form_input on the main page.
First, when I choose Menu1, it will show the content_data div and hide the other two div. Then, it will load form_view.php inside the content_data div. I'm using tables for viewing the data and there's an edit button for each row. When I click the button, the form will be submitted to form_input, and the form_input will show the data that's been chosen.
Is it possible to make form_input show the data that's been chosen and load it in the content_input div? When this is happens, content_data and content_info will be hidden, and content_input will be shown. Is it possible to not refresh the main page while doing so?
And if it's all possible, can you show me some example for the code?
I appreciate any feedback. Thanks.
Encode the data in the url request for form_view.php
$( "#content_data" ).load( "ajax/form_view.php?"+parameters );
Make sure to url encode your parameters. The later retrieve the data from $_GET in your PHP.
I am generating rows dynamically with PHP from DB, once it compiles the initial page code looks something like this:
Snippet
<div class="options" id="options">
<div class="left_wrap">
<ul>
<li class="col_id b-bottom"></li>
<li class="hazard_header"><h3>Hazard</h3></li>
<li class="hazard_input b-bottom"></li>
<li class="con_header b-bottom"><h3>Controls</h3></li>
<li class="cat_header"><h3>Consequence Category</h3></li>
<li class="cat_options"></li>
</ul>
</div>
<div class="right_wrap">
<h2>Inherent Risk (Assessed risk without controls)</h2>
<ul class="fields">
<li class="bg b-top b-right"><h3>Consequence Level</h3><br/><span class="con_level_val"></span></li>
<li class="b-top b-right"><h3>Probability</h3><br/>Possible</li>
<li class="bg b-top b-right"><h3>Exposure (frequency)</h3><br/></li>
After page load I grab contents of the wrap options.
jQuery Snippet:
content = $("div.options").html();
Which in turns stores the above code in the variable content. Now, my question is how can I edit contents of variable content. For example I need to add value to li with class Col_ID like 1,2,3,4 and same when I am deleting I need to modify the contents again.
How can I do something along the lines content.getElement?
If you really need to work with the HTML string, here's something you can do:
content = $("div.options").html();
var $content = $(content);
// now $content is a jQuery object with a bunch of (detached) elements
// you can use the common functions on it without problems, such as
$content.find("li.col_id").text("Some text");
// now you need to do something with $content, or everything you did will...
// ...be lost. You cold, for instance, update the other variable back:
content = $content.html();
// content now has the updated HTML
Now, if you don't need the HTML string at all, then you can work directly like:
content = $("div.options");
content.find("li.col_id").text("Some text");
// now the DOM was already updated as you are dealing with attached elements
I have a jQuery Mobile site with a listview statistics. The user may click an "action" button that delivers a pop-up. Depending on their answer in the popup, the number/statistic in the listview may change. The database query is successful, but the page doesn't update automatically; I have to manually refresh it to see the change. I'm using .post() to query the database (code at the end).
I've seen this question asked multiples times on here, often with the same solution. In the successful callback or popup "afterclose", use:
$('#somelist').listview('refresh');
Or
$("#page").tigger("create");
Unfortunately, neither of those solutions seem to work for me. This has become a very frustrating problem for me, so I'm hoping someone out there can help!
Here's an abbreviated version of my code:
<div id="testdiv">
<ul data-role="listview" data-inset="true" data-theme="a" data-count-theme="a">
<li data-role="list-divider">Combat Round: <?php echo $round; ?><span class="combat_result"></span></li>
<?php
for ($i = 0; $i < $numrows; $i++) {
?>
<li class="combatant" id="combatant_<?php echo $i; ?>"><h3 class="ui-li-heading"><span class="player_name"><?php echo $member[$i]['player_name']; ?></span></h3><span class='ui-li-count'><?php echo $member[$i]['player_total_init']; ?></span>
<p class="ul-li-desc"><strong>Actions Remaining: </strong><span class="remaining"><?php echo $member[$i]['player_actions_remain']; ?></span></p>
</li>
<?php
}
?>
</ul>
</div> <!-- testdiv -->
My database query via JS:
$(document).on('click', '#commit_save', function(e) {
e.preventDefault();
var combatid=$("#save_data_holder").data("combat_id");
var combat_desc=$("#combat_desc").val();
$.post("commit_save.php", {
combatid: combatid,
combat_desc: combat_desc
}, function(data) {
$(".save_result").html(data);
$('#combat_list').listview("refresh");
$("#home").trigger("create");
});
});
And my pop-up JS:
$("#enter_num_actions").popup({
beforeposition: function( event, ui ) {
$("#data_holder").data({"combatant_name": combatant_name, "combat_id": combat_id});
},
afterclose: function( event, ui ) {
$("#testdiv").listview().trigger("create");
}
});
Again, everything works fine except that I have to perform a manual refresh to get the value in the listview to update. If anyone has a suggestion, I appreciate it.
Thanks in advance!
Assuming from your abbreviated php code that your post response contains an entire unordered list including the <ul></ul> tags (btw your abbreviated code does not contain </ul>, perhaps you truncated that when abbreviating) and not just the list tags <li></li> you will need to trigger a create event on the parent div of the received listview.
$("#parentDIV").listview().trigger("create");
This codes creates a new listview for the child html unordered list containing attribute data-role="listview" within that parent div.
I believe $('#somelist').listview('refresh'); is used for when you are ONLY injecting <li></li> tags into an already existing <ul> and then afterwards refreshing that pre-existing list with the new <li> contents.
I found similar results to use refresh etc when I had similar problems in an app and they were not working because jquery mobile did not consider the new html unordered list as a listview yet, so it could not refresh the 'listview'. Notice the reference to listview as opposed to html unordered list that contains an attribute data-role="listview", jquery mobile appears to not consider the unordered list as a listview until you 'create' it.
Manually refreshing a page with a list containing data-role="listview" marks it up as a listview just as any other jquery mobile attributes are processed on page load, thats why it works when you were refreshing it.