开发者

Jquery jqmodal ajax support

开发者 https://www.devze.com 2023-03-02 11:43 出处:网络
I am making use of a modal on a site, and I am having trouble achieving something: The modal I am using is jqModal found here: http://dev.iceburg.net/jquery/jqModal/

I am making use of a modal on a site, and I am having trouble achieving something: The modal I am using is jqModal found here: http://dev.iceburg.net/jquery/jqModal/

I have no issue initializing one modal.

<script type="text/javascript">$().ready(开发者_如何学编程function() {
$('#cartdialog').jqm({ajax:'@href',trigger: 'a.jqModalcart'});
});</script>


<a class="jqModalcart" href="/ash/shop/cart2.php"><img src="/ash/images/viewcart.gif" 
alt="viewcart"/></a>

This will load up my main modal which displays the contents of cart2.php.

Here is the problem and I know there may be multiple solutions. cart2.php has a button on it, that I want the user to click and have the modal load new content from a different page (shipping.php). Preferably, it would swap out cart2.php for shipping.php, without the need of opening and closing modals, or nested modals that overlap the current one.

Further complicating the matter, shipping.php needs to be loaded with a zip code, which I have written a simple javascript validator for. The link that needs to be passed on looks like this:

href=("/ash/shop/shipping.php?zip=" + document.form9.zip.value)

I know I can get that link into the modal by initializing it like this:

<script type="text/javascript">$().ready(function() {
$('#idhere').jqm({ajax:'@href',trigger: 'a.classhere'});
});</script>

However, I cant seem to "trigger" a modal from a modal.

So I have many questions: 1)Can I leave one modal and change what is being loaded via AJAX inside of it (basically navigate to and from pages within one modal window)? IDEAL SOLUTION!!!! 2)If not...how can I create a nested modal that will show over top of the main modal AND load the link above which requires information from my zip code validator (I can give ajax:'linkhere') but my link has this part added to the end of it within the validator "+ document.form9.zip.value" 3)If that isnt possible...how can I make the button on the main modal FIRST close the main modal THEN load the secondary modal with the new content CONTAINING the link + zip

I have tried to provide this in the clearest way I can get it out of my brain. I will be happy to answer any questions about this as I completely understand I may have not been entirely clear

More info...I have tried .load() with no success but it is most likely because I have very little skill in this area. Here is my zip code script. I have it so that after 5 characters are entered, the link changes so that the user first sees"enter zip code" but then sees "calculate shipping" and the href changes as well.

<script language="javascript">

function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
</script>

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length == limitNum) {
    limitField.value = limitField.value.substring(0, limitNum);

    //switch image out
    javascript:movepic('button','/ash/images/calculateshipping.gif');

    //change image link
    document.getElementById("tester").href=("/ash/shop/shipping.php?zip=" + document.form9.zip.value);
    document.getElementById("tester").onclick=function(){$('#cartdialog').load("/ash/shop/shipping.php?zip=" + document.form9.zip.value);};

} else {
    limitCount.value = limitNum - limitField.value.length;
}
}
</script>

My HTML has a form...

<form id="form9" name="form9" method="post" action="">
<a id="tester" name="tester" class="jqModalship" href="#" style="margin-right:4px;"><img name="button" src="/ash/images/enterzipcode.gif" alt="Image"></a>
<input name="zip" type="text" size="5" onKeyDown="limitText(this.form.zip,this.form.countdown,5);" 
onKeyUp="limitText(this.form.zip,this.form.countdown,5);" maxlength="5">
</form>

Why can I not load the new page into the modal using the above?


To change the content of the modal, you could use a .load() to update the modal's div.

Alternatively you can use the iframe capabilities (see #7 at http://dev.iceburg.net/jquery/jqModal/). This would allow the 'navigating inside the modal' you mentioned.

The second option would probably need to load the second modal's listener along with it, as i'm not sure jqModal allows lazy loading (working on code injected into the DOM after initializing... like .live())

The third option is a hack-n-pray verion. It'll work, but you don't want to use this one.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号