I created some tabs using jQuery EasyUI tabs. The content of the tab is loaded by Ajax because I pass the href attribute to my tab like:
<div id="mytabs" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" href="/app/controller/tab_content" style="padding:20px;">
tab1
</div>
<div title="Tab2" href="/app/controller/tab_content" style="padding:20px;">
tab2
</div>
<div title="Tab3" href="/app/controller/tab_content" style="padding:20px;">
tab3
</div>
</div>
As you can see above, every time a tab is selected, the action tab_content which contains the content to be displayed in the tab panel (/app/controller/tab_content is just for illustration) is called. All of this work fine, but what I'm trying to do is to make a variable available to the view tab_content.ctp when the url is called (WITHOUT passing it as a parameter in the url) like:
/app/controller/tab_content/my_variable:test
Is there any way that I can pass a variable to my view when the tab is clicked without passing it to the url of the tab content? In order words, I want my_variable to be available to the view tab_content.ctp when the tab is clicked.
Note: This is a cakephp application
Thank you
You might have solved the problem already, but I ran into a similar issue with EasyUI tabs and remote content and thought I might share it. What I ended up doing was
for the variable to be passed: declare it as a window.variable, i.e. by setting window.my_variable = my_variable
for the external tab content: call the variable via javascript in the external file - since a window.variable has global scope, it is also available in dynamically loaded content (see this answer)
Hope this is of help.
Edit jquery.easyui.min.js and search for:
$.fn.panel.defaults
Change method: "get" to method "post"
Related
The questions similar to that I found a lot but still can not realize what I need. I have a page.php that loaded in the block din_content with function .load
Page.php
<div id="ess">
<div id="top_ch">
<h1>Ess</h1>
</div>
<div id="ch">
<iframe name="users" width="220" height="510" align="left" src='ess/users.php' id="userch"></iframe>
<iframe name="text" width="450" height="405" src='ess/text.php'></iframe>
</div>
In page I have two Iframes. So I have two problems. First in main page where that iframes loaded I have Jquery function
$(document).on('click','.link_pro',function () {
//some actions
});
How to make that that function also worked in iframe?
Second, In the first Iframe I have two links. So what I need is that depend of what link you click on, the variable 'active' changed and depend on the value of that variable changed the second iframe. In example, you click on the first link and variable 'active' =1 than it transfered to the second iframe (may be even transfer to the parent and try to send to the second iframe trough method Get) where depend of the value displayed a requested result. I try to realize it with jquery and php. But still didn't get the result. The most problem to get a result from clicking on links in the first Iframe.
If you own the iframes sources and they belong to the same domain as the top window, then, for attaching events, you could probably do something like:
jQuery("iframe").load(function(){
jQuery(this).contents().find(".link_pro").on("click", function(){
});
});
The code above will attach the click event to your iframe's content (.link_pro).
Then, for the second question, if you have, for example, in your top window:
var myTopVar; //This belongs to top window scope
From your iframe, you can access:
top.myTopVar;
I think that should be it but, again, both your top window and iframe should share the same domain (document.domain). If not, you will face same origin policy problems.
I am having a problem where I am successfully setting a URL variable in the form of mywebsite.com/contact/?product=VAR1 from one page to another, and it will be read on the 2nd page with my simple code.
First use is fine but any thing after that is not. There is a problem with the variable not being cleared/re-read/reset. The URL Bar even reads fine in the URL bar mywebsite.com/contact/?product=VAR2 so that first part works.
But the code doesn't want to get the VAR2 part once it has stored VAR1. It just keeps re-displaying VAR1 once it is loaded once.
<?php echo htmlentities($_GET['product']); ?>
If it makes a difference, I am succesfully displaying the ?product= information inside of a jQuery value changer with this:
$(".input-text").val('<?php echo htmlentities($_GET['product']); ?>');
I have tried my own solutions like putting in a unset($product); before the last ?> but no avail.
I have a limited knowledge of PHP/jQuery and would like to use this way of setting/grabbing variable since it is simple. I am using it in jQuery because it can re-write the exact form input-box value with this variable passed along, and successfully send it in my CMS's contact form.
------------------------ updated: added code ------------------------
(I am just displaying all the code logically as I can think of)
#1: Set up the variable into the URL. The first echo getURL displays the url, I add my ?product= and then it gets the item name. This is all fine.
<a href="<?php echo Mage::getURL('webforms/index/index/id/2') ?>?product=<?php echo $_product->getName(); ?>">
#2: My form is set up within my CMS. It has a special class so I can select it exactly within my jQuery. I do not have access to all of this, it is generated by the CMS. The purpose obviously is to get selected products to be rememmberd via this Variable, and serve purpose in the contact form.
<div class="field webforms-fields-enquiryfield">
<label for="field_20">
Product in Enquiry
</label>
<div class="input-box">
<input type="text" name="field[20]" id="field[20]" class="input-text" style="" value="">
</div>
</div>
#3: Now that my area to display, & variable are set up, we use jQuery to insert the variable into the actual value of the input-text form. I am doing this because within my CMS I am not able to simply add it in. I have to use jQuery to replace the text (which is empty box anyway).
$(".webforms-fields-enquiryfield .input-text").val('<?php echo htmlentities($_GET['product']); ?>');
Hope that made more sense.
I have figured the answer to this, the problem was that the CMS Magento likes to cache certain blocks - which is why I could view it first, then my CMS would store the variable but not erase it. No matter what kind of fixes I tried to disable caching, no go.
Instead I ended up using the following code, using a # variable, and some simple JavaScript that anyone can understand. I will be using this in future projects no doubt! Very easy variable passing ...
if(window.location.hash) {
var hash_value = window.location.hash.replace('#', '');
$("my-css-input-field-or-whatever-you-want").val(hash_value);
}
The hash_value can be used in a variety of ways now I suppose, and this works well around my Magento set up, it does not get cached/stored. Grabbing the URL location & hash instead.
(And the PHP used, simplified for anyone to replace/reuse within a CMS)
<a href="[GetBaseURLfromCMS]#[MyDynamicVariableHere] ">
I have an area on my webpage that is populated by different <div> containers of information. When a link in my navigation bar is pressed, one <div> will fade out and another will fade in. What I'd like to do is have one of these content <div>'s filled with dynamic information, and when a link is pressed on another one of the "pages" it would change which database to load the information from and then display, or fade in, that <div> with the new information.
Sudo:
View information
<div id = "dynamicDiv">
<?php include 'file.php' ?>
</div>
file.php
**Find which database to load information from and display content**
I thought about using $GLOBAL vars, but I'm not sure how to set those from a link, and also it wouldn't reload the div content.
I also considered using a form, but I'm not sure of the "correct" way of doing this would be, and also when the page is reloaded the <div> that is displayed by default would be loaded, not the <div id = "dynamicDiv>
Any suggestions/ideas are very much welcomed....
In this case you should use ajax.
AJAX is used for changing the page content from server without reloading the page.
You can use this JQUERY AJAX And JQUERY LOAD
$(document).ready(function(){
$("#changediv").load("load.php?id=1");
})
in load.php
$id=$_GET['id'];
// use that id for dynamic query in database
$query="SELECT *.....";
$result=mysql_query($query);
echo mysql_fetch_array($result);//somthing like that
All the word echoed in php become response in ajax.
I'm using php session variables to retain page state, as in the example below, it's to maintain the fact that a element has been clicked and receives a new class. The class is removed later if it is clicked a second time.
However I am also setting a global variable so that my client side "knows" the state and executing some other code that affect other elements on the page elsewhere (highlights them). This code uses the "this" of the clicked element to know how to highlight the other elements. <==== this is the important bit.
$("listRow").click(function(){
if (globalVariable == "someClass")
{
// clean global
globalVariable = " ";
/* call a server side script via ajax to unset php session variable */
}else{
/* call a server side script via ajax to create a php session variable, later used on page refresh to retain page state*/
// also set a global js variable for use elsewhere
globalVariable = "someClass";
};
$(this).toggleClass(".someClass");
// alot of code to do something to other elements on the page using some data that is specifically available in this element
});
Now imagine this normal scenario:
User clicks listRow triggering the code. // everything fine so far
User refreshes the page : listRow gets the class it needs BUT....
none of the other elements get highlighted. This happens because the
listRow hasn't been clicked, and I get this.
So what I want to do is create a small function that contains the code to highlight the other page elements.
I have a number of preconditions: All the javascript including global variables are contained in external js files. It is not allowed to put raw js into the markup. i.e. the limitation is that I cannot declare a global variable in the and then use php to populate it from the session variable.
I think that I can identify the fact that the item has been affected by php by doing the following. I say I think because I'm not sure if this is asking the question "if any element in the listRow..." or if the expression can identify the specific element somehow.
function mySelfStarter()
{
if ($("listRow").hasClass("someClass"))
{
// some code
};
};
I know I can simply cause the function to execute on refresh like this somewhere in the document onload:
mySelfStarter();
What I want to do is find the element that has the class someClassand then find the id and then use this id to set both the global variable and the highlighting of other non- related elements. And this all has to be client side code.
Something like:
if ($("listRow").hasClass("someClass"))
{
// find the element that has the class "someclass"
// get the id of this element
// do something with id
};
newly served page before click
<div id="listWrapper" class="wrapper">
<div id="value1" class="listRow"></div>
<div id="value2" class="listRow"></div>
<div id="value3" class="listRow"></div>
<div id="value4" class="listRow"></div>
</div>
after click
<div id="listWrapper" class="wrapper">
<div id="value1" class="listRow"></div>
<div id="value2" class="listRow someClass"></div>
<div id="value3" class="listRow"></div>
<div id="value4" class="listRow"></div>
</div>
after page refresh
<div id="listWrapper" class="wrapper">
<div id="value1" class="listRow"></div>
<div id="value2" class="listRow someClass"></div>
<div id="value3" class="listRow"></div>
<div id="value4" class="listRow"></div>
</div>
I'm not sure I follow, but if you're saving the state on your php session, you can check for that before rendering the page and if the session says the element was clicked, then also render a small js script that will trigger the click event on your element. That way, you get all the side efects you need, just as if the user had clicked the element.
You can trigger a click event by doing something like:
$("#element").trigger("click");
Edit with the final solution
How about this:
$("listRow.someClass").each(function(){
// - this: Is the element with the class
// - $(this).attr("id"): Is the ID of that element
// do something with id
});
How about now? BTW, doing $("listRow") won't probably find anything, since you're telling JQuery to look for a tag called "listRow", are you sure you're not missing a "." or a "#" there?
I am using a jquery tabbed interface here http://www.imashdigital.com/#2 and would like to return the tab number in php.
Ideally I would like to run a javascript function (on a timer) that continually updates a global php variable with the current tab.
Based on this php value, 1 through to 4, I will then load a different sidebar.
I would be grateful for any help and some code examples as I am a novice.
Kind regards
Jonathan
The part of an URI that comes after the hash is never sent to the server. There is no way that PHP can access it. Use a querystring parameter ($_GET) instead. Or use client side scripting (javascript).
I would suggest you do not run a timer but instead attach the $.post to the event "tab activation". This will make any tab change applied in real time and it won't trigger needless requests.
I have used tabbed panels in a couple recent projects, and the solution I've used is the following:
HTML
<ul class="tabs">
<li>English</li>
<li>Français</li>
</ul>
<div class="panel" id="en_en"><!-- Content --></div>
<div class="panel" id="fr_fr"><!-- Content --></div>
jQuery
// the currently selected tab, or a default tab (don't forget to prepend the #)
var tab = location.hash || '#en_en';
// register a click handler on all the tabs
$('ul.tabs a').click(function(event){
event.preventDefault(); // prevents the browser from scrolling to the anchor
// hide all panels, then use the link's href attribute to find
// the matching panel, and make it visible
// you can, of course, use whatever animation you like
$('div.panel').hide().filter( $(this).attr('href') ).show();
).filter('[href*='+tab+']').click();
// above: in case of refreshing/bookmarking: find the tab link that contains
// the current location.hash, and fire its click handler
It works well because the server-side code doesn't need to know which tab is selected, but it also supports refreshing or bookmarking a specific tab without requiring the user select the tab again.