execute handler from one page to another - ajax

SHORT DESCRIPTION:
For example we have two pages. The second page contain block which filled via AJAX. This is a big block and contain tabs(5 pieces) and each tab have handler(click event). On the first page we have a link which open the second page. I want to do the following: when user clicks on link on the first page then open second page and execute handler attached to a specific tab.
How can I do this?
MORE DETAILS:
I have page which contain schedules of event:
<div id="content">
<div class="section">
<div id="listInfoBlock" class="list_infoBlock">
</div>
<!-- .list_infoBlock-->
</div>
<!-- .section-->
</div>
The listInfoBlock filled via AJAX:
function loadEventList(id, tab) {
$('#listInfoBlock').load('/BaseEvent/EventList?period=' + id+"&tab="+tab, function () {
//the some actions
});
}
When listInfoBlock is filled it contain info about event and schedules:
<table class="time_table" cellspacing="0">
<tbody>
<tr>
<td>
PlaceName
</td>
<td class="time_list">
<ul>
<li>
19:00
</li>
</ul>
</td>
</tr>
</tbody>
</table>
When a user click on a time(a tag) then loads a second page. This is the second page contain details info about event and block called Publication. This is a big block which contain tabs(5) load via AJAX. When user click on tab called "Schedule" then via AJAX loads schedule of event. The user selects time and the hall plan is shown to him. The user has to do a lot of unnecessary actions.
I want to do the following: when user clicks on time on the first page then load second page, make the Schedule tab as active and load hall plan.
How to do such things?
Thanks and sorry for my english.

You can look at the anchors. That is, on the first page append some anchor to the url (e.g. $('#listInfoBlock').load('/BaseEvent/EventList?period=' + id+"&tab="+tab+"#ScheduleTab"), and on the second page in the onLoad event check for anchor (location.hash) and make the required tab active if it is equals to ScheduleTab.

Related

2 forms - Credit Card and Checking Account - 2 identical xpaths for one checkbox - automation will not click the checkbox

here is the xpath I am using
//tr[#id = 'inputSavePaymentAccounts']/descendant::input[#type = 'checkbox' and #name = 'payAck' and #tabindex = '10'
here is how I can get it to check the checkbox
jQuery('.payAck').prop('checked', true)
here is the checking account html that is inside an iframe
<tr id="inputSavePaymentAccounts" class="savePaymentAccounts" style="display: table-row;">
<td class="addCCLabel" style="padding-top: 15px;">Save this Payment Method</td>
<td style="padding-top: 15px;">
<input class="payAck" type="checkbox" onchange="friendlyNameShow()" name="payAck" tabindex="10">
</td>
</tr>
here is the credit card html that is inside the same iframe
<tr id="inputSavePaymentAccounts" class="savePaymentAccounts" style="display: table-row;">
<td class="addCCLabel" style="padding-top: 15px;">Save this Payment Method</td>
<td style="padding-top: 15px;">
<input class="payAck" type="checkbox" onchange="friendlyNameShow()" name="payAck" tabindex="25">
</td>
</tr>
The main issue is that when i use:
jQuery('.payAck').prop('checked', true)
it checkmarks the checkbox however, at the time the checkbox is checked I am suppose to see a text box display, which is not happening with the above jquery. I was hoping the execution of xpath would solve this
see these for a more clearer picture
image of checkbox http://prnt.sc/c12b1p
image of checkbox when it is checked with text box displaying (need this to happen) http://prnt.sc/c12b7q
First of all, I would recommend you remove the inline javascript. Your primary selector in this case is a class and the class is assigned to 2 elements (at least from what I see in your example). When you check the checkbox using jQuery with the class selector, it is going to trigger all the elements that belong to that class and I don't think that is what you intend to do. Also, using click() will work, but that will cause friendlyNameShow() to be called twice and you will need to check the state of the checkbox since you are not explicitly checking/un-checking it. Try using and Id instead.

How to catch 'hide.bs.tab' event for tabs in React-Bootstrap

Due to docs React-Bootstrap supports onSelect method for tabs which fires once tab switch to another tab.
I looking for something similar to native Twitter Bootstrap event hide.bs.tab to determine moment when tab starts closing.
I found some utilities with onExit method, but that doesn't work for tabs, as for me.
How to do that?
Actually, onSelect fires (if you provided it as a prop) as soon as another tab is selected, not after it is switched to. It is then that handler's job to switch the active tab (or not), perhaps after loading additional information through the wire, and so on.
An excerpt from the React-Bootstrap code:
if (this.props.onSelect) {
this._isChanging = true;
this.props.onSelect(selectedKey);
this._isChanging = false;
return;
}
(taken from https://github.com/react-bootstrap/react-bootstrap/blob/44182b72da816b719029355478ef2e7efef522f6/src/Tabs.js#L324)
Then followed by the built-in tab switching but only if you hadn't provided onSelect.
For example, your custom onSelect handler could display a spinner, fetch data that goes in the new tab, and once that's done hide the spinner and switch the active tab to that one, using the activeKey prop.
You can attach an onClick event to the anchor element of your nav-tabs:
<ul className="nav nav-tabs">
<li className="nav-item">
<a className="nav-link active" data-toggle="tab" href="#tabOne" role="tab" onClick={this.handleTabChange}>Tab One</a>
</li>
<li className="nav-item">
<a className="nav-link active" data-toggle="tab" href="#tabTwo" role="tab" onClick={this.handleTabChange}>Tab Two</a>
</li>
</ul>

Telerik Kendo UI Window

I have a view which displays a list of items (as below). I would like to use the KendoUI window as a popup editor, which would appear after the user clicks on a button or link. I already have a partial view which would be the content of the button. So if I could somehow inject this in.
#foreach (var item in Model) {
<tr>
<td>
<div></div>
<input type="button" id="btnReject" value="Edit" onclick="ConfirmReject(item.id);" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
</tr>
}
Use delegate event attached to the table with filter set to 'tr' element (more info here). And open the window programatically by specifying its content. To create the content easily you can templates.

Show/hide button: put result into POST variable

I have a long list of links in my website's menu. I show the first three links per default, and I have a "Show/hide" button for the rest of the links.
I would like to be able to change the default value (show or hide) according to the visitor's preference.
--> So the default value is "hide" to start with. If the visitor clicks "show" and then clicks a link, I want the next page to be "show" per default. If he then clicks hide, default is "hide".
Below is my menu. 1-2-3 are always shown, 4-5-6 are shown or hidden.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<div class="liste-cachee">
<div class="quotecontent">
<div style="display: none;">
<li>4</li>
<li>5</li>
<li>6</li>
</div>
</div>
</div>
<input type="button" value="Plus / Moins" onclick="if (
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != 'block') {
sendMenuDisplay('block');
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'block';
} else {
sendMenuDisplay('none');
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; }" />
</ul>
My question is: How can I save what the visitor choses (show or hide), put it in a $_POST variable and use it as the default value on the next page?
Thanks for your time and help
You could POST or PUT the value and put in a cookie or a session attribute for use in subsequent pages. You could also POST or PUT the value using ajax and put the value in a cookie or session attribute for later use. You could also store the value in a database and use across user-sessions.

jQuery Ajax pull data from a Form request on another page?

I want to grab some elements of a page using jQuery and ajax...no problem. However, the elements do not appear until a user clicks a button in the form, so essentially I cannot pull anything off the page unless that is executed. Anyone know how this can be achieved? I will post samples and what I am trying to accomplish.
I want to pull data from all orders 12 months previous (value=12). This is the form that is given on the page:
<form action="" method="post" name="form2">
<table>
<tbody><tr>
<td align="center"><span><b>Order History</b></span></td>
</tr>
<tr>
<td>
<table>
<tbody><tr>
<td width="235">
<select name="date">
<option selected="" value="1">Orders placed in the past 1 month</option>
<option value="3">Orders placed in the past 3 months</option>
<option value="6">Orders placed in the past 6 months</option>
<option value="12">Orders placed in the past 12 months</option>
<option value="2011"> Orders placed in 2011</option>
<option value="2010"> Orders placed in 2010</option>
<option value="2009"> Orders placed in 2009</option>
</select>
</td>
<td width="43">
<input type="image" border="0" src="v/vspfiles/templates/4/images/Template/btn_go.gif" name="imageField">
</td>
</tr>
</tbody></table>
<br>
</form>
Once the data is displayed, the url does not change so it is still '/orders.asp', but I want to then grab that data using ajax. Is this possible?
Right now one has to go to their My Account page, then they have to click a link which takes them to their Orders page where this form is located. I want to automatically display thier most recent orders on their My Account page.
I'm not clear where you're stuck.
One can wire some JavaScript that will execute when the user selects any of the options (eg.12)
The Javascript can initiate an Ajax call - this retrieves some data
The ajax call hits a service on the server that gathers some data , which should be just data, not HTML
When the Ajax call completes some more javascript can look at the response, and manipulate the DOM in the browser to present the data.
From your question I can't figure out where you need the help.

Resources