I want to open a p:dialog in a js file. My code is below:
<h:outputScript name="js/check.js"/>
<p:dialog id="dialog1" widgetVar="ex" >
</p:dialog>
In the js file I have written a function and inside that I have tried ex.show(); but it says ex is undefined.
Similarly I also want to invoke a p:commandButton in that file and I tried
document.getElementById("hformid:commandbuttonid").click(); and it says
document.getElementById("hformid:commandbuttonid") is null. How to solve it?
May be 'ex' is defined after your 'check.js' script is executed. Assuming your are using JQuery, try something like
$(document).ready ( function() {
ex.show();
});
So 'ex.show();' will be executed after the whole page is parsed.
Related
I'm using a script to call a separate file and inside that file I'm calling another file.
The script I'm using to call is this:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#socials").load("sources/socials.html");
});
</script>
<script>
$(function(){
$("#icon").load("img/icon.xml");
});
</script>
and I'm calling the file like this:
<div id="socials"></div>
and inside socials.html, I'm calling the icon.xml like this:
<div class="email-bg">
</div>
it's not working for me when I try it like this. Is it not possible to do or is this just the incorrect way?
EDIT
I explained it in a comment below so I'll include the comment here too, I think it makes a little more sense what I'm trying to accomplish:
Essentially I have two standalone files that I am referencing, file A and file B. I am referencing file B inside of file A. When I reference file A in index.html, it works fine except that file B will not get referenced and I don't see the content of file B. BUT if I reference file A and file B directly in index.html without referencing, I can see the content of both files as expected
.load() is asynchronous, and the second function isn't waiting for the first one to finish, so the #icon element isn't in the DOM when it runs. You need to do it in the callback function.
$(function() {
$("#socials").load("sources/socials.html", function() {
$("#icon").load("img/icon.xml");
});
});
So when I load a view like this:
Address bar reads:
"http://localhost/Mywebsite/private_area"
the view is called from the index function of the controller "private_area", and it works fine. However when I call the page using a function "profile" such that the address bar reads:
"http://localhost/Mywebsite/private_area/profile"
the view loses certain functionality such as the toggle buttons dont work, and the src= doesnt work either. The code for the index function and profile function is identical.
Very confused, any ideas?
Here is some related code:
Controller "Login" Redirects using:
redirect ('private_area');
This calls route
$route['private_area'] = 'private_area';
This calls controller Private Area/Index which has the following code:
$this->load->model("Profiles_model");
$profiledata["fetch_profiledata"] = $this->Profiles_model->fetch_profiledata();
$this->load->view('templates/header_pa');
$this->load->view('pages/page-profile', $profiledata);
$this->load->view('templates/footer');
This works fine and displays the Page-profile view perfectly.
But if I go to another view, and then come back to Page-profile view using
Profile
Which call controller "Private_area" and function "Profile"
function profile()
{
$this->load->model("Profiles_model");
$profiledata["fetch_profiledata"] = $this->Profiles_model->fetch_profiledata();
$this->load->view('templates/header_pa');
$this->load->view('pages/page-profile', $profiledata);
$this->load->view('templates/footer');
}
The main view loads, but the src tags dont work, neither do the toggle buttons.
If you are adding the <?=base_url();?>to your image, and any other path, you'll be good.
In case you are adding variables to your function you will have the same problem all over again.
For example your image should look like this:
<img src="<?=base_ur();?>assets/img/demo/avatar1.jpg">
Hope this helps.
I would say you are using relative paths for your CSS and/or Javascript files without the base_url() in front.
Are you getting any 404s in the developer tools? They usually tell you where the problem is.
A correct way of embedding JS & CSS would be:
<link rel="stylesheet" href="<?=base_url();?>/assets/css/bootstrap.min.css">
<script src="<?=base_url();?>assets/js/bootstrap.min.js"></script>
AnPS: So I was able to solve at least part of the problem like this:
The offending code was:
<img src="assets/img/demo/avatar1.jpg">
It would generate the following error:
GET http://localhost/Mywebsite/private_area/assets/img/demo/avatar1.jpg 404 (Not Found)
As it was reading the Controller - "Private_area" as a folder, so I just added ../ to the offending code
<img src="../assets/img/demo/avatar1.jpg">
I fixed the Toggle Buttons using a similiar approach by adding ../ to the script like this:
<script src="../assets/js/plugins.min.js"></script>
<script src="../assets/js/app.min.js"></script>
This worked, but did I do it right? Or is this just a bad "work-around"?
I am using materialize.css and have been trying to programmatically close a modal and then immediately open another.
This is the code I am currently using to open/close:
$('.modal').modal('close', "#modal1");
$('.modal').modal('open', "#modal2");
What actually happens is that when I call these functions, #modal1 closes successfully, but its backdrop remains there as it is.
At exactly the same time, #modal2 opens up and then immediately (in about 200 ms or so) closes back. Again, the backdrop stays unchanged.
Can I please get help to solve this?
The documentation calls jQuery old. So, am I using some depreacated method, and should I use a vanilla JavaScript equivalent for the same? What, if yes?
For Materialize.js version v0.100 and above.
You can call a onClick function() to close/open multiple modals like below:
Button
In below script when OpenCloseModal() function is executed here, it first closes the Modal (#modal1) and then opens the Modal (#modal2)
<script type="text/javascript">
function closeOpenModal() {
$('#modal1').modal('close');
$('#modal2').modal('open');
}
</script>
You can try:
$('#modal1').modal('close');
$('#modal2').modal('open');
No-JQuery way. First you should get an instance of modal that you intend to close. If e.g. on init you write:
var elems = document.querySelectorAll(".modal");
M.Modal.init(elems);
so in elems we have NodeList of all modals, for example we have three modals, to close second one you can say:
elems[1].M_Modal.close();
to open third:
elems[2].M_Modal.open();
function close_modal() {
var elem = document.getElementById("element-id");
var instance = M.Modal.getInstance(elem);
instance.close();
}
How can I use an AJAX listener inside a tabview. Whenever the tab opened(or for a mouse click anywhere), the listener need to execute. I tried with event=click,change,blur etc, but not worked.
<p:tabView activeIndex="#{backingbean.tanIndex}">
<p:ajax event="?" listener="#{backingbean.setTabIndex}" />
in view.jsf:
<p:tabView>
<p:ajax event="tabChange" listener="#{employeeEdit.onTabChange}">
in edit.jsf:
<p:tabView activeIndex="#{employeeEdit.tabIndex}">
in backingBean:
private int tabIndex;
public int onTabChange(TabChangeEvent event)
{
// Here I'm getting event.getTab().getId() and set it to `tabIndex` property.
}
When editing I need redirect to the that tab which is active in view. So if I didn't change the tab onTabChange() will not execute and tabIndex has its old value only.
I'm using Primefaces version-3.0.M3.
It looks like this was a Primefaces bug that was fixed in the newest 3.0.1 release:
http://forum.primefaces.org/viewtopic.php?f=3&t=17288
I had a similar problem with Primefaces 5.1
As long as i put the tabview into a form everything worked fine.
But because i wanted to use seperate forms in my tabs i had to remove the surrounding form of the tabview to avoid nested forms.
Without the surrounding form the ajax event didn´t get triggered any more when changing the tab.
My solution was to use a remotecommand in a form parallel to the tabview.
The remotecommand is triggered by the onTabChange attribute of the tabview element.
At that call i forwarded the index parameter to the global request parameters.
<p:tabView id="rootTabMenu" styleClass="tabcontainer" prependId="false"
activeIndex="#{sessionData.activeTabIndex}" widgetVar="rootTabMenu"
onTabChange="tabChangeHelper([{name: 'activeIndex', value: index}])">
// Tabs...
</p:tabView>
<h:form id="tabChangeHelperForm">
<p:remoteCommand name="tabChangeHelper" actionListener="#{sessionData.onTabChange()}" />
</h:form>
In the backing bean i catched the value again from the request parameter map and set the active index.
public void onTabChange()
{
FacesContext context = FacesContext.getCurrentInstance();
Map<String, String> paramMap = context.getExternalContext().getRequestParameterMap();
String paramIndex = paramMap.get("activeIndex");
setActiveTabIndex(Integer.valueOf(paramIndex));
System.out.println("Active index changed to " + activeTabIndex);
}
Hope that can help you
Not sure if what I am writing is true for ver 3.0.M3. I have in front of the documentation of ver 3.0RC2 and there is a paragraph about this, with explaination and sample code (chapter TabView, paragraph Ajax Behaviour Events). You should have a look at that.
This is the part of the sample code that should help most:
<p:tabView>
<p:ajax event=”tabChange” listener=”#{bean.onChange}” />
</p:tabView>
Jaron has an answer that the 3.0.1 release fixed this but I had this all the way up to 3.5 i believe i was still having this problem. on firefox and IE, the javascript handler for the Tabs weren't firing the ajax event. On google chrome, for whatever reason, it actually worked.
I moved up to Primefaces 5.0 today and this does NOT have the problem any longer. So at the very worst-case, go to Primefaces 5.0 and you'll be all good in the hood
In reference to the query that I have posted
Primefaces Dialog box - show it conditionally. javascript code not working
The problem is that when
<p:outputPanel id="dialogPanel"
rendered="#{not reqSearchHandler.accStatusFlag}">
is not rendered as rendered turns out to be FALSE , then when I click on the commandbutton , its keep on clocking and I am not able to go the next page , it seems that ajax request is never getting completed as oncomplete="dlg3.show()" needs dialog box in the page.As rendered turns out to be false , it never finds dlg3.
<p:commandLink id="addRequest" immediate="true" value="addreq"
oncomplete="dlg3.show()" update="dialogPanel">
<f:setPropertyActionListener
value="#{searchHandler.selectedAccIns}"
target="#{reqSearchHandler.checkAccStatus}" />
</p:commandLink>
Can somebody please help me how to avoid opening dialog box when a particular condition is false. Any Idea?
Is the dlg3 inside of dialogPanel? Why don't you post the complete code?
If so, then just before calling dlg3.show)(), change the rendered condition to true (e.g. by adding action listener) or just move the dialog outside the panel.